import { Check, X, AlertTriangle, ArrowDown, ThumbsUp } from 'lucide-react';

import { useState, useCallback } from 'react';

import { useForm } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog';
import { Label } from '@/Components/ui/label';
import { LoadingButton } from '@/Components/ui/loading-button';
import { Textarea } from '@/Components/ui/textarea';
import { cn } from '@/lib/utils';

interface FeedbackButtonsProps {
  siteId: number;
  opportunityType: 'recommendation' | 'freshness' | 'cannibalization' | 'topic_gap';
  opportunityId: number;
  className?: string;
}

type FeedbackType = 'accepted' | 'rejected' | 'false_positive' | 'low_priority' | 'useful';

const FEEDBACK_BUTTONS = [
  { type: 'accepted' as const, label: 'Accept', icon: Check, variant: 'default' as const },
  { type: 'rejected' as const, label: 'Reject', icon: X, variant: 'destructive' as const },
  {
    type: 'false_positive' as const,
    label: 'False Positive',
    icon: AlertTriangle,
    variant: 'outline' as const,
  },
  {
    type: 'low_priority' as const,
    label: 'Low Priority',
    icon: ArrowDown,
    variant: 'outline' as const,
  },
  { type: 'useful' as const, label: 'Useful', icon: ThumbsUp, variant: 'secondary' as const },
];

export default function FeedbackButtons({
  siteId,
  opportunityType,
  opportunityId,
  className,
}: FeedbackButtonsProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedFeedbackType, setSelectedFeedbackType] = useState<FeedbackType | null>(null);

  const { data, setData, post, processing, errors, reset } = useForm({
    opportunity_type: opportunityType,
    opportunity_id: opportunityId,
    feedback_type: '' as FeedbackType,
    notes: '',
  });

  const handleButtonClick = useCallback(
    (feedbackType: FeedbackType) => {
      setSelectedFeedbackType(feedbackType);
      setData('feedback_type', feedbackType);
      setIsModalOpen(true);
    },
    [setData],
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    post(route('opportunities.feedback.store', siteId), {
      onSuccess: () => {
        setIsModalOpen(false);
        reset('notes');
        setSelectedFeedbackType(null);
      },
    });
  };

  const handleClose = useCallback(() => {
    setIsModalOpen(false);
    reset('notes');
    setSelectedFeedbackType(null);
  }, [reset]);

  const selectedButton = FEEDBACK_BUTTONS.find((btn) => btn.type === selectedFeedbackType);

  return (
    <>
      <div className={cn('flex flex-wrap gap-2', className)}>
        {FEEDBACK_BUTTONS.map((button) => {
          const Icon = button.icon;
          return (
            <Button
              key={button.type}
              type="button"
              variant={button.variant}
              size="sm"
              onClick={() => handleButtonClick(button.type)}
              className="gap-1"
            >
              <Icon className="h-3 w-3" />
              {button.label}
            </Button>
          );
        })}
      </div>

      <Dialog
        open={isModalOpen}
        onOpenChange={(open) => {
          if (!open) handleClose();
        }}
      >
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Submit Feedback</DialogTitle>
            <DialogDescription>
              You are marking this opportunity as &ldquo;{selectedButton?.label}&rdquo;. Add
              optional notes to help improve future recommendations.
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="notes">Notes (optional)</Label>
              <Textarea
                id="notes"
                value={data.notes}
                onChange={(e) => setData('notes', e.target.value)}
                placeholder="Add any notes about this feedback..."
                className="min-h-[100px]"
              />
              {errors.notes && <p className="text-sm text-destructive">{errors.notes}</p>}
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={handleClose}>
                Cancel
              </Button>
              <LoadingButton loading={processing}>Submit Feedback</LoadingButton>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </>
  );
}