'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Slider } from '@/components/ui/slider';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle
} from '@/components/ui/alert-dialog';
import { CheckCircle2 } from 'lucide-react';

interface LiveVotingFormProps {
  sessionId?: string;
  projectId: string;
  onVoteSubmit: (vote: { score: number }) => void;
  disabled?: boolean;
}

export function LiveVotingForm({
  sessionId,
  projectId,
  onVoteSubmit,
  disabled = false
}: LiveVotingFormProps) {
  const [score, setScore] = useState(50);
  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
  const [hasSubmitted, setHasSubmitted] = useState(false);

  const handleSubmit = () => {
    setConfirmDialogOpen(true);
  };

  const handleConfirm = () => {
    onVoteSubmit({ score });
    setHasSubmitted(true);
    setConfirmDialogOpen(false);
  };

  if (hasSubmitted || disabled) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12">
          <CheckCircle2 className="mb-4 h-12 w-12 text-green-600" />
          <p className="font-medium">Vote Submitted</p>
          <p className="mt-1 text-sm text-muted-foreground">Score: {score}/100</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <>
      <Card>
        <CardHeader>
          <CardTitle>Live Voting</CardTitle>
          <CardDescription>Rate this project on a scale of 0-100</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <Label>Score</Label>
              <div className="flex items-center gap-3">
                <Input
                  type="number"
                  min="0"
                  max="100"
                  value={score}
                  onChange={(e) => setScore(Math.min(100, Math.max(0, parseInt(e.target.value) || 0)))}
                  className="w-20 text-center"
                />
                <span className="text-2xl font-bold text-primary">{score}</span>
              </div>
            </div>

            <Slider
              value={[score]}
              onValueChange={(values) => setScore(values[0])}
              min={0}
              max={100}
              step={1}
              className="w-full"
            />

            <div className="flex justify-between text-xs text-muted-foreground">
              <span>Poor (0)</span>
              <span>Average (50)</span>
              <span>Excellent (100)</span>
            </div>
          </div>

          <Button onClick={handleSubmit} className="w-full" size="lg">
            Submit Vote
          </Button>
        </CardContent>
      </Card>

      {/* Confirmation Dialog */}
      <AlertDialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirm Your Vote</AlertDialogTitle>
            <AlertDialogDescription>
              You are about to submit a score of <strong>{score}/100</strong>. This action cannot
              be undone. Are you sure?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirm}>Confirm Vote</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}