"use client";

import { useEffect, useState } from "react";
import {
  ArrowLeft, ArrowRight, BarChart3, Bot, Building2, CheckCircle2, ClipboardCheck,
  Copy, Database, ExternalLink, Headphones, Link2, MessageCircle, Send,
  ShieldCheck, Sparkles, UserRound, Users, WandSparkles, Workflow,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { MarketingFooter, MarketingHeader } from "@/components/marketing-shell";
import { publicMetrics, storyTypeLabels, type SuccessStory } from "@/lib/success-stories";
import type { Language, Localized } from "@/lib/industries";
import { StoryVisual, track } from "./success-stories-page";
import "../platform/platform.css";
import "./success-stories.css";

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

export default function StoryDetail({ story, lang }: { story: SuccessStory; lang: Language }) {
  const isAr = lang === "ar";
  const Arrow = isAr ? ArrowLeft : ArrowRight;
  const [copied, setCopied] = useState(false);
  const metrics = publicMetrics(story);
  const prefix = isAr ? "" : "/en";
  const navLinks = [["challenge", isAr ? "التحدي" : "Challenge"], ["solution", isAr ? "الحل" : "Solution"], ["story-workflow", "Workflow"], ["implementation", isAr ? "التطبيق" : "Implementation"], ["results", isAr ? "النتائج" : "Outcomes"]] as const;

  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = isAr ? "rtl" : "ltr";
    track("Story Viewed", { story: story.slug });
  }, [isAr, lang, story.slug]);

  async function share() {
    const shareData = { title: txt(story.title, lang), text: txt(story.seo.description, lang), url: window.location.href };
    if (navigator.share) await navigator.share(shareData).catch(() => undefined);
    else { await navigator.clipboard.writeText(window.location.href); setCopied(true); }
  }
  async function copyLink() { await navigator.clipboard.writeText(window.location.href); setCopied(true); window.setTimeout(() => setCopied(false), 1800); }
  function shareWhatsApp() { window.open(`https://wa.me/?text=${encodeURIComponent(`${txt(story.title, lang)} ${window.location.href}`)}`, "_blank", "noopener,noreferrer"); }

  return <main className="platform-page success-stories-page story-detail" id="top" dir={isAr ? "rtl" : "ltr"} lang={lang}>
    <MarketingHeader isAr={isAr} navLinks={navLinks} languageHref={`${isAr ? "/en" : ""}/success-stories/${story.slug}`} menuId="story-detail-mobile-menu" />
    <section className="sd-hero"><div className="pf-container"><nav className="sd-breadcrumb" aria-label={isAr ? "مسار الصفحة" : "Breadcrumb"}><a href={`${prefix}/success-stories`}>{isAr ? "قصص النجاح" : "Success stories"}</a><Arrow /><a href={`${prefix}/industries/${story.industry.slug}`}>{txt(story.industry.name, lang)}</a><Arrow /><span>{txt(story.title, lang)}</span></nav><div className="sd-hero-grid"><div><Badge>{txt(storyTypeLabels[story.type], lang)}</Badge><h1>{txt(story.title, lang)}</h1><p>{txt(story.challenge, lang)}</p><div className="sd-meta"><span><Building2Icon />{txt(story.industry.name, lang)}</span><span><ShieldCheck />{story.verifiedCustomerStory ? (isAr ? "قصة عميل موثقة" : "Verified customer story") : (isAr ? "لا يمثل عميلًا حقيقيًا" : "Does not represent a real customer")}</span></div><div className="pf-actions"><a className="pf-button primary large" href="#challenge">{isAr ? "ابدأ من التحدي" : "Start with the challenge"}<Arrow /></a><button className="pf-button secondary large" type="button" onClick={share}><Send />{isAr ? "مشاركة" : "Share"}</button></div></div><StoryVisual story={story} lang={lang} large /></div></div></section>

    <section id="challenge" className="pf-section sd-challenge"><div className="pf-container sd-two"><div><span className="sd-label"><MessageCircle />{isAr ? "التحدي" : "Challenge"}</span><h2>{isAr ? "ما المشكلة التي يعالجها هذا النموذج؟" : "What problem does this scenario address?"}</h2><p>{txt(story.challenge, lang)}</p></div><div className="sd-before"><small>{isAr ? "قبل NEXORA" : "Before NEXORA"}</small>{story.before.map((item) => <span key={item.ar}><Arrow />{txt(item, lang)}</span>)}</div></div></section>

    <section id="solution" className="pf-section sd-solution"><div className="pf-container"><div className="ss-heading"><span><WandSparkles />{isAr ? "الحل" : "Solution"}</span><h2>{isAr ? "كيف تدخل NEXORA في العملية؟" : "How does NEXORA fit into the operation?"}</h2><p>{txt(story.solution, lang)}</p></div><div className="sd-agent-grid">{story.agents.map((agent) => <a href={`${prefix}/platform#agents`} onClick={() => track("Related Solution Clicked", { agent: agent.id })} key={agent.id}><span><Bot /></span><h3>{txt(agent.name, lang)}</h3><p>{txt(agent.role, lang)}</p><em>{isAr ? "تفاصيل AI Agents" : "AI Agent details"}<Arrow /></em></a>)}</div><div className="sd-stack"><strong>{isAr ? "المكونات المستخدمة في النموذج" : "Functional stack used in this scenario"}</strong><div><span><Sparkles />NEXORA AI</span>{story.channels.map((item) => <span key={item}><MessageCircle />{item}</span>)}{story.integrations.map((item) => <span key={item.name.ar}><Database />{txt(item.name, lang)}<small>{item.status === "conditional" ? (isAr ? "عند توفر التكامل" : "When integrated") : (isAr ? "مستخدم في النموذج" : "Used in scenario")}</small></span>)}</div></div></div></section>

    <section id="story-workflow" className="pf-section sd-workflow"><div className="pf-container"><div className="ss-heading"><span><Workflow />Workflow</span><h2>{isAr ? "كيف تنتقل العملية خطوة بخطوة؟" : "How does the process move step by step?"}</h2></div><div className="sd-flow">{story.workflow.map((step, index) => <div key={step.ar} style={{ "--step": index } as React.CSSProperties}><i>{index + 1}</i><b>{txt(step, lang)}</b>{index < story.workflow.length - 1 && <Arrow />}</div>)}</div><div className="sd-handoff"><Bot /><Arrow /><div><strong>Human Handoff</strong><p>{isAr ? "عند الحاجة إلى قرار أو تفاوض أو استثناء، يستلم الموظف ملف العميل وملخص المحادثة والنية والإجراءات السابقة والخطوة التالية المقترحة." : "When a decision, negotiation, or exception is needed, staff receive the customer profile, conversation summary, intent, previous actions, and suggested next step."}</p></div><Headphones /></div></div></section>

    <section id="implementation" className="pf-section sd-implementation"><div className="pf-container"><div className="ss-heading"><span><ClipboardCheck />{isAr ? "طريقة التطبيق" : "Implementation"}</span><h2>{isAr ? "رحلة إعداد النموذج" : "Scenario implementation journey"}</h2><p>{isAr ? "خطوات مقترحة للتوضيح وليست سجل تنفيذ عميل حقيقي." : "Illustrative steps, not a record of a real customer implementation."}</p></div><div className="sd-timeline">{story.implementation.map((item, index) => <article key={item.step.ar}><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="results" className="pf-section sd-results"><div className="pf-container"><div className="ss-heading"><span><BarChart3 />{isAr ? "النتائج" : "Outcomes"}</span><h2>{metrics.length ? (isAr ? "نتائج موثقة ومسموح بعرضها" : "Verified, public results") : (isAr ? "نتائج وصفية لهذا النموذج" : "Qualitative outcomes for this scenario")}</h2><p>{metrics.length ? (isAr ? "كل مقياس ظاهر هنا موثق ومعتمد للنشر." : "Every metric shown here is verified and approved for publication.") : (isAr ? "لا نعرض أرقامًا لأن هذا نموذج توضيحي وليس تطبيق عميل موثقًا." : "No figures are shown because this is an illustrative scenario, not a verified customer deployment.")}</p></div>{metrics.length ? <div className="sd-metrics">{metrics.map((metric) => <article key={metric.name.ar}><small>{txt(metric.name, lang)}</small><strong>{metric.afterValue} {metric.unit ? txt(metric.unit, lang) : ""}</strong><span>{metric.period ? txt(metric.period, lang) : ""}</span></article>)}</div> : <div className="sd-outcomes">{story.results.map((item) => <article key={item.ar}><CheckCircle2 /><span>{txt(item, lang)}</span></article>)}</div>}{story.quote?.approved && story.verifiedCustomerStory && <blockquote><p>{txt(story.quote.text, lang)}</p><cite>{story.quote.person} — {txt(story.quote.position, lang)}</cite></blockquote>}</div></section>

    <section className="pf-section sd-related"><div className="pf-container"><div className="ss-heading"><span><Link2 />{isAr ? "اكتشف المزيد" : "Explore more"}</span><h2>{isAr ? "أكمل رحلتك من النموذج إلى الإعداد" : "Continue from scenario to setup"}</h2></div><div className="sd-related-grid"><a href={`${prefix}/industries/${story.industry.slug}`}><Building2Icon /><span><small>{isAr ? "القطاع" : "Industry"}</small><strong>{txt(story.industry.name, lang)}</strong></span><Arrow /></a>{story.solutions.slice(0, 2).map((item) => <a href={`${prefix}/solutions#${item.id}`} onClick={() => track("Related Solution Clicked", { solution: item.id })} key={item.id}><Workflow /><span><small>{isAr ? "الحل" : "Solution"}</small><strong>{txt(item.name, lang)}</strong></span><Arrow /></a>)}<a href="/#pricing"><BarChart3 /><span><small>{isAr ? "الخطوة التالية" : "Next step"}</small><strong>{isAr ? "استكشف الأسعار" : "Explore pricing"}</strong></span><Arrow /></a><a href="/create-agent" onClick={() => track("Create Agent Clicked", { source: story.slug })}><Bot /><span><small>{isAr ? "ابدأ" : "Start"}</small><strong>{isAr ? "أنشئ وكيلك" : "Create your agent"}</strong></span><Arrow /></a></div><div className="sd-share"><span>{isAr ? "شارك النموذج بإجراء صريح" : "Share this scenario explicitly"}</span><button type="button" onClick={copyLink}>{copied ? <CheckCircle2 /> : <Copy />}{copied ? (isAr ? "تم نسخ الرابط" : "Link copied") : (isAr ? "نسخ الرابط" : "Copy link")}</button><button type="button" onClick={shareWhatsApp}><ExternalLink />WhatsApp</button></div></div></section>

    <section className="pf-final"><div className="pf-container"><span><Sparkles /></span><h2>{isAr ? "طبّق الفكرة على واقع شركتك" : "Apply the idea to your business"}</h2><p>{isAr ? "خصص الوكيل والمعرفة والصلاحيات والقنوات، واختبر المسار قبل التشغيل." : "Tailor the agent, knowledge, permissions, and channels, then test the flow before launch."}</p><div className="pf-actions"><a className="pf-button primary large" href="/create-agent" onClick={() => track("Create Agent Clicked", { source: `${story.slug}-final` })}>{isAr ? "أنشئ وكيلك" : "Create your agent"}</a><a className="pf-button secondary large" href="/contact?intent=sales">{isAr ? "تحدث مع فريقنا" : "Talk to our team"}</a></div></div></section>
    <MarketingFooter isAr={isAr} navLinks={navLinks} />
  </main>;
}

function Building2Icon() { return <Building2 />; }