"use client";

import { useState } from "react";
import Link from "next/link";

type Category = "booking" | "leads" | "content";

const QUESTIONS: { prompt: string; options: { label: string; value: Category }[] }[] = [
  {
    prompt: "What's slowing you down the most right now?",
    options: [
      { label: "Customers book, but too many never show up", value: "booking" },
      { label: "I get enquiries but lose track of who to follow up with", value: "leads" },
      { label: "My website or socials barely get any attention", value: "content" },
    ],
  },
  {
    prompt: "How are you handling that today?",
    options: [
      { label: "All manual — I do it myself", value: "booking" },
      { label: "I have some tools, but they don't talk to each other", value: "leads" },
      { label: "Honestly, I haven't really tackled it yet", value: "content" },
    ],
  },
  {
    prompt: "If this got fixed, what would matter most?",
    options: [
      { label: "More booked hours, less admin", value: "booking" },
      { label: "More enquiries turning into paying clients", value: "leads" },
      { label: "Being found by more of the right people online", value: "content" },
    ],
  },
];

const RESULTS: Record<Category, { title: string; body: string; division: string }> = {
  booking: {
    title: "Booking & reminder automation",
    body: "Automated confirmations, reminders, and rebooking would likely have the biggest impact on your business — this is exactly what dChimes AI built for Ace Eye Care.",
    division: "dChimes AI",
  },
  leads: {
    title: "Lead routing & follow-up automation",
    body: "The leak is likely happening between 'someone's interested' and 'someone booked.' Automated lead capture and follow-up closes that gap.",
    division: "dChimes AI",
  },
  content: {
    title: "SEO & content strategy",
    body: "Automation won't help much if people can't find you first. This points more toward dChimes Digital's content and SEO work than automation.",
    division: "dChimes Digital",
  },
};

export function AiDiagnostic() {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState<Category[]>([]);

  function choose(value: Category) {
    const next = [...answers, value];
    setAnswers(next);
    setStep(step + 1);
  }

  function reset() {
    setAnswers([]);
    setStep(0);
  }

  if (step >= QUESTIONS.length) {
    const counts: Record<Category, number> = { booking: 0, leads: 0, content: 0 };
    answers.forEach((a) => counts[a]++);
    const winner = (Object.keys(counts) as Category[]).sort((a, b) => counts[b] - counts[a])[0];
    const result = RESULTS[winner];

    return (
      <div className="rounded-card border border-navy/10 bg-gray-light p-8">
        <p className="mb-2 text-sm font-semibold text-green">{result.division} · Suggested focus</p>
        <h3 className="mb-3 font-heading text-2xl font-semibold">{result.title}</h3>
        <p className="mb-6 text-navy/65">{result.body}</p>
        <div className="flex flex-wrap gap-3">
          <Link href="/book" className="rounded-full bg-green px-6 py-3.5 text-sm font-semibold text-white">
            Talk it through on a free call
          </Link>
          <button onClick={reset} className="rounded-full border border-navy/15 px-6 py-3.5 text-sm font-semibold">
            Retake the quiz
          </button>
        </div>
        <p className="mt-5 text-xs text-navy/45">
          A quick pointer, not a diagnosis — the free call is where we look at your specifics.
        </p>
      </div>
    );
  }

  const q = QUESTIONS[step];

  return (
    <div className="rounded-card border border-navy/10 p-8">
      <p className="mb-5 text-sm text-navy/50">
        Question {step + 1} of {QUESTIONS.length}
      </p>
      <h3 className="mb-6 font-heading text-xl font-semibold">{q.prompt}</h3>
      <div className="space-y-3">
        {q.options.map((opt) => (
          <button
            key={opt.label}
            onClick={() => choose(opt.value)}
            className="block w-full rounded-xl border border-navy/15 p-4 text-left text-[15px] hover:border-blue hover:bg-blue/5"
          >
            {opt.label}
          </button>
        ))}
      </div>
    </div>
  );
}