src/app/components/NewChatOnboarding.tsx

import { useState } from "react";
import { BrainCircuit, BarChart2, ArrowRight, Mic, FileText, Loader2, ChevronRight } from "lucide-react";

interface NewChatOnboardingProps {
  onStart: () => Promise<void>;
}

export default function NewChatOnboarding({ onStart }: NewChatOnboardingProps) {
  const [isStarting, setIsStarting] = useState(false);

  const handleStart = async () => {
    setIsStarting(true);
    try {
      await onStart();
    } finally {
      setIsStarting(false);
    }
  };

  return (
    <div className="flex-1 flex flex-col items-center justify-center px-6 py-10 overflow-y-auto">
      <div className="w-full max-w-2xl flex flex-col items-center gap-8">

        {/* Header */}
        <div className="text-center">
          <p className="text-xs font-semibold uppercase tracking-widest text-emerald-600 mb-2">
            AI Data Agent
          </p>
          <h2 className="text-2xl font-semibold text-slate-800 mb-2">
            Selamat datang di Data Eyond
          </h2>
          <p className="text-sm text-slate-500 max-w-md">
            Ikuti alur dua fase berikut untuk mendapatkan hasil analisis data yang akurat dan terstruktur
          </p>
        </div>

        {/* Flow cards */}
        <div className="w-full flex flex-col sm:flex-row items-stretch gap-3">

          {/* Card 1 — Interview */}
          <div className="flex-1 bg-white border border-emerald-100 rounded-2xl p-5 shadow-sm flex flex-col gap-3 relative">
            {/* Step badge */}
            <span className="absolute -top-2.5 left-4 bg-emerald-600 text-white text-[10px] font-semibold px-2.5 py-0.5 rounded-full">
              Fase 1
            </span>
            <div className="flex items-center gap-2.5 mt-1">
              <div className="w-9 h-9 rounded-xl bg-emerald-50 flex items-center justify-center flex-shrink-0">
                <BrainCircuit className="w-5 h-5 text-emerald-600" />
              </div>
              <div>
                <h3 className="text-sm font-semibold text-slate-800">Interview</h3>
                <p className="text-xs text-emerald-600">Business Understanding</p>
              </div>
            </div>
            <p className="text-xs text-slate-500 leading-relaxed">
              AI agent akan menggali pemahaman tentang konteks bisnis, problem statement, dan success metrics sebelum memulai analisis.
            </p>
            <ul className="space-y-1.5">
              {[
                { icon: <BrainCircuit className="w-3 h-3" />, text: "Framework CRISP-DM" },
                { icon: <FileText className="w-3 h-3" />, text: "Mode teks" },
                { icon: <Mic className="w-3 h-3" />, text: "Mode audio (voice)" },
              ].map((item, i) => (
                <li key={i} className="flex items-center gap-2 text-xs text-slate-500">
                  <span className="text-emerald-500">{item.icon}</span>
                  {item.text}
                </li>
              ))}
            </ul>
          </div>

          {/* Arrow */}
          <div className="flex items-center justify-center flex-shrink-0 text-slate-300 rotate-90 sm:rotate-0">
            <ArrowRight className="w-5 h-5" />
          </div>

          {/* Card 2 — Analytics */}
          <div className="flex-1 bg-white border border-blue-100 rounded-2xl p-5 shadow-sm flex flex-col gap-3 relative">
            <span className="absolute -top-2.5 left-4 bg-blue-600 text-white text-[10px] font-semibold px-2.5 py-0.5 rounded-full">
              Fase 2
            </span>
            <div className="flex items-center gap-2.5 mt-1">
              <div className="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center flex-shrink-0">
                <BarChart2 className="w-5 h-5 text-blue-600" />
              </div>
              <div>
                <h3 className="text-sm font-semibold text-slate-800">Analytics</h3>
                <p className="text-xs text-blue-600">Deep Research & Report</p>
              </div>
            </div>
            <p className="text-xs text-slate-500 leading-relaxed">
              Tanya jawab interaktif dengan AI agent. Secara paralel, agent menyusun draft report analisis yang dapat diekspor sebagai PDF.
            </p>
            <ul className="space-y-1.5">
              {[
                { text: "Tanya jawab berbasis konteks interview" },
                { text: "Agent menyusun report secara paralel" },
                { text: "Export report sebagai PDF" },
              ].map((item, i) => (
                <li key={i} className="flex items-center gap-2 text-xs text-slate-500">
                  <span className="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0" />
                  {item.text}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* CTA */}
        <div className="flex flex-col items-center gap-2">
          <button
            onClick={handleStart}
            disabled={isStarting}
            className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-400 text-white px-6 py-3 rounded-xl font-medium text-sm transition-all duration-200 hover:scale-105 disabled:scale-100 shadow-md shadow-emerald-200"
          >
            {isStarting ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                Memulai sesi…
              </>
            ) : (
              <>
                Mulai Sesi Baru
                <ChevronRight className="w-4 h-4" />
              </>
            )}
          </button>
          <p className="text-[11px] text-slate-400">
            Anda bisa melewati fase interview kapan saja lewat toggle di atas
          </p>
        </div>

      </div>
    </div>
  );
}