import { Board, ProjectRequirement, RequirementDraftTask } from "@vtit-agent-coding/shared";
import { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
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 RequirementDetailView({ projectId, requirementId, onBack }: { projectId: string; requirementId: string; onBack: () => void }) {
  const navigate = useNavigate();
  const [req, setReq] = useState<ProjectRequirement | null>(null);
  const [logs, _setLogs] = useState<string[]>([]);
  const [draftTasks, setDraftTasks] = useState<RequirementDraftTask[]>([]);
  const [boards, setBoards] = useState<Board[]>([]);

  const [editingTask, setEditingTask] = useState<RequirementDraftTask | null>(null);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [createDialogOpen, setCreateDialogOpen] = useState(false);

  const [importDialogOpen, setImportDialogOpen] = useState(false);
  const [selectedBoardId, setSelectedBoardId] = useState<string>("");
  const [selectedTaskIds, setSelectedTaskIds] = useState<Set<string>>(new Set());

  const logEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    loadReq();
    loadDraftTasks();
    loadBoards();
  }, [projectId, requirementId]);

  useEffect(() => {
    const es = new EventSource(`/api/projects/${projectId}/requirements/${requirementId}/events`);

    const handleStatusUpdate = (e: MessageEvent) => {
      try {
        const data = JSON.parse(e.data);
        if (data.status) {
          setReq((prev: ProjectRequirement | null) => (prev ? { ...prev, status: data.status } : null));
          if (data.status === "completed") {
            loadDraftTasks();
          }
        }
      } catch (err) {
        console.error("Failed to parse status SSE event:", err);
      }
    };

    es.addEventListener("status", handleStatusUpdate);

    return () => {
      es.removeEventListener("status", handleStatusUpdate);
      es.close();
    };
  }, [projectId, requirementId]);

  useEffect(() => {
    if (logEndRef.current) {
      logEndRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [logs]);

  async function loadReq() {
    const res = await fetch(`/api/projects/${projectId}/requirements/${requirementId}`);
    if (res.ok) setReq(await res.json());
  }

  async function loadDraftTasks() {
    const res = await fetch(`/api/projects/${projectId}/requirements/${requirementId}/draft-tasks`);
    if (res.ok) {
      const data = await res.json();
      setDraftTasks(Array.isArray(data) ? data : []);
    }
  }

  async function loadBoards() {
    const res = await fetch(`/api/boards`);
    if (res.ok) {
      const data = await res.json();
      setBoards(Array.isArray(data) ? data : []);
    }
  }

  async function handleUpdateTask(e: React.FormEvent) {
    e.preventDefault();
    if (!editingTask) return;
    const res = await fetch(`/api/projects/${projectId}/requirements/${requirementId}/draft-tasks/${editingTask.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(editingTask),
    });
    if (res.ok) {
      setEditDialogOpen(false);
      loadDraftTasks();
    }
  }

  async function handleDeleteTask(taskId: string) {
    if (!confirm("Xác nhận xóa?")) return;
    const res = await fetch(`/api/projects/${projectId}/requirements/${requirementId}/draft-tasks/${taskId}`, {
      method: "DELETE",
    });
    if (res.ok) loadDraftTasks();
  }

  async function handleImport() {
    if (!selectedBoardId) return alert("Vui lòng chọn Board!");
    if (selectedTaskIds.size === 0) return alert("Vui lòng chọn ít nhất 1 task!");

    const res = await fetch(`/api/projects/${projectId}/requirements/${requirementId}/import`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ boardId: selectedBoardId, taskIds: Array.from(selectedTaskIds) }),
    });

    if (res.ok) {
      alert("Import thành công!");
      navigate(`/projects/${projectId}?tab=kanban`); // Or somewhere appropriate
    } else {
      alert("Import thất bại!");
    }
  }

  if (!req) return <div className="p-4">Đang tải...</div>;

  const steps = [
    { id: "pending", label: "Chờ xử lý" },
    { id: "processing_pm", label: "PM Phân Tích" },
    { id: "processing_sa", label: "SA Thiết Kế" },
    { id: "processing_ba", label: "BA Nghiệp Vụ" },
    { id: "completed", label: "Hoàn Thành" },
  ];

  const currentStepIndex =
    steps.findIndex((s) => s.id === req.status) !== -1 ? steps.findIndex((s) => s.id === req.status) : req.status === "failed" ? steps.length : 0;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <Button variant="outline" onClick={onBack}>
            ← Quay lại
          </Button>
          <h2 className="text-xl font-bold">{req.title}</h2>
        </div>
        {(req.status === "pending" || req.status === "failed") && (
          <Button
            onClick={async () => {
              const res = await fetch(`/api/projects/${projectId}/requirements/${requirementId}/run`, { method: "POST" });
              if (res.ok) {
                loadReq();
              } else {
                alert("Không thể bắt đầu phân tích.");
              }
            }}
            className="bg-blue-600 hover:bg-blue-700 text-white"
          >
            🚀 Bắt đầu Phân tích (AI)
          </Button>
        )}
      </div>

      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between mb-4">
            {steps.map((step, idx) => (
              <div key={step.id} className="flex flex-col items-center flex-1">
                <div
                  className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${
                    idx < currentStepIndex
                      ? "bg-emerald-500 text-white"
                      : idx === currentStepIndex && req.status !== "failed"
                        ? "bg-blue-500 text-white animate-pulse"
                        : req.status === "failed" && idx === steps.length - 1
                          ? "bg-red-500 text-white"
                          : "bg-slate-200 text-slate-500"
                  }`}
                >
                  {idx + 1}
                </div>
                <span className="text-xs text-center font-medium">{step.label}</span>
              </div>
            ))}
          </div>

          <div className="bg-black text-green-400 p-4 rounded-md font-mono text-sm h-64 overflow-y-auto">
            {logs.length === 0 && <span className="text-slate-500">Chưa có logs...</span>}
            {logs.map((l, i) => (
              <div key={i}>{l}</div>
            ))}
            <div ref={logEndRef} />
          </div>
        </CardContent>
      </Card>

      {(req.status === "completed" || draftTasks.length > 0) && (
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle>Danh sách Task Nháp</CardTitle>
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  setEditingTask({ id: "", requirement_id: req.id, title: "", description: "" } as RequirementDraftTask);
                  setCreateDialogOpen(true);
                }}
              >
                + Tạo Thủ Công
              </Button>
              <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
                <DialogTrigger
                  render={
                    <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700">
                      Đưa lên bảng Kanban
                    </Button>
                  }
                />
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Import vào Kanban Board</DialogTitle>
                  </DialogHeader>
                  <div className="space-y-4">
                    <div>
                      <Label>Chọn Board</Label>
                      <Select value={selectedBoardId} onValueChange={(val) => setSelectedBoardId(val ?? "")}>
                        <SelectTrigger>
                          <SelectValue placeholder="Chọn Board..." />
                        </SelectTrigger>
                        <SelectContent>
                          {boards.map((b) => (
                            <SelectItem key={b.id} value={b.id}>
                              {b.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label>
                        Chọn Task ({selectedTaskIds.size}/{draftTasks.length})
                      </Label>
                      <div className="border rounded-md p-2 mt-2 max-h-60 overflow-y-auto space-y-2">
                        {draftTasks.map((t) => (
                          <div key={t.id} className="flex items-center gap-2">
                            <input
                              type="checkbox"
                              checked={selectedTaskIds.has(t.id)}
                              onChange={(e: any) => {
                                const newSet = new Set(selectedTaskIds);
                                if (e.target.checked) newSet.add(t.id);
                                else newSet.delete(t.id);
                                setSelectedTaskIds(newSet);
                              }}
                            />
                            <span className="text-sm">{t.title}</span>
                          </div>
                        ))}
                      </div>
                      <Button variant="link" size="sm" onClick={() => setSelectedTaskIds(new Set(draftTasks.map((t) => t.id)))}>
                        Chọn tất cả
                      </Button>
                    </div>
                    <Button onClick={handleImport} className="w-full">
                      Xác nhận Import
                    </Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </CardHeader>
          <CardContent className="space-y-2">
            {draftTasks.map((task) => (
              <Collapsible key={task.id} className="border rounded-md">
                <div className="flex items-center justify-between p-3 bg-slate-50 border-b">
                  <CollapsibleTrigger className="font-semibold text-sm flex-1 text-left hover:underline">{task.title}</CollapsibleTrigger>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setEditingTask(task);
                        setEditDialogOpen(true);
                      }}
                    >
                      Sửa
                    </Button>
                    <Button variant="ghost" size="sm" className="text-red-500" onClick={() => handleDeleteTask(task.id)}>
                      Xóa
                    </Button>
                  </div>
                </div>
                <CollapsibleContent className="p-4 space-y-4 text-sm bg-white">
                  <div>
                    <strong>Mô tả:</strong> <p className="whitespace-pre-wrap">{task.description}</p>
                  </div>

                  {/* SA Section */}
                  <div className="border-l-4 border-blue-500 pl-3">
                    <Badge className="bg-blue-100 text-blue-800 mb-2">SA (Technical)</Badge>
                    <div>
                      <strong>Tech Notes:</strong> <p className="whitespace-pre-wrap">{task.technical_notes}</p>
                    </div>
                    {task.affected_files && task.affected_files.length > 0 && (
                      <div className="mt-2">
                        <strong>Affected Files:</strong>{" "}
                        <pre className="text-xs bg-slate-100 p-2 mt-1">{JSON.stringify(task.affected_files, null, 2)}</pre>
                      </div>
                    )}
                    {task.steps && task.steps.length > 0 && (
                      <div className="mt-2">
                        <strong>Steps:</strong> <pre className="text-xs bg-slate-100 p-2 mt-1">{JSON.stringify(task.steps, null, 2)}</pre>
                      </div>
                    )}
                  </div>

                  {/* BA Section */}
                  <div className="border-l-4 border-green-500 pl-3 mt-4">
                    <Badge className="bg-green-100 text-green-800 mb-2">BA (Business)</Badge>
                    <div>
                      <strong>Business Context:</strong> <p className="whitespace-pre-wrap">{task.business_context}</p>
                    </div>
                    {task.qc_checks && task.qc_checks.length > 0 && (
                      <div className="mt-2">
                        <strong>QC Checks:</strong> <pre className="text-xs bg-slate-100 p-2 mt-1">{JSON.stringify(task.qc_checks, null, 2)}</pre>
                      </div>
                    )}
                    {task.acceptance_tests && task.acceptance_tests.length > 0 && (
                      <div className="mt-2">
                        <strong>Acceptance Tests:</strong>{" "}
                        <pre className="text-xs bg-slate-100 p-2 mt-1">{JSON.stringify(task.acceptance_tests, null, 2)}</pre>
                      </div>
                    )}
                  </div>
                </CollapsibleContent>
              </Collapsible>
            ))}
          </CardContent>
        </Card>
      )}

      {/* Edit Dialog */}
      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Sửa Task Nháp</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleUpdateTask} className="space-y-4">
            <div>
              <Label>Tiêu đề</Label>
              <Input
                value={editingTask?.title || ""}
                onChange={(e: any) => setEditingTask((prev: any) => (prev ? { ...prev, title: e.target.value } : null))}
              />
            </div>
            <div>
              <Label>Mô tả</Label>
              <Textarea
                rows={4}
                value={editingTask?.description || ""}
                onChange={(e: any) => setEditingTask((prev: any) => (prev ? { ...prev, description: e.target.value } : null))}
              />
            </div>
            <div className="border-l-4 border-blue-500 pl-3">
              <Label className="text-blue-700">Technical Notes (SA)</Label>
              <Textarea
                rows={3}
                value={editingTask?.technical_notes || ""}
                onChange={(e: any) => setEditingTask((prev: any) => (prev ? { ...prev, technical_notes: e.target.value } : null))}
              />
            </div>
            <div className="border-l-4 border-green-500 pl-3">
              <Label className="text-green-700">Business Context (BA)</Label>
              <Textarea
                rows={3}
                value={editingTask?.business_context || ""}
                onChange={(e: any) => setEditingTask((prev: any) => (prev ? { ...prev, business_context: e.target.value } : null))}
              />
            </div>
            <Button type="submit">Lưu thay đổi</Button>
          </form>
        </DialogContent>
      </Dialog>

      {/* Create Dialog */}
      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Tạo Task Nháp Mới</DialogTitle>
          </DialogHeader>
          <form
            onSubmit={async (e: React.FormEvent) => {
              e.preventDefault();
              if (!editingTask) return;
              const res = await fetch(`/api/projects/${projectId}/requirements/${requirementId}/draft-tasks`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(editingTask),
              });
              if (res.ok) {
                setCreateDialogOpen(false);
                loadDraftTasks();
              }
            }}
            className="space-y-4"
          >
            <div>
              <Label>Tiêu đề</Label>
              <Input
                required
                value={editingTask?.title || ""}
                onChange={(e: any) => setEditingTask((prev: any) => (prev ? { ...prev, title: e.target.value } : null))}
              />
            </div>
            <div>
              <Label>Mô tả</Label>
              <Textarea
                rows={4}
                value={editingTask?.description || ""}
                onChange={(e: any) => setEditingTask((prev: any) => (prev ? { ...prev, description: e.target.value } : null))}
              />
            </div>
            <Button type="submit">Tạo Task</Button>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}