"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import {
  Video, Zap, FileText, CheckCircle2,
  ArrowRight, ExternalLink, Users, Shield,
  Mic,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { useUserStore } from "@/store";
import { LogoIcon } from "@/components/ui/logo";

const steps = [
  {
    id: 1,
    icon: Video,
    iconBg: "bg-blue-100 dark:bg-blue-950",
    iconColor: "text-blue-600 dark:text-blue-400",
    title: "Start a Google Meet",
    description: "Open Google Meet and start or join a meeting as you normally would.",
    tip: "You can use any existing Google Meet link or create a new one.",
  },
  {
    id: 2,
    icon: Mic,
    iconBg: "bg-purple-100 dark:bg-purple-950",
    iconColor: "text-purple-600 dark:text-purple-400",
    title: "Add your Meet link here",
    description: "Click \"New Recording\" on the dashboard, paste your Google Meet link and give the meeting a title.",
    tip: "Format: https://meet.google.com/xxx-xxxx-xxx",
  },
  {
    id: 3,
    icon: Users,
    iconBg: "bg-orange-100 dark:bg-orange-950",
    iconColor: "text-orange-600 dark:text-orange-400",
    title: "Admit the bot",
    description: "Our bot will join your meeting as a participant. The meeting host must admit it from the waiting lobby.",
    tip: "The bot appears as \"IIH Notetaker Bot\" in the participants list.",
  },
  {
    id: 4,
    icon: Zap,
    iconBg: "bg-green-100 dark:bg-green-950",
    iconColor: "text-green-600 dark:text-green-400",
    title: "Get your transcript & summary",
    description: "Once the meeting ends, the bot leaves automatically and your transcript and AI summary are ready.",
    tip: "Summaries include key points, decisions, and action items.",
  },
];

const features = [
  { icon: Mic,      label: "Real-time transcription",     desc: "Every word captured as it's spoken" },
  { icon: Zap,      label: "AI-powered summaries",        desc: "Key points and decisions extracted automatically" },
  { icon: FileText, label: "Action items",                desc: "Tasks assigned and tracked from your meetings" },
  { icon: Shield,   label: "Secure & private",            desc: "Your data is encrypted and never shared" },
];

export default function OnboardingPage() {
  const router = useRouter();
  const { displayName, setOnboardingDone } = useUserStore();
  const [activeStep, setActiveStep] = useState(1);

  const handleGetStarted = () => {
    setOnboardingDone();
    router.push("/dashboard");
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      {/* Top bar */}
      <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
        <div className="flex items-center gap-2.5">
          <LogoIcon size={32} />
          <span className="font-semibold text-gray-900 dark:text-gray-100">IIH Notetaker</span>
        </div>
        <button
          onClick={handleGetStarted}
          className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
        >
          Skip for now →
        </button>
      </div>

      <div className="max-w-4xl mx-auto px-4 py-10 space-y-12">

        {/* Welcome hero */}
        <div className="text-center space-y-3">
          <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 px-4 py-1.5 text-sm text-blue-700 dark:text-blue-300 font-medium mb-2">
            <CheckCircle2 className="h-4 w-4" />
            You&apos;re all set up!
          </div>
          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
            Welcome{displayName ? `, ${displayName.split(" ")[0]}` : ""}! 👋
          </h1>
          <p className="text-gray-500 dark:text-gray-400 text-lg max-w-xl mx-auto">
            Here&apos;s everything you need to know to get your first meeting transcribed in under 2 minutes.
          </p>
        </div>

        {/* How it works — interactive steps */}
        <div className="space-y-4">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">How it works</h2>
          <div className="grid gap-3">
            {steps.map((step) => {
              const Icon = step.icon;
              const isActive = activeStep === step.id;
              return (
                <button
                  key={step.id}
                  onClick={() => setActiveStep(step.id)}
                  className={`w-full text-left rounded-xl border p-4 transition-all duration-200 ${
                    isActive
                      ? "border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-950/50 shadow-sm"
                      : "border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700"
                  }`}
                >
                  <div className="flex items-start gap-4">
                    {/* Step number + icon */}
                    <div className="flex flex-col items-center gap-1 shrink-0">
                      <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${step.iconBg}`}>
                        <Icon className={`h-5 w-5 ${step.iconColor}`} />
                      </div>
                      <span className={`text-xs font-bold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-400 dark:text-gray-600"}`}>
                        0{step.id}
                      </span>
                    </div>

                    {/* Content */}
                    <div className="flex-1 min-w-0">
                      <p className={`font-semibold ${isActive ? "text-blue-700 dark:text-blue-300" : "text-gray-900 dark:text-gray-100"}`}>
                        {step.title}
                      </p>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{step.description}</p>
                      {isActive && (
                        <div className="mt-2 flex items-start gap-1.5 rounded-lg bg-blue-100 dark:bg-blue-900/40 px-3 py-2">
                          <span className="text-blue-500 dark:text-blue-400 text-xs mt-0.5">💡</span>
                          <p className="text-xs text-blue-700 dark:text-blue-300">{step.tip}</p>
                        </div>
                      )}
                    </div>

                    {/* Active indicator */}
                    <div className={`shrink-0 h-2 w-2 rounded-full mt-2 ${isActive ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-700"}`} />
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Features grid */}
        <div className="space-y-4">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">What you get with every meeting</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {features.map(({ icon: Icon, label, desc }) => (
              <div
                key={label}
                className="flex items-start gap-3 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4"
              >
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800">
                  <Icon className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                </div>
                <div>
                  <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{label}</p>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Important note about bot admission */}
        <div className="rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/40 p-5">
          <div className="flex items-start gap-3">
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/50">
              <Users className="h-4 w-4 text-amber-600 dark:text-amber-400" />
            </div>
            <div>
              <p className="font-semibold text-amber-800 dark:text-amber-300 text-sm">Important: Bot admission</p>
              <p className="text-sm text-amber-700 dark:text-amber-400 mt-1 leading-relaxed">
                The IIH Notetaker bot joins as a meeting participant. The <strong>meeting host must admit it</strong> from the waiting lobby.
                If the host denies entry, the recording won&apos;t start. Make sure you or the host is ready to admit the bot when it joins.
              </p>
            </div>
          </div>
        </div>

        {/* CTA */}
        <div className="flex flex-col sm:flex-row items-center gap-3 pt-2 pb-8">
          <Button size="lg" className="w-full sm:w-auto gap-2 px-8" onClick={handleGetStarted}>
            Start your first recording
            <ArrowRight className="h-4 w-4" />
          </Button>
          <a
            href="https://meet.google.com"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
          >
            <ExternalLink className="h-4 w-4" />
            Open Google Meet
          </a>
        </div>
      </div>
    </div>
  );
}