"use client";

import { useEffect, useMemo, useState } from "react";
import {
  ArrowLeft, ArrowRight, BarChart3, Bot, BriefcaseBusiness, Building2,
  CheckCircle2, ChevronDown, CircleGauge, Database, Filter, Headphones,
  Inbox, MessageCircle, Search, ShieldCheck, Sparkles, UserRound, Users,
  WandSparkles, Workflow,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { MarketingFooter, MarketingHeader } from "@/components/marketing-shell";
import { publicStories, storyTypeLabels, type SuccessStory } from "@/lib/success-stories";
import type { Language, Localized } from "@/lib/industries";
import "../platform/platform.css";
import "./success-stories.css";

const txt = (value: Localized, lang: Language) => value[lang];
const stories = publicStories();

function track(name: string, detail: Record<string, string>) {
  window.dispatchEvent(new CustomEvent("nexora:analytics", { detail: { name, ...detail } }));
}

function Heading({ eyebrow, title, text }: { eyebrow: string; title: string; text?: string }) {
  return <div className="ss-heading"><span><Sparkles />{eyebrow}</span><h2>{title}</h2>{text && <p>{text}</p>}</div>;
}

function StoryVisual({ story, lang, large = false }: { story: SuccessStory; lang: Language; large?: boolean }) {
  return <div className={`ss-cover ${story.coverTone} ${large ? "large" : ""}`} aria-label={lang === "ar" ? "رسم توضيحي لمسار الاستخدام" : "Illustrative solution flow"}>
    <span className="ss-cover-label"><ShieldCheck />{txt(storyTypeLabels[story.type], lang)}</span>
    <div className="ss-cover-flow">{story.workflow.slice(0, large ? 5 : 3).map((step, index) => <div key={step.ar} style={{ "--step": index } as React.CSSProperties}><i>{index + 1}</i><b>{txt(step, lang)}</b>{index < Math.min(story.workflow.length, large ? 5 : 3) - 1 && <ChevronDown />}</div>)}</div>
    <span className="ss-cover-brand"><Sparkles />NEXORA AI</span>
  </div>;
}

export default function SuccessStoriesPage({ lang }: { lang: Language }) {
  const isAr = lang === "ar";
  const Arrow = isAr ? ArrowLeft : ArrowRight;
  const [query, setQuery] = useState("");
  const [industry, setIndustry] = useState("all");
  const [solution, setSolution] = useState("all");
  const [channel, setChannel] = useState("all");

  useEffect(() => { document.documentElement.lang = lang; document.documentElement.dir = isAr ? "rtl" : "ltr"; }, [isAr, lang]);
  const industries = useMemo(() => Array.from(new Map(stories.map((story) => [story.industry.slug, story.industry])).values()), []);
  const solutions = useMemo(() => Array.from(new Map(stories.flatMap((story) => story.solutions).map((item) => [item.id, item])).values()), []);
  const channels = useMemo(() => Array.from(new Set(stories.flatMap((story) => story.channels))), []);
  const filtered = useMemo(() => {
    const needle = query.trim().toLocaleLowerCase();
    return stories.filter((story) => {
      const searchable = [txt(story.title, lang), txt(story.industry.name, lang), txt(story.challenge, lang), txt(story.solution, lang), ...story.agents.map((agent) => txt(agent.name, lang)), ...story.solutions.map((item) => txt(item.name, lang))].join(" ").toLocaleLowerCase();
      return (!needle || searchable.includes(needle)) && (industry === "all" || story.industry.slug === industry) && (solution === "all" || story.solutions.some((item) => item.id === solution)) && (channel === "all" || story.channels.includes(channel));
    });
  }, [channel, industry, lang, query, solution]);
  const featured = stories.find((story) => story.featured) ?? stories[0];
  const navLinks = [["featured-story", isAr ? "النموذج الرئيسي" : "Featured"], ["stories-library", isAr ? "نماذج الاستخدام" : "Scenarios"], ["story-journey", isAr ? "طريقة التطبيق" : "Implementation"], ["human-ai-story", "Human + AI"]] as const;
  const detailPrefix = isAr ? "/success-stories" : "/en/success-stories";

  return <main className="platform-page success-stories-page" id="top" dir={isAr ? "rtl" : "ltr"} lang={lang}>
    <MarketingHeader isAr={isAr} navLinks={navLinks} languageHref={isAr ? "/en/success-stories" : "/success-stories"} menuId="success-stories-mobile-menu" />
    <section className="ss-hero"><div className="pf-container ss-hero-grid"><div className="ss-hero-copy"><span className="pf-kicker"><CircleGauge />{isAr ? "تطبيق عملي بلا ادعاءات" : "Practical application without unsupported claims"}</span><h1>{isAr ? "من المحادثة إلى نتيجة قابلة للقياس" : "From conversation to a measurable outcome"}</h1><p>{isAr ? "اكتشف كيف يمكن لوكلاء NEXORA AI مساعدة فرق المبيعات وخدمة العملاء والعمليات على التعامل مع العملاء وتنفيذ المهام والمتابعة من منصة واحدة." : "See how NEXORA AI agents can help sales, customer service, and operations teams manage customers, complete tasks, and follow up from one platform."}</p><div className="pf-actions"><a className="pf-button primary large" href="#stories-library">{isAr ? "استكشف قصص النجاح" : "Explore success stories"}<Arrow /></a><a className="pf-button secondary large" href="#featured-story">{isAr ? "شاهد نماذج الاستخدام" : "See solution scenarios"}</a></div><div className="ss-transparency"><ShieldCheck /><span><strong>{isAr ? "شفافية المحتوى" : "Content transparency"}</strong><small>{isAr ? "لا توجد حاليًا قصص عملاء موثقة منشورة؛ جميع العناصر أدناه نماذج توضيحية معلّمة بوضوح." : "There are currently no published verified customer stories; every item below is clearly labelled as an illustrative scenario."}</small></span></div></div><div className="ss-hero-map"><div><MessageCircle /><span>{isAr ? "المشكلة" : "Challenge"}</span></div><div><Bot /><span>{isAr ? "الوكيل" : "Agent"}</span></div><div><Workflow /><span>Workflow</span></div><div><Users /><span>{isAr ? "الفريق" : "Team"}</span></div><div><BarChart3 /><span>{isAr ? "النتيجة" : "Outcome"}</span></div><i /></div></div></section>

    <section id="featured-story" className="pf-section ss-featured"><div className="pf-container"><Heading eyebrow={isAr ? "النموذج الرئيسي" : "Featured scenario"} title={isAr ? "شاهد الرحلة كاملة من المشكلة إلى النتيجة" : "See the full journey from challenge to outcome"} /><article className="ss-featured-card"><StoryVisual story={featured} lang={lang} large /><div className="ss-featured-copy"><Badge>{txt(storyTypeLabels[featured.type], lang)}</Badge><small>{txt(featured.industry.name, lang)}</small><h2>{txt(featured.title, lang)}</h2><p>{txt(featured.challenge, lang)}</p><div className="ss-agent-chips">{featured.agents.map((agent) => <span key={agent.id}><Bot />{txt(agent.name, lang)}</span>)}</div><a className="pf-button primary" href={`${detailPrefix}/${featured.slug}`} onClick={() => track("Story Viewed", { story: featured.slug })}>{isAr ? "استكشف النموذج الكامل" : "Explore the full scenario"}<Arrow /></a></div></article></div></section>

    <section id="stories-library" className="pf-section ss-library"><div className="pf-container"><Heading eyebrow={isAr ? "مكتبة التطبيق" : "Application library"} title={isAr ? "شاهد كيف يمكن تطبيق NEXORA في قطاعات مختلفة" : "See how NEXORA can be applied across industries"} text={isAr ? "لا تظهر هنا إلا المواد المنشورة، ويظهر نوع كل محتوى مباشرة على البطاقة." : "Only published content appears here, and every card identifies its content type."} />
      <div className="ss-filters"><label className="ss-search"><Search /><span className="sr-only">{isAr ? "البحث" : "Search"}</span><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={isAr ? "ابحث بالقطاع أو الحل أو الوكيل…" : "Search by industry, solution, or agent…"} /></label><div className="ss-filter-row"><label><Filter />{isAr ? "القطاع" : "Industry"}<select value={industry} onChange={(event) => { setIndustry(event.target.value); track("Industry Filter Selected", { industry: event.target.value }); }}><option value="all">{isAr ? "كل القطاعات" : "All industries"}</option>{industries.map((item) => <option value={item.slug} key={item.slug}>{txt(item.name, lang)}</option>)}</select></label><label>{isAr ? "الحل" : "Solution"}<select value={solution} onChange={(event) => { setSolution(event.target.value); track("Solution Filter Selected", { solution: event.target.value }); }}><option value="all">{isAr ? "كل الحلول" : "All solutions"}</option>{solutions.map((item) => <option value={item.id} key={item.id}>{txt(item.name, lang)}</option>)}</select></label><label>{isAr ? "القناة" : "Channel"}<select value={channel} onChange={(event) => setChannel(event.target.value)}><option value="all">{isAr ? "كل القنوات" : "All channels"}</option>{channels.map((item) => <option value={item} key={item}>{item}</option>)}</select></label></div></div>
      {filtered.length ? <div className="ss-grid">{filtered.map((story) => <article key={story.slug}><StoryVisual story={story} lang={lang} /><div className="ss-card-copy"><div><Badge variant="secondary">{txt(storyTypeLabels[story.type], lang)}</Badge><small>{txt(story.industry.name, lang)}</small></div><h3>{txt(story.title, lang)}</h3><p><strong>{isAr ? "التحدي:" : "Challenge:"}</strong> {txt(story.challenge, lang)}</p><span className="ss-result"><CheckCircle2 />{txt(story.results[0], lang)}</span><a href={`${detailPrefix}/${story.slug}`} onClick={() => track("Story Viewed", { story: story.slug })}>{isAr ? "اقرأ النموذج" : "Read the scenario"}<Arrow /></a></div></article>)}</div> : <div className="ss-empty" role="status"><Search /><h3>{isAr ? "لا توجد نتائج مطابقة" : "No matching results"}</h3><p>{isAr ? "غيّر الفلاتر أو امسح البحث لرؤية النماذج المنشورة." : "Adjust the filters or clear search to see published scenarios."}</p><button type="button" onClick={() => { setQuery(""); setIndustry("all"); setSolution("all"); setChannel("all"); }}>{isAr ? "عرض جميع النماذج" : "Show all scenarios"}</button></div>}
    </div></section>

    <section id="story-journey" className="pf-section ss-journey"><div className="pf-container"><Heading eyebrow={isAr ? "رحلة التطبيق" : "Implementation journey"} title={isAr ? "من اكتشاف التحدي إلى القياس والتحسين" : "From challenge discovery to measurement and improvement"} text={isAr ? "هذه رحلة مقترحة للنماذج التوضيحية؛ القصة الحقيقية تعرض فقط الخطوات التي حدثت فعليًا." : "This is a suggested scenario journey; real stories show only steps that actually happened."} /><div className="ss-timeline">{featured.implementation.map((item, index) => <article key={item.step.ar} style={{ "--step": index } as React.CSSProperties}><span>{String(index + 1).padStart(2, "0")}</span><div><h3>{txt(item.step, lang)}</h3><p>{txt(item.description, lang)}</p></div></article>)}</div></div></section>

    <section id="human-ai-story" className="pf-section ss-human"><div className="pf-container"><Heading eyebrow="Human + AI" title={isAr ? "الوكيل يجهز السياق، والإنسان يحتفظ بالقرار" : "The agent prepares the context; people retain the decision"} /><div className="ss-human-flow"><article><span><Bot /></span><h3>{isAr ? "AI يتعامل" : "AI handles"}</h3><p>{isAr ? "الأسئلة المتكررة، جمع البيانات، التصنيف، والبحث في المعرفة." : "Repeat questions, data capture, classification, and knowledge search."}</p></article><Arrow /><article><span><ShieldCheck /></span><h3>{isAr ? "تحتاج قرارًا" : "A decision is needed"}</h3><p>{isAr ? "تفاوض، استثناء، اعتماد، شكوى حرجة، أو ثقة غير كافية." : "Negotiation, exception, approval, critical complaint, or low confidence."}</p></article><Arrow /><article><span><Headphones /></span><h3>Human Handoff</h3><p>{isAr ? "يستلم الموظف الملف والملخص والنية والإجراءات والخطوة التالية المقترحة." : "Staff receive the profile, summary, intent, actions, and suggested next step."}</p></article></div></div></section>

    <section className="pf-final"><div className="pf-container"><span><WandSparkles /></span><h2>{isAr ? "حوّل حالة الاستخدام إلى وكيل يعمل مع فريقك" : "Turn a use case into an agent that works with your team"}</h2><p>{isAr ? "ابدأ من نموذج توضيحي، ثم خصص المعرفة والصلاحيات والتكاملات وفق واقع شركتك." : "Start from an illustrative scenario, then tailor knowledge, permissions, and integrations to your business."}</p><div className="pf-actions"><a className="pf-button primary large" href="/create-agent" onClick={() => track("Create Agent Clicked", { source: "success-stories-final" })}>{isAr ? "أنشئ وكيلك" : "Create your agent"}</a><a className="pf-button secondary large" href="/#pricing" onClick={() => track("CTA Clicked", { target: "pricing" })}>{isAr ? "استكشف الأسعار" : "Explore pricing"}</a></div></div></section>
    <MarketingFooter isAr={isAr} navLinks={navLinks} />
  </main>;
}

export { StoryVisual, track, txt };