'use client';

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

interface SetupWizardProps {
  open: boolean;
  onComplete: (data: { substance: 'nicotine' | 'weed'; name: string; age: number; religion: 'christian' | 'secular' }) => void;
}

export function SetupWizard({ open, onComplete }: SetupWizardProps) {
  const [step, setStep] = useState(1);
  const [name, setName] = useState('');
  const [age, setAge] = useState('25');
  const [substance, setSubstance] = useState<'nicotine' | 'weed' | ''>('');
  const [religion, setReligion] = useState<'christian' | 'secular' | ''>('');

  const ages = Array.from({ length: 83 }, (_, i) => (i + 18).toString());

  const handleNext = () => {
    if (step === 1 && name.trim()) {
      setStep(2);
    } else if (step === 2 && age) {
      setStep(3);
    } else if (step === 3 && substance) {
      setStep(4);
    }
  };

  const handleComplete = () => {
    if (substance && name.trim() && age && religion) {
      onComplete({
        substance,
        name: name.trim(),
        age: parseInt(age, 10),
        religion: religion,
      });
    }
  };

  return (
    <Dialog open={open}>
      <DialogContent className="sm:max-w-md" onInteractOutside={(e) => e.preventDefault()}>
        <DialogHeader>
          <DialogTitle>Welcome to QuitTraq</DialogTitle>
          <DialogDescription>
            {step === 1 && "Let's get to know you a little better."}
            {step === 2 && "Just one more thing about you."}
            {step === 3 && "Set up your tracking preferences."}
            {step === 4 && "What inspires you?"}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6 py-4">
          {step === 1 && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="name">What&apos;s your name?</Label>
                <Input
                  id="name"
                  placeholder="Enter your name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="text-lg"
                  autoFocus
                />
              </div>
              <Button
                onClick={handleNext}
                disabled={!name.trim()}
                className="w-full"
              >
                Continue
              </Button>
            </div>
          )}

          {step === 2 && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="age">How old are you?</Label>
                <Select value={age} onValueChange={setAge}>
                  <SelectTrigger id="age" className="text-lg">
                    <SelectValue placeholder="Select your age" />
                  </SelectTrigger>
                  <SelectContent className="max-h-60">
                    {ages.map((a) => (
                      <SelectItem key={a} value={a}>
                        {a} years old
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setStep(1)} className="flex-1">
                  Back
                </Button>
                <Button onClick={handleNext} disabled={!age} className="flex-1">
                  Continue
                </Button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="space-y-4">
              <div className="space-y-3">
                <Label htmlFor="substance">What would you like to track?</Label>
                <Select value={substance} onValueChange={(v) => setSubstance(v as 'nicotine' | 'weed')}>
                  <SelectTrigger id="substance">
                    <SelectValue placeholder="Select substance" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="nicotine">Nicotine (Vaping/Cigarettes)</SelectItem>
                    <SelectItem value="weed">Cannabis/Weed</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="bg-muted p-4 rounded-lg space-y-2">
                <h4 className="font-medium">How it works</h4>
                <ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
                  <li>Log each puff throughout the day</li>
                  <li>Track your patterns for one week</li>
                  <li>Get a personalized quit plan</li>
                  <li>Gradually reduce your intake safely</li>
                </ol>
              </div>

              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setStep(2)} className="flex-1">
                  Back
                </Button>
                <Button onClick={handleNext} disabled={!substance} className="flex-1">
                  Continue
                </Button>
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="space-y-4">
              <div className="space-y-3">
                <Label htmlFor="religion">Choose your daily inspiration</Label>
                <Select value={religion} onValueChange={(v) => setReligion(v as 'christian' | 'secular')}>
                  <SelectTrigger id="religion">
                    <SelectValue placeholder="Select source" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="christian">Christian (KJV Bible Verses)</SelectItem>
                    <SelectItem value="secular">Secular (Motivational Quotes)</SelectItem>
                  </SelectContent>
                </Select>
                <p className="text-xs text-muted-foreground">
                  We&apos;ll show you a new verse or quote each day to help keep you motivated.
                </p>
              </div>

              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setStep(3)} className="flex-1">
                  Back
                </Button>
                <Button onClick={handleComplete} disabled={!religion} className="flex-1">
                  Start Tracking
                </Button>
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}
