import { useEffect, useState } from "react";
import { useParams, Link } from "react-router-dom";
import { ArrowUpRight, ArrowLeft } from "lucide-react";
import SEO from "../lib/seo";
import PageHero from "../components/PageHero";
import Reveal from "../components/Reveal";
import PartnerCard from "../components/PartnerCard";
import OemLogo from "../components/OemLogo";
import CTASection from "../components/CTASection";
import type { Partner } from "../types";

export default function PartnerDetail() {
  const { slug } = useParams();
  const [data, setData] = useState<{ partner: Partner; related: Partner[] } | null>(null);
  const [notFound, setNotFound] = useState(false);

  useEffect(() => {
    setData(null);
    setNotFound(false);
    fetch(`${process.env.REACT_APP_BACKEND_URL}/api/partners/${slug}`)
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((d) => setData(d))
      .catch(() => setNotFound(true));
  }, [slug]);

  if (notFound) {
    return (
      <div className="min-h-screen bg-[#F6F8FA] flex flex-col items-center justify-center gap-6 pt-24 text-center px-6" data-testid="partner-not-found">
        <p className="font-display font-black text-4xl text-[#101828]">Partner not found.</p>
        <Link to="/partners" className="text-[#0089A1] font-bold hover:text-ember transition-colors" data-testid="back-to-partners">← Back to Technology Partners</Link>
      </div>
    );
  }
  if (!data) {
    return <div className="min-h-screen bg-[#F6F8FA] pt-40 text-center text-mist/50 text-sm" data-testid="partner-loading">Loading partner…</div>;
  }

  const { partner, related } = data;
  const initials = partner.name.split(" ").map((w) => w[0]).slice(0, 2).join("");

  return (
    <div data-testid="partner-detail-page">
      <SEO title={`${partner.name} — Technology Ecosystem`} description={`${partner.name}: ${partner.description} Part of the Aviokan technology ecosystem (${partner.category}).`} path={`/partners/${partner.slug}`} />

      <PageHero
        eyebrow={partner.category.toUpperCase()}
        title={partner.name}
        desc={partner.subCategory}
        breadcrumb={[{ label: "Home", to: "/" }, { label: "Technology Partners", to: "/partners" }, { label: partner.name }]}
        image="/images/partners/hero.jpg"
        testId="partner-hero"
      >
        <div className="inline-flex items-center gap-4 bg-[#0B0C10]/70 border border-white/15 backdrop-blur-sm p-3 pr-6" data-testid={`partner-profile-logo-${partner.slug}`}>
          {partner.logoUrl
            ? <img src={partner.logoUrl.startsWith("/api/") ? `${process.env.REACT_APP_BACKEND_URL}${partner.logoUrl}` : partner.logoUrl} alt={partner.name} className="h-12 w-12 object-contain" onError={(e) => { e.currentTarget.style.display = "none"; }} />
            : <OemLogo domain={partner.domain} name={partner.name} slug={partner.slug} className="h-12 w-12" tileCls="h-12 w-12 bg-[#F0F3F7] border border-[#E2E7EF] grid place-items-center text-sm font-tech text-mist/70" />}
          <div className="text-left">
            <p className="font-display font-bold text-white leading-tight">{partner.name}</p>
            <p className="font-tech text-[10px] tracking-[0.2em] text-white/55 mt-0.5">{partner.category.toUpperCase()}</p>
          </div>
        </div>
        <a href={partner.officialWebsite} target="_blank" rel="noopener nofollow noreferrer" className="inline-flex items-center justify-center gap-2 bg-ember text-white font-bold text-[14px] px-8 py-4 hover:bg-white hover:text-[#14151A] transition-colors duration-300" data-testid={`partner-visit-official-${partner.slug}`}>
          Visit {partner.name.split(" ")[0]} <ArrowUpRight size={15} />
        </a>
        <Link to="/partners" className="inline-flex items-center gap-2 border border-cy/60 text-[#0089A1] font-bold text-[14px] px-8 py-4 hover:bg-cy hover:text-[#14151A] transition-colors duration-300" data-testid="partner-back-directory">
          <ArrowLeft size={15} /> All Partners
        </Link>
      </PageHero>

      <section className="bg-[#F6F8FA] py-20" data-testid="partner-info">
        <div className="mx-auto max-w-[1320px] px-5 md:px-10 grid lg:grid-cols-[0.8fr_1.2fr] gap-10">
          <Reveal>
            <div className="border border-[#E2E7EF] bg-white p-10 flex flex-col items-center justify-center aspect-square max-w-sm mx-auto lg:mx-0">
              <span className="font-display font-black text-6xl text-[#101828] border border-cy/30 px-8 py-6" data-testid="partner-initials-tile">{initials}</span>
              <p className="text-[10px] font-tech tracking-[0.25em] text-mist/40 mt-8 text-center">{partner.officialWebsite}</p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <div className="flex flex-wrap gap-2 mb-6">
              <span className="text-[10px] font-tech tracking-[0.18em] text-[#0089A1] border border-cy/30 px-3 py-1.5 uppercase">{partner.category}</span>
              <span className="text-[10px] font-tech tracking-[0.18em] text-ember border border-ember/40 px-3 py-1.5 uppercase">{partner.relationshipStatus || "Technology Ecosystem"}</span>
            </div>
            <p className="text-lg text-mist/85 leading-relaxed" data-testid="partner-description">{partner.description}</p>
            <p className="text-sm text-mist/60 leading-relaxed mt-5">
              Aviokan architects, integrates and supports solutions built on {partner.name} within enterprise environments. This listing reflects a technology ecosystem relationship; authorized or certified partnership status is displayed only when formally verified.
            </p>
            <p className="text-[11px] font-tech tracking-[0.25em] text-[#0089A1] mt-9 mb-4">TECHNOLOGY AREAS</p>
            <div className="flex flex-wrap gap-2">
              {(partner.technologies || []).map((t) => (
                <span key={t} className="text-xs border border-[#E2E7EF] text-mist/80 px-3.5 py-2">{t}</span>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {related?.length > 0 && (
        <section className="bg-[#EEF2F7] py-20 border-y border-[#E2E7EF]" data-testid="related-partners">
          <div className="mx-auto max-w-[1320px] px-5 md:px-10">
            <h2 className="font-display font-black text-2xl md:text-3xl text-[#101828] tracking-tight mb-10">More in {partner.category}.</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
              {related.map((p, i) => <PartnerCard key={p.slug} partner={p} index={i} />)}
            </div>
          </div>
        </section>
      )}

      <CTASection title={`Need ${partner.name} in your environment?`} desc="Discuss licensing routes, integration scope and support options with an Aviokan consultant." />
    </div>
  );
}