"use client";
/* oxlint-disable next/no-img-element */
/* oxlint-disable next/no-html-link-for-pages */

import { useMemo, useState } from "react";
import {
  ArrowLeft, ArrowRight, ArrowUpRight, BriefcaseBusiness, Building2, ChevronRight,
  CircleDollarSign, Download, FileText, Globe2, Landmark, Mail,
  MapPin, Menu, Phone, Search, Ship, Sprout, TrendingUp, Wheat,
} from "lucide-react";
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { activities, nav, news, notices, reports, services, tenders } from "@/app/tcp-data";

type Concept = "industrial" | "gateway" | "trade" | "civic";
const validConcepts: Concept[] = ["industrial", "gateway", "trade", "civic"];
const concepts = [
  { slug: "industrial", name: "Industrial" }, { slug: "gateway", name: "Gateway" },
  { slug: "trade", name: "Trade" }, { slug: "civic", name: "Civic" },
];

const heroSlides = [
  { eyebrow: "Serving the nation since 1967", title: "Trade that moves Pakistan forward.", copy: "TCP supports economic stability through transparent, efficient and strategic trade operations.", image: "/images/hero-port-modern.png", cta: "Explore our operations", href: "https://tcp.gov.pk/page-import" },
  { eyebrow: "Open opportunities", title: "Procurement built on transparency.", copy: "Access tender notices, annual procurement plans and bid evaluation information in one place.", image: "/images/hero-commodities-modern.png", cta: "View online tenders", href: "https://tcp.gov.pk/page-tenders" },
];

function External({ href, children, className = "" }: { href: string; children: React.ReactNode; className?: string }) {
  return <a href={href} className={className}>{children}</a>;
}

function ConceptBar({ active }: { active: Concept }) {
  return <div className="concept-bar"><a href="/" className="back-link"><ArrowLeft /> All concepts</a><div className="concept-pills">{concepts.map(c => <a aria-current={active === c.slug ? "page" : undefined} key={c.slug} href={`/concept/${c.slug}`}>{c.name}</a>)}</div></div>;
}

function Header({ active, inverted = false }: { active: Concept; inverted?: boolean }) {
  return <>
    <ConceptBar active={active} />
    <header className={`site-header ${inverted ? "inverted" : ""}`}>
      <a href="/" className="brand"><img src="/images/tcp-logo.png" alt="Trading Corporation of Pakistan" /></a>
      <nav className="desktop-nav" aria-label="Primary navigation">{nav.map(n => <External key={n.label} href={n.href}>{n.label}</External>)}</nav>
      <div className="header-tools"><button aria-label="Search TCP"><Search /></button><External href="https://tcp.gov.pk/page-tenders" className="header-cta">Online tenders</External>
        <Sheet><SheetTrigger className="menu-trigger" aria-label="Open navigation"><Menu /></SheetTrigger><SheetContent className="mobile-sheet"><SheetHeader><SheetTitle>Navigate TCP</SheetTitle><SheetDescription>Official information and public services</SheetDescription></SheetHeader><nav>{nav.map(n => <External key={n.label} href={n.href}>{n.label}<ChevronRight /></External>)}</nav></SheetContent></Sheet>
      </div>
    </header>
  </>;
}

function Footer() {
  return <footer className="site-footer"><div className="footer-brand"><img src="/images/tcp-logo.png" alt="Trading Corporation of Pakistan" /><p>Trading Corporation of Pakistan (Pvt) Limited<br/>Ministry of Commerce, Government of Pakistan</p></div><div><h3>Explore</h3>{nav.slice(0,4).map(n=><External href={n.href} key={n.label}>{n.label}</External>)}</div><div><h3>Public information</h3><External href="https://tcp.gov.pk/page-tenders">Tenders</External><External href="https://tcp.gov.pk/page-Annual-Reports">Annual reports</External><External href="https://tcp.gov.pk/page-pio">Right to information</External><External href="https://tcp.gov.pk/page-WHISTLEBLOWING-POLICY">Whistleblowing policy</External></div><div><h3>Contact</h3><p><MapPin/> FTC Building, Shahra-e-Faisal, Karachi</p><p><Phone/> +92-21-111-TCP-000</p><p><Mail/> tcp@tcp.gov.pk</p></div><div className="footer-bottom"><span>© 2026 Trading Corporation of Pakistan</span><span>Prepared for TCP by ECOM PK (Pvt.) Ltd</span></div></footer>;
}

