"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Message } from "@/lib/types";
import { useState } from "react";
import { Textarea } from "./ui/textarea";

interface RatingCategory {
  name: string;
  value: number;
}

export default function EvaluationModal({
  open = false,
  onOpenChange,
  message,
  prevMessage,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  message: Message;
  prevMessage: Message;
}) {
  const [ratings, setRatings] = useState<Record<string, number>>({
    relevance: 0,
    accuracy: 0,
    clarity: 0,
    engagement: 0,
  });

  const categories: RatingCategory[] = [
    { name: "Relevance", value: ratings.relevance },
    { name: "Accuracy", value: ratings.accuracy },
    { name: "Clarity", value: ratings.clarity },
    { name: "User Engagement", value: ratings.engagement },
  ];

  const handleRating = (category: string, value: number) => {
    const categoryKey =
      category.toLowerCase() === "user engagement"
        ? "engagement"
        : category.toLowerCase();

    setRatings((prev) => ({
      ...prev,
      [categoryKey]: value,
    }));
  };

  const handleSubmit = () => {
    console.log("Submitting ratings:", ratings);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="text-xl pb-2 border-b">
            Evaluate this Response
          </DialogTitle>
        </DialogHeader>
        <div className="space-y-6 py-4">
          {categories.map((category) => (
            <div key={category.name} className="space-y-2">
              <label className="text-sm font-medium">{category.name}:</label>
              <div className="flex gap-1">
                {[1, 2, 3, 4, 5].map((star) => (
                  <button
                    key={star}
                    onClick={() => handleRating(category.name, star)}
                    className="text-2xl focus:outline-none"
                  >
                    <span
                      className={`${
                        category.value >= star
                          ? "text-yellow-400"
                          : "text-muted-foreground"
                      }`}
                    >
                      ★
                    </span>
                  </button>
                ))}
              </div>
            </div>
          ))}
          <Textarea placeholder="Additional comments..." />
          <Button className="w-full" onClick={handleSubmit}>
            Submit
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}