import { useState } from "react";
import { MessageSquarePlus, Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { addFeedback } from "@/lib/feedback-service";
import type { StoredUser } from "@/lib/auth-service";

type Props = {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  user: StoredUser;
};

export default function FeedbackDialog({ open, onOpenChange, user }: Props) {
  const [text, setText] = useState("");
  const [sent, setSent] = useState(false);

  const submit = () => {
    if (text.trim().length < 3) return;
    addFeedback(user.id, user.username, text);
    setText("");
    setSent(true);
    window.setTimeout(() => {
      setSent(false);
      onOpenChange(false);
    }, 1200);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-sm">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 font-display text-2xl">
            <MessageSquarePlus className="h-5 w-5 text-accent" /> Чего не хватает?
          </DialogTitle>
          <DialogDescription>Напишите пожелание — оно придёт администратору студии.</DialogDescription>
        </DialogHeader>
        <Textarea
          rows={4}
          autoFocus
          value={text}
          placeholder="Например: добавьте элемент «трилистник» и печать на A3"
          onChange={(e) => setText(e.target.value)}
        />
        <Button className="h-11 w-full gap-2" disabled={text.trim().length < 3} onClick={submit}>
          <Send className="h-4 w-4" /> {sent ? "Отправлено!" : "Отправить"}
        </Button>
      </DialogContent>
    </Dialog>
  );
}