function SectionHead({ eyebrow, title, action }: { eyebrow: string; title: string; action?: { label: string; href: string } }) {
  return <div className="section-head"><div><p>{eyebrow}</p><h2>{title}</h2></div>{action && <External href={action.href}>{action.label}<ArrowUpRight/></External>}</div>;
}

function TenderExplorer({ compact = false }: { compact?: boolean }) {
  const [query, setQuery] = useState(""); const [filter, setFilter] = useState("All");
  const shown = useMemo(() => tenders.filter(t => (filter === "All" || t.tag === filter) && t.title.toLowerCase().includes(query.toLowerCase())), [query, filter]);
  return <div className={`tender-explorer ${compact ? "compact" : ""}`}><div className="filter-row"><label><Search/><span className="sr-only">Search tender categories</span><input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search tenders and commodities" /></label><div aria-label="Filter tenders">{["All","Commodity","Procurement"].map(f=><button aria-pressed={filter===f} onClick={()=>setFilter(f)} key={f}>{f}</button>)}</div></div><div className="tender-grid">{shown.map(t=><External href={t.href} className="tender-card" key={t.title}><img src={t.image} alt=""/><span>{t.tag}</span><h3>{t.title}</h3><p>{t.description}</p><b>View information <ArrowUpRight/></b></External>)}</div>{shown.length===0&&<p className="empty-state">No matching tender category. Try a broader search.</p>}</div>;
}

function ReportsCarousel() {
  return <div className="reports-grid">{reports.map((r,i)=><External href={r.href} className={`report-card report-card-${i+1}`} key={r.title}><FileText/><div><span>Financial archive</span><h3>{r.title}</h3><p>{r.description}</p></div><Download/></External>)}</div>;
}

function CareerCallout() { return <section className="career-callout"><div><p>Careers at TCP</p><h2>Build a career that serves Pakistan.</h2></div><External href="https://tcp.gov.pk/page-job-opportunities">Explore opportunities <ArrowUpRight/></External></section>; }

function Industrial() {
  const [slide,setSlide]=useState(0); const hero=heroSlides[slide];
  return <main className="concept-page industrial-page"><Header active="industrial" inverted/><section className="industrial-hero" style={{backgroundImage:`linear-gradient(90deg,rgba(0,11,31,.94),rgba(0,11,31,.12)),url(${hero.image})`}}><div className="hero-copy"><p>{hero.eyebrow}</p><h1>{hero.title}</h1><p className="hero-lede">{hero.copy}</p><External href={hero.href} className="primary-btn">{hero.cta}<ArrowRight/></External></div><div className="hero-controls"><span>0{slide+1} / 0{heroSlides.length}</span><button onClick={()=>setSlide((slide-1+heroSlides.length)%heroSlides.length)} aria-label="Previous hero"><ArrowLeft/></button><button onClick={()=>setSlide((slide+1)%heroSlides.length)} aria-label="Next hero"><ArrowRight/></button></div></section><section className="ticker"><span>Latest update</span><p>Online tender information, annual procurement plans and public notices are available now.</p><External href="https://tcp.gov.pk/page-tenders">View updates<ArrowUpRight/></External></section><section className="dark-section"><SectionHead eyebrow="What we do" title="Trade infrastructure for national resilience."/><div className="industrial-activities">{activities.map((a,i)=><External href={a.href} key={a.title}><span>0{i+1}</span><Ship/><h3>{a.title}</h3><p>{a.description}</p><ArrowUpRight/></External>)}</div></section><section className="light-section"><SectionHead eyebrow="Procurement" title="Opportunities, clearly presented." action={{label:"All tenders",href:"https://tcp.gov.pk/page-tenders"}}/><TenderExplorer/></section><section className="story-split"><img src="/images/tcp-building.jpg" alt="Trading Corporation of Pakistan office"/><div><p>About TCP</p><h2>A public institution with a commercial mandate.</h2><p>Established in July 1967 and owned by the Ministry of Commerce, TCP carries out strategic trade operations in the national interest.</p><External href="https://tcp.gov.pk/page-about-tcp">Discover our legacy <ArrowUpRight/></External></div></section><section className="light-section reports-wrap"><SectionHead eyebrow="Accountability" title="Reports and public records."/><ReportsCarousel/></section><section className="news-section"><SectionHead eyebrow="From TCP" title="News and updates."/><div className="news-list">{news.map(n=><External href={n.href} key={n.title}><span>{n.date}<b>{n.category}</b></span><h3>{n.title}</h3><ArrowUpRight/></External>)}</div></section><CareerCallout/><Footer/></main>;
}

