"use client";

import { ConfettiBurst } from "~/components/ui/ConfettiBurst.js";
import { SuccessToast } from "~/components/ui/SuccessToast.js";
import { BTN_PRIMARY, BTN_SECONDARY } from "./project-wizard/types.js";
import { useProjectWizardForm } from "./project-wizard/useProjectWizardForm.js";
import { StepBar } from "./project-wizard/StepBar.js";
import { Step1Identity } from "./project-wizard/Step1Identity.js";
import { Step2Timeline } from "./project-wizard/Step2Timeline.js";
import { Step3Staffing } from "./project-wizard/Step3Staffing.js";
import { Step4Suggestions } from "./project-wizard/Step4Suggestions.js";
import { Step5Review } from "./project-wizard/Step5Review.js";

interface ProjectWizardProps {
  open: boolean;
  onClose: () => void;
  onSuccess?: (shortCode: string, name: string) => void;
}

export function ProjectWizard({ open, onClose, onSuccess }: ProjectWizardProps) {
  const {
    step,
    setStep,
    state,
    patch,
    canGoNext,
    isSubmitting,
    submitError,
    submitWarnings,
    showConfetti,
    showSuccessToast,
    setShowSuccessToast,
    handleSubmit,
    handleClose,
  } = useProjectWizardForm({ onClose, onSuccess });

  if (!open) return null;

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8 px-4">
      <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative">
        {/* Celebration effects */}
        <ConfettiBurst trigger={showConfetti} />
        <SuccessToast
          show={showSuccessToast}
          message="Project created successfully!"
          onDone={() => setShowSuccessToast(false)}
        />
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">New Project Wizard</h2>
          <button
            type="button"
            onClick={handleClose}
            className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
            aria-label="Close"
          >
            ×
          </button>
        </div>

        {/* Body */}
        <div className="px-6 py-5">
          <StepBar current={step} />

          {step === 0 && <Step1Identity state={state} onChange={patch} />}
          {step === 1 && <Step2Timeline state={state} onChange={patch} />}
          {step === 2 && <Step3Staffing state={state} onChange={patch} />}
          {step === 3 && <Step4Suggestions state={state} onChange={patch} />}
          {step === 4 && (
            <Step5Review
              state={state}
              onChange={patch}
              onSubmit={handleSubmit}
              isSubmitting={isSubmitting}
              submitError={submitError}
              submitWarnings={submitWarnings}
            />
          )}
        </div>

        {/* Footer nav */}
        {step < 4 && (
          <div className="flex items-center justify-between px-6 py-4 border-t border-gray-200">
            <button
              type="button"
              onClick={step === 0 ? handleClose : () => setStep((s) => s - 1)}
              className={BTN_SECONDARY}
            >
              {step === 0 ? "Cancel" : "← Back"}
            </button>
            <button
              type="button"
              onClick={() => setStep((s) => s + 1)}
              disabled={!canGoNext()}
              className={BTN_PRIMARY}
            >
              {step === 3 ? "Review →" : "Next →"}
            </button>
          </div>
        )}
        {step === 4 && (
          <div className="flex items-center px-6 py-4 border-t border-gray-200">
            <button type="button" onClick={() => setStep((s) => s - 1)} className={BTN_SECONDARY}>
              ← Back
            </button>
          </div>
        )}
      </div>
    </div>
  );
}
