"use client";

import { useState } from "react";
import { ArrowUpRight, BarChart3, Check, Clock3, Play, Sparkles } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { FadeIn } from "@/components/fade-in";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/lib/i18n/context";

const COPY = {
  en: {
    eyebrow: "Creator studio",
    choose: "Choose a workflow",
    product: "Collapsible LED Desk Lamp",
    category: "Home Office · Signal brief",
    score: "Opportunity score",
    angle: "Content angle",
    hook: "Hook",
    proof: "Proof to show",
    cta: "CTA",
    grounded: "Built from your product signals",
    duration: "30 sec format",
    dataBacked: "Data-backed angle",
    ready: "Ready to record",
    signal: "91 score · +64% weekly growth · low competition",
  },
  es: {
    eyebrow: "Estudio de creadores",
    choose: "Elige un flujo",
    product: "Lámpara LED plegable de escritorio",
    category: "Home Office · Resumen de señales",
    score: "Puntaje de oportunidad",
    angle: "Ángulo de contenido",
    hook: "Gancho",
    proof: "Prueba que debes mostrar",
    cta: "CTA",
    grounded: "Creado con las señales de tu producto",
    duration: "Formato de 30 s",
    dataBacked: "Ángulo basado en datos",
    ready: "Listo para grabar",
    signal: "Puntaje 91 · +64% semanal · baja competencia",
  },
} as const;

export function AiTools() {
  const { t, locale } = useLanguage();
  const copy = COPY[locale];
  const [activeIndex, setActiveIndex] = useState(3);
  const prompts = t.aiTools.prompts;
  const active = prompts[activeIndex] ?? prompts[0];
  const response = active?.response ?? [];

  return (
    <section id="ai-tools" className="relative overflow-hidden border-t border-border bg-secondary/30 py-20 sm:py-28">
      <div aria-hidden className="pointer-events-none absolute -left-24 top-20 size-80 rounded-full bg-brand-purple/10 blur-3xl" />
      <Container className="relative flex flex-col gap-14">
        <SectionHeading eyebrow={copy.eyebrow} title={t.aiTools.title} description={t.aiTools.description} />

        <FadeIn className="grid w-full gap-8 lg:grid-cols-[0.72fr_1.28fr] lg:items-start">
          <div className="flex flex-col gap-3">
            <p className="px-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">{copy.choose}</p>
            {prompts.slice(0, 6).map((prompt, i) => (
              <button key={i} type="button" onClick={() => setActiveIndex(i)} aria-pressed={activeIndex === i} className={cn("group flex items-center gap-3 border-b border-border px-1 py-3.5 text-left transition-colors", activeIndex === i ? "text-foreground" : "text-muted-foreground hover:text-foreground")}>
                <span className={cn("flex size-7 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold", activeIndex === i ? "border-brand-cyan/60 bg-brand-cyan/10 text-brand-blue" : "border-border bg-background text-muted-foreground")}>0{i + 1}</span>
                <span className="flex-1 text-sm">{prompt.question}</span>
                <ArrowUpRight className={cn("size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5", activeIndex === i ? "text-brand-blue" : "text-muted-foreground/60")} />
              </button>
            ))}
            <div className="mt-4 flex items-start gap-2 text-xs leading-5 text-muted-foreground"><Check className="mt-0.5 size-3.5 shrink-0 text-success" />{copy.grounded}</div>
          </div>

          <div className="relative overflow-hidden rounded-[26px] border border-border bg-card shadow-[0_24px_80px_rgba(15,23,42,.12)]">
            <div className="absolute right-0 top-0 h-56 w-72 bg-gradient-to-bl from-brand-cyan/15 to-transparent blur-2xl" />
            <div className="relative flex items-center justify-between border-b border-border px-5 py-4 sm:px-7"><div><p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-brand-blue">{copy.angle}</p><p className="mt-1 text-sm font-semibold text-foreground">{copy.product}</p></div><span className="inline-flex items-center gap-1.5 rounded-full border border-success/20 bg-success/10 px-2.5 py-1 text-[10px] font-medium text-success"><span className="size-1.5 rounded-full bg-success" />{copy.ready}</span></div>
            <div className="relative grid gap-6 p-5 sm:p-7 md:grid-cols-[1fr_180px]">
              <div className="space-y-6">
                <div><p className="text-xs text-muted-foreground">{copy.category}</p><h3 className="mt-2 max-w-lg text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">{active?.question ?? t.aiTools.inputPlaceholder}</h3></div>
                <div className="space-y-4">
                  <ScriptLine label={copy.hook} text={response[0] ?? "Start with the customer problem, not the product."} tone="cyan" />
                  <ScriptLine label={copy.proof} text={response[1] ?? copy.signal} tone="purple" />
                  <ScriptLine label={copy.cta} text={response[response.length - 1] ?? "Show the product, then invite the viewer to learn more."} tone="pink" />
                </div>
              </div>
              <div className="flex flex-col gap-3 md:border-l md:border-border md:pl-5"><div className="flex items-center gap-3"><div className="flex size-14 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-300/20 to-brand-cyan/20 text-3xl ring-1 ring-border">💡</div><div><p className="text-xs font-medium text-muted-foreground">{copy.score}</p><p className="text-3xl font-semibold text-foreground">91</p></div></div><div className="mt-1 h-px bg-border" /><p className="text-xs leading-5 text-muted-foreground">{copy.signal}</p><div className="mt-auto flex items-center gap-2 text-xs text-muted-foreground"><Clock3 className="size-3.5" /> {copy.duration}</div><div className="flex items-center gap-2 text-xs text-muted-foreground"><BarChart3 className="size-3.5 text-brand-blue" /> {copy.dataBacked}</div></div>
            </div>
            <div className="relative flex items-center justify-between border-t border-border px-5 py-3.5 text-xs text-muted-foreground sm:px-7"><span className="flex items-center gap-2"><Sparkles className="size-3.5 text-brand-purple" /> TokNext content brief</span><span className="inline-flex items-center gap-1.5"><Play className="size-3" /> {copy.duration}</span></div>
          </div>
        </FadeIn>
      </Container>
    </section>
  );
}

function ScriptLine({ label, text, tone }: { label: string; text: string; tone: "cyan" | "purple" | "pink" }) {
  const colors = { cyan: "text-brand-cyan", purple: "text-brand-purple", pink: "text-brand-magenta" };
  return <div className="grid grid-cols-[72px_1fr] gap-3"><span className={cn("pt-0.5 text-[10px] font-semibold uppercase tracking-[0.14em]", colors[tone])}>{label}</span><p className="m-0 text-sm leading-6 text-foreground/75">{text}</p></div>;
}