function Gateway() {
  const [audience,setAudience]=useState("Supplier");
  return <main className="concept-page gateway-page"><Header active="gateway"/><section className="gateway-hero"><div className="gateway-photo"/><div className="gateway-copy"><p>Pakistan’s strategic trade partner</p><h1>Trade with confidence.</h1><p>Discover opportunities, access procurement information and connect with the Trading Corporation of Pakistan.</p><div className="gateway-search"><span>I want to</span><div><Search/><input aria-label="Search TCP services" placeholder="Search tenders, reports and services"/><button>Search</button></div></div></div></section><section className="audience"><div className="section-head"><div><p>Personalized pathways</p><h2>What brings you to TCP?</h2></div><select value={audience} onChange={e=>setAudience(e.target.value)} aria-label="Select your role"><option>Supplier</option><option>Buyer</option><option>Citizen</option></select></div><div className="audience-grid">{services.map((s,i)=><External href={s.href} key={s.title}><span>0{i+1}</span><h3>{s.title}</h3><p>{audience === "Citizen" && i===2 ? "Access published reports and public accountability records." : s.description}</p><ArrowUpRight/></External>)}</div></section><section className="gateway-services"><SectionHead eyebrow="Essential services" title="Start in the right place."/><div>{activities.map((a,i)=><External href={a.href} key={a.title}><span>{[<Globe2 key="g"/>,<TrendingUp key="t"/>,<Building2 key="b"/>,<CircleDollarSign key="c"/>][i]}</span><h3>{a.title}</h3><p>{a.description}</p><ChevronRight/></External>)}</div></section><section className="gateway-tenders"><SectionHead eyebrow="Open procurement" title="Find a tender opportunity." action={{label:"View all",href:"https://tcp.gov.pk/page-tenders"}}/><TenderExplorer compact/></section><section className="gateway-about"><div><p>About the corporation</p><h2>Serving Pakistan’s trade needs since 1967.</h2><External href="https://tcp.gov.pk/page-about-tcp">Meet TCP <ArrowUpRight/></External></div><div className="stat-card"><strong>1967</strong><span>Year established</span></div><div className="stat-card"><strong>4</strong><span>Core trade activities</span></div></section><section className="gateway-updates"><SectionHead eyebrow="Stay informed" title="Notices and reports."/><div className="notice-grid">{notices.map(n=><External href={n.href} key={n.title}><span>{n.type}</span><h3>{n.title}</h3><p>{n.date}</p><ArrowUpRight/></External>)}</div><ReportsCarousel/></section><CareerCallout/><Footer/></main>;
}

function Trade() {
  return <main className="concept-page trade-page"><Header active="trade"/><section className="trade-hero"><div className="trade-hero-copy"><p>Trading Corporation of Pakistan</p><h1>Bridging markets. Supporting the nation.</h1><p>Official access to procurement, trade operations, public reports and corporate information.</p><div><External href="https://tcp.gov.pk/page-tenders" className="primary-btn">Find tenders <ArrowRight/></External><External href="https://tcp.gov.pk/page-about-tcp" className="text-btn">About TCP</External></div></div><div className="trade-hero-art"><img src="/images/hero-port-modern.png" alt="Port operations supporting international trade"/><div><span>Official portal</span><strong>Trusted trade information</strong></div></div></section><section className="trade-shortcuts">{tenders.slice(0,3).map(t=><External href={t.href} key={t.title}><img src={t.image} alt=""/><span>{t.title}</span><ChevronRight/></External>)}<External href="https://tcp.gov.pk/page-tenders"><BriefcaseBusiness/><span>All tenders</span><ChevronRight/></External></section><section className="trade-core"><div><p className="eyebrow">Core services</p><h2>How TCP supports trade</h2><p>Transparent commercial operations carried out in the national interest.</p></div><div>{activities.map((a,i)=><External href={a.href} key={a.title}><span>0{i+1}</span><h3>{a.title}</h3><p>{a.description}</p><ArrowUpRight/></External>)}</div></section><section className="trade-dashboard"><SectionHead eyebrow="Procurement desk" title="Tenders and opportunities."/><TenderExplorer/><div className="trade-stats"><div><strong>1967</strong><span>Established</span></div><div><strong>100%</strong><span>Government owned</span></div><div><strong>4</strong><span>Core activities</span></div><div><strong>Nationwide</strong><span>Public mandate</span></div></div></section><section className="trade-info"><Tabs defaultValue="notices"><TabsList><TabsTrigger value="notices">Latest notices</TabsTrigger><TabsTrigger value="reports">Financial reports</TabsTrigger></TabsList><TabsContent value="notices"><div className="info-list">{notices.map(n=><External href={n.href} key={n.title}><span>{n.date}</span><b>{n.title}</b><em>{n.type}</em><ArrowUpRight/></External>)}</div></TabsContent><TabsContent value="reports"><div className="info-list">{reports.map(r=><External href={r.href} key={r.title}><span>Archive</span><b>{r.title}</b><em>PDF records</em><Download/></External>)}</div></TabsContent></Tabs><aside><img src="/images/tcp-building.jpg" alt="TCP office building"/><h3>Need assistance?</h3><p>Our teams can guide you to the right public information and trade resource.</p><External href="https://tcp.gov.pk/page-contactus">Contact TCP <ArrowUpRight/></External></aside></section><CareerCallout/><Footer/></main>;
}

