'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 { getUsageForDate } from '@/lib/storage';
import { getTodayString } from '@/lib/date-utils';
import { Cigarette, Leaf } from 'lucide-react';

interface UsagePromptDialogProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (count: number, substance: 'nicotine' | 'weed') => void;
  userId: string;
}

export function UsagePromptDialog({
  open,
  onClose,
  onSubmit,
  userId,
}: UsagePromptDialogProps) {
  const [step, setStep] = useState<'select' | 'count'>('select');
  const [selectedSubstance, setSelectedSubstance] = useState<'nicotine' | 'weed' | null>(null);
  const [count, setCount] = useState('1');

  const today = getTodayString();
  const nicotineCount = typeof window !== 'undefined' ? getUsageForDate(today, 'nicotine', userId) : 0;
  const weedCount = typeof window !== 'undefined' ? getUsageForDate(today, 'weed', userId) : 0;

  const handleSubstanceSelect = (substance: 'nicotine' | 'weed') => {
    setSelectedSubstance(substance);
    setStep('count');
  };

  const handleSubmit = () => {
    if (selectedSubstance && count) {
      onSubmit(parseInt(count, 10), selectedSubstance);
    }
    resetAndClose();
  };

  const handleBack = () => {
    setStep('select');
    setSelectedSubstance(null);
    setCount('1');
  };

  const resetAndClose = () => {
    setStep('select');
    setSelectedSubstance(null);
    setCount('1');
    onClose();
  };

  const substanceLabel = selectedSubstance === 'nicotine' ? 'puffs/cigarettes' : 'hits';
  const singularLabel = selectedSubstance === 'nicotine' ? 'puff' : 'hit';

  return (
    <Dialog open={open} onOpenChange={resetAndClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Log Your Usage</DialogTitle>
          <DialogDescription>
            Log each time you smoke to track your progress.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6 py-4">
          {/* Today's totals */}
          <div className="grid grid-cols-2 gap-3">
            <div className="bg-red-500/10 border border-red-500/20 p-3 rounded-lg text-center">
              <div className="flex items-center justify-center gap-2 mb-1">
                <Cigarette className="h-4 w-4 text-red-400" />
                <span className="text-sm text-red-400">Nicotine</span>
              </div>
              <p className="text-xl font-bold text-white">{nicotineCount}</p>
              <p className="text-xs text-muted-foreground">today</p>
            </div>
            <div className="bg-green-500/10 border border-green-500/20 p-3 rounded-lg text-center">
              <div className="flex items-center justify-center gap-2 mb-1">
                <Leaf className="h-4 w-4 text-green-400" />
                <span className="text-sm text-green-400">Marijuana</span>
              </div>
              <p className="text-xl font-bold text-white">{weedCount}</p>
              <p className="text-xs text-muted-foreground">today</p>
            </div>
          </div>

          {step === 'select' ? (
            <div className="space-y-4">
              <p className="text-center font-medium">
                What are you logging?
              </p>
              <div className="grid grid-cols-2 gap-4">
                <Button
                  variant="outline"
                  size="lg"
                  onClick={() => handleSubstanceSelect('nicotine')}
                  className="h-24 flex-col gap-2 border-red-500/30 hover:bg-red-500/10 hover:border-red-500/50"
                >
                  <Cigarette className="h-8 w-8 text-red-400" />
                  <span>Nicotine</span>
                </Button>
                <Button
                  variant="outline"
                  size="lg"
                  onClick={() => handleSubstanceSelect('weed')}
                  className="h-24 flex-col gap-2 border-green-500/30 hover:bg-green-500/10 hover:border-green-500/50"
                >
                  <Leaf className="h-8 w-8 text-green-400" />
                  <span>Marijuana</span>
                </Button>
              </div>
              <Button variant="ghost" onClick={resetAndClose} className="w-full">
                Cancel
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="count">
                  How many {substanceLabel} did you just have?
                </Label>
                <Input
                  id="count"
                  type="number"
                  min="1"
                  placeholder="1"
                  value={count}
                  onChange={(e) => setCount(e.target.value)}
                  className="text-center text-lg"
                  autoFocus
                />
                <p className="text-xs text-muted-foreground text-center">
                  This will be added to today&apos;s total
                </p>
              </div>
              <div className="flex gap-2">
                <Button variant="outline" onClick={handleBack} className="flex-1">
                  Back
                </Button>
                <Button
                  onClick={handleSubmit}
                  disabled={!count || parseInt(count) < 1}
                  className="flex-1"
                >
                  Log {count || 1} {parseInt(count) === 1 ? singularLabel : substanceLabel}
                </Button>
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}
