import React, { useState } from "react";
import { Modal } from "../common/Modal";
import {
  Users,
  FileText,
  Sliders,
  Calendar,
  Sparkles,
  ArrowRight,
  ArrowLeft,
  CheckCircle,
} from "lucide-react";

interface GuidedTourModalProps {
  isOpen: boolean;
  onClose: () => void;
  onNavigateToTab?: (tabId: string) => void;
}

export const GuidedTourModal: React.FC<GuidedTourModalProps> = ({
  isOpen,
  onClose,
  onNavigateToTab,
}) => {
  const [step, setStep] = useState(0);

  const steps = [
    {
      title: "Welcome to the Placement Engine",
      icon: <Users className="w-8 h-8 text-emerald-400" />,
      content:
        "Manage 40 to 120 campus recruitment drives entirely offline. All student academic records, company cut-offs, college offer policies, and interview schedules are computed locally with zero cloud dependencies.",
      highlight: "Step 1: Import your student batch roster with automatic column mapping.",
      targetTab: "students",
    },
    {
      title: "Paste or Upload Drive Announcements",
      icon: <FileText className="w-8 h-8 text-sky-400" />,
      content:
        "No manual re-typing. Paste messy email announcements or drop PDFs/DOCXs. Our offline extractor identifies CGPA cut-offs, branch aliases, backlogs, and gap limits, and presents them in a side-by-side review window.",
      highlight: "Step 2: Review extracted fields with exact quotation provenance.",
      targetTab: "create_drive",
    },
    {
      title: "Visual Rule Builder & College Policies",
      icon: <Sliders className="w-8 h-8 text-indigo-400" />,
      content:
        "Tweak requirements with simple sliders and checkboxes. Watch the eligible student counter update in real-time. Layer institutional offer rules ('one offer and you are out', dream company CTC exceptions) automatically.",
      highlight: "Step 3: Instant live candidate count without guessing.",
      targetTab: "rule_editor",
    },
    {
      title: "Clash-Free Interview & Test Scheduling",
      icon: <Calendar className="w-8 h-8 text-emerald-400" />,
      content:
        "Our Google OR-Tools CP-SAT engine schedules hundreds of students across multiple rooms and panels in seconds with mathematically proven ZERO overlapping student or room clashes.",
      highlight: "Step 4: Look for the green '0 Clashes Verified' badge.",
      targetTab: "schedule",
    },
    {
      title: "What-If Simulation & Safe Publishing",
      icon: <Sparkles className="w-8 h-8 text-amber-400" />,
      content:
        "Before publishing a schedule to students and recruiters, test changes in-memory. See computed headlines like 'Lowering cut-off from 7.0 to 6.5 adds 38 students; 6 clash with Test B' before committing.",
      highlight: "Step 5: Safe versioned publication with instant rollback protection.",
      targetTab: "what_if",
    },
  ];

  const current = steps[step];

  const handleNext = () => {
    if (step < steps.length - 1) {
      setStep(step + 1);
    } else {
      onClose();
    }
  };

  const handleJump = () => {
    if (onNavigateToTab && current.targetTab) {
      onNavigateToTab(current.targetTab);
    }
    onClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Placement Officer Quick-Start Guide"
      maxWidth="lg"
      footer={
        <div className="flex items-center justify-between w-full">
          <div className="flex gap-1.5">
            {steps.map((_, i) => (
              <span
                key={i}
                className={`h-2 rounded-full transition-all ${
                  i === step
                    ? "w-6 bg-gradient-to-r from-blue-500 to-emerald-400"
                    : "w-2 bg-[#1e3258]"
                }`}
              />
            ))}
          </div>
          <div className="flex items-center gap-2">
            {step > 0 && (
              <button
                onClick={() => setStep(step - 1)}
                className="px-3 py-1.5 text-xs font-semibold text-slate-300 hover:text-white hover:bg-[#111d38] border border-[#1b2b4d] rounded-xl flex items-center gap-1 transition-colors cursor-pointer"
              >
                <ArrowLeft className="w-3.5 h-3.5" /> Back
              </button>
            )}
            <button
              onClick={handleJump}
              className="px-3 py-1.5 text-xs font-semibold text-emerald-300 bg-emerald-950/80 hover:bg-emerald-900/80 border border-emerald-800/60 rounded-xl transition-colors cursor-pointer"
            >
              Open This View
            </button>
            <button
              onClick={handleNext}
              className="px-4 py-1.5 text-xs font-bold text-white bg-gradient-to-r from-blue-600 via-teal-600 to-emerald-600 hover:from-blue-500 hover:to-emerald-500 border border-emerald-400/40 rounded-xl shadow-xs flex items-center gap-1 transition-all cursor-pointer"
            >
              {step === steps.length - 1 ? (
                <>
                  <CheckCircle className="w-3.5 h-3.5" /> Finish
                </>
              ) : (
                <>
                  Next <ArrowRight className="w-3.5 h-3.5" />
                </>
              )}
            </button>
          </div>
        </div>
      }
    >
      <div className="space-y-4 py-2">
        <div className="w-16 h-16 rounded-2xl bg-[#111d38] border border-[#1b2b4d] flex items-center justify-center mx-auto mb-2 shadow-inner">
          {current.icon}
        </div>
        <div className="text-center">
          <h3 className="text-lg font-bold text-white">{current.title}</h3>
          <p className="text-sm text-slate-300 mt-2 leading-relaxed">{current.content}</p>
        </div>
        <div className="p-3 bg-emerald-950/60 border border-emerald-800/60 rounded-xl text-xs font-semibold text-emerald-200 flex items-center gap-2">
          <Sparkles className="w-4 h-4 text-emerald-400 shrink-0" />
          <span>{current.highlight}</span>
        </div>
      </div>
    </Modal>
  );
};