function Civic() {
  return <main className="concept-page civic-page"><Header active="civic"/><section className="civic-hero"><div className="civic-copy"><p>Welcome to TCP</p><h1>Pakistan’s public trade platform.</h1><p>The unified place to access tenders, understand trade operations and find official corporate information.</p><External href="https://tcp.gov.pk/page-tenders">Browse public services <ArrowRight/></External><div className="hero-dots"><span/><span/><span/></div></div><div className="civic-orbit"><div className="orbit-main"><Landmark/><span>Trade<br/>for Pakistan</span></div><span className="orbit o1"><Wheat/></span><span className="orbit o2"><Ship/></span><span className="orbit o3"><FileText/></span></div></section><section className="civic-services"><SectionHead eyebrow="Information and services" title="How can we help?" action={{label:"View all services",href:"https://tcp.gov.pk/"}}/><div>{services.map((s,i)=><External href={s.href} key={s.title}><span>{[<Search key="s"/>,<Sprout key="p"/>,<FileText key="f"/>,<Mail key="m"/>][i]}</span><h3>{s.title}</h3><p>{s.description}</p><ChevronRight/></External>)}</div></section><section className="civic-most"><div><p>Most used</p><h2>Popular public links</h2></div><div>{[...nav.slice(1,5),{label:"Rice inspection",href:"https://tcp.gov.pk/page-rice-login"},{label:"Job opportunities",href:"https://tcp.gov.pk/page-job-opportunities"}].map(n=><External href={n.href} key={n.label}>{n.label}<ArrowUpRight/></External>)}</div></section><section className="civic-updates"><SectionHead eyebrow="Stay in touch" title="Latest from TCP."/><Tabs defaultValue="news"><TabsList><TabsTrigger value="news">News</TabsTrigger><TabsTrigger value="notices">Notices</TabsTrigger><TabsTrigger value="reports">Reports</TabsTrigger></TabsList><TabsContent value="news"><div className="civic-cards">{news.map(n=><External href={n.href} key={n.title}><span>{n.date}</span><h3>{n.title}</h3><p>{n.category}</p><ArrowUpRight/></External>)}</div></TabsContent><TabsContent value="notices"><div className="civic-cards">{notices.map(n=><External href={n.href} key={n.title}><span>{n.date}</span><h3>{n.title}</h3><p>{n.type}</p><ArrowUpRight/></External>)}</div></TabsContent><TabsContent value="reports"><div className="civic-cards">{reports.map(r=><External href={r.href} key={r.title}><span>Public record</span><h3>{r.title}</h3><p>{r.description}</p><Download/></External>)}</div></TabsContent></Tabs></section><section className="civic-roadmap"><div><p>Our legacy</p><h2>Supporting Pakistan’s economic priorities.</h2></div><ol><li><b>1967</b><span>TCP established as a government-owned corporation.</span></li><li><b>Today</b><span>Strategic import, export and domestic trade operations.</span></li><li><b>Tomorrow</b><span>More accessible, transparent digital public services.</span></li></ol></section><section className="civic-contact"><div><h2>Visit or contact TCP</h2><p>4th & 5th Floor, Block B, FTC Building, Shahra-e-Faisal, Karachi.</p></div><External href="https://tcp.gov.pk/page-contactus">Contact information <ArrowUpRight/></External></section><Footer/></main>;
}

export default function ConceptClient({ slug }: { slug: string }) {
  if (!validConcepts.includes(slug as Concept)) return <main className="not-found"><h1>Concept not found</h1><a href="/">Return to the concept gallery</a></main>;
  if (slug === "industrial") return <Industrial />;
  if (slug === "gateway") return <Gateway />;
  if (slug === "trade") return <Trade />;
  return <Civic />;
}