import { ProjectRequirement } from "@vtit-agent-coding/shared";
import { useEffect, useState } from "react";
import { RequirementDetailView } from "./RequirementDetailView";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Textarea } from "./ui/textarea";

export function ProjectRequirementsTab({ projectId }: { projectId: string }) {
  const [requirements, setRequirements] = useState<ProjectRequirement[]>([]);
  const [agents, setAgents] = useState<{ id: string; name: string }[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedReqId, setSelectedReqId] = useState<string | null>(null);

  // Form state
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [pmModel, setPmModel] = useState("");
  const [saModel, setSaModel] = useState("");
  const [baModel, setBaModel] = useState("");

  useEffect(() => {
    loadData();
  }, [projectId]);

  async function loadData() {
    setIsLoading(true);
    try {
      const [reqRes, agentsRes] = await Promise.all([fetch(`/api/projects/${projectId}/requirements`), fetch(`/api/agents`)]);

      if (reqRes.ok) {
        const data = await reqRes.json();
        setRequirements(Array.isArray(data) ? data : []);
      }

      if (agentsRes.ok) {
        const data = await agentsRes.json();
        setAgents(Array.isArray(data) ? data : []);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  }

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    if (!title) return;
    try {
      const res = await fetch(`/api/projects/${projectId}/requirements`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title,
          description,
          pm_model: pmModel,
          sa_model: saModel,
          ba_model: baModel,
        }),
      });
      if (res.ok) {
        setOpen(false);
        setTitle("");
        setDescription("");
        setPmModel("");
        setSaModel("");
        setBaModel("");
        loadData();
      }
    } catch (err) {
      console.error(err);
    }
  }

  if (selectedReqId) {
    return (
      <RequirementDetailView
        projectId={projectId}
        requirementId={selectedReqId}
        onBack={() => {
          setSelectedReqId(null);
          loadData();
        }}
      />
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-lg font-semibold">Danh sách Yêu Cầu</h2>
        <Dialog open={open} onOpenChange={setOpen}>
          <DialogTrigger asChild>
            <Button>+ Thêm Yêu Cầu</Button>
          </DialogTrigger>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>Tạo Yêu Cầu Mới</DialogTitle>
            </DialogHeader>
            <form onSubmit={handleCreate} className="space-y-4">
              <div>
                <Label>Tiêu đề</Label>
                <Input value={title} onChange={(e: any) => setTitle(e.target.value)} required />
              </div>
              <div>
                <Label>Mô tả nghiệp vụ</Label>
                <Textarea value={description} onChange={(e: any) => setDescription(e.target.value)} rows={4} />
              </div>
              <div>
                <Label>Model cho PM</Label>
                <Select value={pmModel} onValueChange={setPmModel}>
                  <SelectTrigger>
                    <SelectValue placeholder="Chọn model" />
                  </SelectTrigger>
                  <SelectContent>
                    {agents.map((a) => (
                      <SelectItem key={a.id} value={a.id}>
                        {a.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Model cho SA</Label>
                <Select value={saModel} onValueChange={setSaModel}>
                  <SelectTrigger>
                    <SelectValue placeholder="Chọn model" />
                  </SelectTrigger>
                  <SelectContent>
                    {agents.map((a) => (
                      <SelectItem key={a.id} value={a.id}>
                        {a.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Model cho BA</Label>
                <Select value={baModel} onValueChange={setBaModel}>
                  <SelectTrigger>
                    <SelectValue placeholder="Chọn model" />
                  </SelectTrigger>
                  <SelectContent>
                    {agents.map((a) => (
                      <SelectItem key={a.id} value={a.id}>
                        {a.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="flex justify-end pt-2">
                <Button type="submit">Lưu</Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>

      {isLoading ? (
        <div className="text-center py-4 text-muted-foreground">Đang tải...</div>
      ) : requirements.length === 0 ? (
        <div className="text-center py-8 text-muted-foreground border rounded-lg">Chưa có yêu cầu nào.</div>
      ) : (
        <div className="grid grid-cols-1 gap-4">
          {requirements.map((req) => (
            <Card key={req.id} className="cursor-pointer hover:bg-slate-50 transition-colors" onClick={() => setSelectedReqId(req.id)}>
              <CardHeader className="py-3">
                <div className="flex justify-between items-start">
                  <CardTitle className="text-base">{req.title}</CardTitle>
                  <span className="text-xs px-2 py-1 bg-slate-100 rounded-full border">{req.status}</span>
                </div>
              </CardHeader>
              <CardContent className="py-2 text-sm text-slate-600 line-clamp-2">{req.description}</CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}