"use client";

import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button";
import { GlassCard } from "@/components/silisuite/glass-card";
import { completeAllTours, completeTour, skipAllTours, skipTour, type TourId } from "@/lib/storage/tour";

export interface TourStep {
  title: string;
  body: string;
}

interface TourOverlayProps {
  tourId: TourId;
  steps: TourStep[];
  active: boolean;
  onDone: () => void;
}

export function TourOverlay({ tourId, steps, active, onDone }: TourOverlayProps) {
  const [step, setStep] = useState(0);

  useEffect(() => {
    if (active) setStep(0);
  }, [active]);

  if (!active || steps.length === 0) return null;

  const current = steps[step];
  const isLast = step >= steps.length - 1;

  const finish = (skipped: boolean) => {
    if (tourId === "global") {
      if (skipped) skipAllTours();
      else {
        completeTour("global");
        completeAllTours();
      }
    } else if (skipped) {
      skipTour(tourId);
    } else {
      completeTour(tourId);
    }
    onDone();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-end justify-center bg-black/50 p-4 sm:items-center">
      <GlassCard className="w-full max-w-md p-6">
        <p className="ss-label mb-1">
          Step {step + 1} of {steps.length}
        </p>
        <h3 className="ss-heading text-lg">{current?.title}</h3>
        <p className="mt-2 text-muted-foreground text-sm">{current?.body}</p>
        <div className="mt-4 flex justify-between gap-2">
          <Button variant="ghost" size="sm" onClick={() => finish(true)}>
            Skip tour
          </Button>
          <div className="flex gap-2">
            {step > 0 && (
              <Button variant="outline" size="sm" onClick={() => setStep((s) => s - 1)}>
                Back
              </Button>
            )}
            <Button
              size="sm"
              onClick={() => {
                if (isLast) finish(false);
                else setStep((s) => s + 1);
              }}
            >
              {isLast ? "Done" : "Next"}
            </Button>
          </div>
        </div>
      </GlassCard>
    </div>
  );
}

export const GLOBAL_TOUR_STEPS: TourStep[] = [
  { title: "Welcome to SiliSuite", body: "Your client portal for AI agents, integrations, and cross-tool insights." },
  { title: "Sidebar navigation", body: "Jump between SiliTalk, chatbots, Tool Lookup, projects, and account settings." },
  { title: "Start a project", body: "Open Projects to generate consulting previews from your SRS document." },
  { title: "AI Director", body: "Ask natural-language questions — responses use metric cards from live /summary feeds." },
  { title: "Integrations", body: "Connect business tools once. They power SiliTalk, chatbots, and the Director." },
];

export const MINI_TOURS: Partial<Record<TourId, TourStep[]>> = {
  silitalk: [{ title: "SiliTalk", body: "Manage phone lines, review calls, and edit your knowledge base." }],
  chatbots: [{ title: "Chatbots", body: "Build and deploy website chat widgets with live preview." }],
  tools: [{ title: "Tool Lookup", body: "Browse AI tools and request new integrations." }],
  integrations: [{ title: "Integrations", body: "Connect Gmail, Stripe, HubSpot, and more." }],
  director: [{ title: "Director", body: "Your always-on AI operations manager." }],
};