"use client";
import { use, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { MoreVertical, Trash2 } from "lucide-react";
import {
  deleteDataFeedback,
  getListFeedback,
  postDataFeedback,
} from "@/service/settings/settings";
import { close, loading } from "@/config/swal";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const FeedbackForm = () => {
  const [region, setRegion] = useState("nasional");
  const [feedbackList, setFeedbackList] = useState<any>([]);
  const [newFeedback, setNewFeedback] = useState("");
  const [selectedFeedback, setSetSelectedFeedback] = useState(0);

  useEffect(() => {
    fetchFeedback();
  }, []);

  const fetchFeedback = async () => {
    loading();
    const res = await getListFeedback();
    setFeedbackList(res?.data?.data);
    close();
  };

  const handleAddFeedback = async () => {
    if (newFeedback.trim()) {
      const req = {
        question: newFeedback.trim(),
        isInternational: region === "internasional",
      };
      loading();
      const res = await postDataFeedback(req);
      close();
      fetchFeedback();
    }
  };
  const handleEditFeedback = async () => {
    if (newFeedback.trim()) {
      const req = {
        id: selectedFeedback,
        question: newFeedback.trim(),
        isInternational: region === "internasional",
      };
      loading();
      const res = await postDataFeedback(req);
      close();
      fetchFeedback();
      setSetSelectedFeedback(0);
      setNewFeedback("");
    }
  };

  const deleteFeedback = async (id: number) => {
    loading();
    const res = await deleteDataFeedback(id);
    console.log(res);
    close();
    fetchFeedback();
  };

  const doEdit = (id: number, question: string) => {
    setSetSelectedFeedback(id);
    setNewFeedback(question);
  };

  return (
    <div className="space-y-4">
      <div className="bg-white rounded-md p-6 flex flex-col md:flex-row gap-6">
        <div className="md:w-1/2 space-y-4">
          <div>
            <p className="font-medium mb-2">Wilayah Publish</p>
            <RadioGroup
              defaultValue="nasional"
              onValueChange={(value) => setRegion(value)}
              className="flex items-center gap-6"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="nasional" id="nasional" />
                <label htmlFor="nasional">Nasional</label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="internasional" id="internasional" />
                <label htmlFor="internasional">Internasional</label>
              </div>
            </RadioGroup>
          </div>

          <div>
            <p className="font-medium mb-2">Poin Penilaian</p>
            <Textarea
              placeholder="Tulis poin yang ingin dijadikan penilaian"
              value={newFeedback}
              onChange={(e) => setNewFeedback(e.target.value)}
              className="min-h-[100px]"
            />
          </div>
          <div className="flex flex-row gap-1">
            {selectedFeedback !== 0 && (
              <Button
                variant="outline"
                onClick={handleEditFeedback}
                className="bg-white text-blue-600 border border-bue-600"
              >
                Ubah Feedback
              </Button>
            )}
            <Button
              onClick={handleAddFeedback}
              className="bg-blue-600 text-white"
            >
              Tambah Feedback
            </Button>
          </div>
        </div>

        <div className="md:w-1/2">
          <h3 className="font-semibold mb-2 border-b pb-1">Feedback</h3>
          <p className="font-medium mb-4">Pertanyaan</p>
          <ul className="space-y-3">
            {feedbackList.map((item: any) => (
              <li key={item.id} className="flex justify-between items-center">
                <span>{item.question}</span>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      size="icon"
                      className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
                    >
                      <span className="sr-only">Open menu</span>
                      <MoreVertical className="h-4 w-4 text-default-800" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent className="p-0" align="end">
                    <DropdownMenuItem
                      onClick={() => doEdit(item.id, item.question)}
                      className="p-2 border-b rounded-none focus:bg-slate-300"
                    >
                      Edit
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={() => deleteFeedback(item.id)}
                      className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
                    >
                      Delete
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default FeedbackForm;