import type { Project } from "@vtit-agent-coding/shared";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Button } from "./ui/button";
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Textarea } from "./ui/textarea";

export interface TaskSchemaModalProps {
  boardId: string;
  projectId?: string;
  onTaskCreated?: () => void;
  trigger?: React.ReactNode;
}

export function TaskSchemaModal({ boardId, projectId, onTaskCreated, trigger }: TaskSchemaModalProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [projectAgents, setProjectAgents] = useState<any[]>([]);
  const [projectModules, setProjectModules] = useState<string[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    if (isOpen) {
      const fetchUrl = projectId ? `/api/projects/${projectId}/agents` : "/api/agents";
      fetch(fetchUrl)
        .then((r) => r.json())
        .then((data) => {
          if (Array.isArray(data) && data.length > 0) {
            setProjectAgents(data);
          } else {
            fetch("/api/agents")
              .then((r) => r.json())
              .then((allData) => setProjectAgents(Array.isArray(allData) ? allData : []))
              .catch(console.error);
          }
        })
        .catch(() => {
          fetch("/api/agents")
            .then((r) => r.json())
            .then((allData) => setProjectAgents(Array.isArray(allData) ? allData : []))
            .catch(console.error);
        });

      if (projectId) {
        fetch(`/api/projects/${projectId}`)
          .then((r) => r.json())
          .then((proj) => {
            const project = proj as Project;
            if (project.modules) {
              try {
                const parsed = typeof project.modules === "string" ? JSON.parse(project.modules) : project.modules;
                if (Array.isArray(parsed) && parsed.length > 0) {
                  setProjectModules(parsed);
                  if (!parsed.includes(moduleName)) {
                    setModuleName(parsed[0]);
                  }
                }
              } catch (e) {
                console.error("Failed to parse project modules", e);
              }
            }
          })
          .catch(console.error);
      }
    }
  }, [isOpen, projectId]);

  // Form State matching _TASK.schema.json
  const [key, setKey] = useState("");
  const [moduleName, setModuleName] = useState("NGUOI-DUNG");
  const [title, setTitle] = useState("");
  const [priority, setPriority] = useState("MEDIUM");
  const [assignedTo, setAssignedTo] = useState("unassigned");
  const [businessContext, setBusinessContext] = useState("");
  const [description, setDescription] = useState("");
  const [technicalNotes, setTechnicalNotes] = useState("");
  const [outOfScope, setOutOfScope] = useState("");

  // Array fields
  const [stepsText, setStepsText] = useState("1. Tạo schema & API endpoint\n2. Viết unit test\n3. Kiểm tra QC");
  const [qcChecksText, setQCChecksText] = useState("Validate input cả FE & BE\nError response đúng format HTTP status code");
  const [affectedFilesText, setAffectedFilesText] = useState("apps/web/server/routes.ts (MODIFY)\napps/web/src/App.tsx (MODIFY)");
  const [acceptanceTestsText, setAcceptanceTestsText] = useState("GIVEN user gửi request hợp lệ WHEN gọi API THEN trả về HTTP 200 OK");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!title.trim()) {
      toast.error("Vui lòng nhập tiêu đề Task.");
      return;
    }
    if (!key.trim()) {
      toast.error("Vui lòng nhập Mã Task (Key).");
      return;
    }

    setIsSubmitting(true);

    // Parse array objects from text
    const steps = stepsText
      .split("\n")
      .filter((s) => s.trim())
      .map((s, idx) => ({ order: idx + 1, action: s.replace(/^\d+\.\s*/, "").trim(), detail: s }));

    const qcChecks = qcChecksText
      .split("\n")
      .filter((q) => q.trim())
      .map((q) => ({ category: "CODE_QUALITY", item: q.trim(), severity: "MUST", automated: false }));

    const affectedFiles = affectedFilesText
      .split("\n")
      .filter((f) => f.trim())
      .map((f) => {
        const parts = f.trim().split(" ");
        const path = parts[0];
        const changeType = f.includes("CREATE") ? "CREATE" : "MODIFY";
        return { path, changeType, summary: f };
      });

    const acceptanceTests = acceptanceTestsText
      .split("\n")
      .filter((a) => a.trim())
      .map((a, idx) => ({
        id: `AT-${key.trim()}-${String(idx + 1).padStart(2, "0")}`,
        scenario: a.trim(),
        given: "Precondition",
        when: "Action",
        then: "Expected Result",
        testType: "HAPPY_PATH",
      }));

    const taskPayload = {
      board_id: boardId,
      title: `[${key.trim()}] ${title.trim()}`,
      description: description.trim(),
      priority: priority.toLowerCase(),
      assigned_to: assignedTo !== "unassigned" ? assignedTo : undefined,
      metadata: {
        key: key.trim(),
        module: moduleName,
        priority,
        businessContext: businessContext.trim(),
        technicalNotes: technicalNotes.trim(),
        outOfScope: outOfScope.trim(),
        steps,
        qcChecks,
        affectedFiles,
        acceptanceTests,
      },
    };

    try {
      const res = await fetch(`/api/tasks`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(taskPayload),
      });

      if (res.ok) {
        toast.success("Tạo Task mới thành công!");
        setIsOpen(false);
        onTaskCreated?.();
      } else {
        const data = (await res.json().catch(() => ({}))) as any;
        toast.error(data.error?.message || data.message || "Tạo Task thất bại.");
      }
    } catch (err) {
      console.error("Failed to create task", err);
      toast.error("Không thể kết nối tới máy chủ. Vui lòng thử lại sau.");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger>
        {trigger || (
          <Button className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold px-4 py-2 text-sm rounded-xl shadow-xs">
            + Create Task
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="sm:max-w-5xl w-11/12 h-[640px] flex flex-col bg-surface-primary text-content-primary border border-border shadow-2xl rounded-2xl p-0 overflow-hidden">
        {/* Sticky Header */}
        <DialogHeader className="px-6 py-4 border-b border-border shrink-0">
          <DialogTitle className="text-xl font-bold text-content-primary flex items-center gap-2">
            <span>📋</span>
            <span>Tạo Task Mới</span>
            <span className="text-xs font-mono font-normal text-content-tertiary bg-surface-secondary px-2 py-0.5 rounded-md border border-border">
              _TASK.schema.json
            </span>
          </DialogTitle>
        </DialogHeader>

        {/* Form Container */}
        <form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0 overflow-hidden">
          <Tabs defaultValue="basic" className="flex-1 flex flex-col min-h-0">
            {/* Fixed Tab Headers */}
            <div className="px-6 pt-4 shrink-0">
              <TabsList variant="line" className="grid grid-cols-4 w-full bg-surface-secondary border border-border p-1 rounded-xl h-auto gap-1">
                <TabsTrigger
                  value="basic"
                  className="text-xs font-semibold py-2 px-3 rounded-lg border-0 shadow-none data-[state=active]:bg-surface-tertiary data-[state=active]:text-accent after:hidden flex items-center justify-center gap-1.5"
                >
                  <span>📌</span> <span>Thông Tin</span>
                </TabsTrigger>
                <TabsTrigger
                  value="context"
                  className="text-xs font-semibold py-2 px-3 rounded-lg border-0 shadow-none data-[state=active]:bg-surface-tertiary data-[state=active]:text-accent after:hidden flex items-center justify-center gap-1.5"
                >
                  <span>📝</span> <span>Bối Cảnh</span>
                </TabsTrigger>
                <TabsTrigger
                  value="execution"
                  className="text-xs font-semibold py-2 px-3 rounded-lg border-0 shadow-none data-[state=active]:bg-surface-tertiary data-[state=active]:text-accent after:hidden flex items-center justify-center gap-1.5"
                >
                  <span>⚡</span> <span>Quy Trình & QC</span>
                </TabsTrigger>
                <TabsTrigger
                  value="scope"
                  className="text-xs font-semibold py-2 px-3 rounded-lg border-0 shadow-none data-[state=active]:bg-surface-tertiary data-[state=active]:text-accent after:hidden flex items-center justify-center gap-1.5"
                >
                  <span>🧪</span> <span>Files & Acceptance</span>
                </TabsTrigger>
              </TabsList>
            </div>

            {/* Scrollable Tab Content Body */}
            <div className="flex-1 overflow-y-auto px-6 py-4 scrollbar-column">
              {/* Tab 1: Basic Info */}
              <TabsContent value="basic" className="space-y-5 m-0">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                  <div>
                    <Label className="text-sm font-semibold text-content-primary mb-1.5 block">
                      Mã Task (Key) <span className="text-rose-500">*</span>
                    </Label>
                    <Input
                      placeholder="VD: nguoi-dung-00, don-hang-03"
                      value={key}
                      onChange={(e) => setKey(e.target.value)}
                      className="bg-surface-secondary border-border text-content-primary rounded-xl focus:ring-1 focus:ring-accent"
                      required
                    />
                  </div>
                  <div>
                    <Label className="text-sm font-semibold text-content-primary mb-1.5 block">
                      Module Nghiệp Vụ <span className="text-rose-500">*</span>
                    </Label>
                    <Select value={moduleName} onValueChange={(val) => val && setModuleName(val)}>
                      <SelectTrigger className="bg-surface-secondary border-border text-content-primary rounded-xl">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent className="bg-surface-secondary border-border text-content-primary rounded-xl">
                        {(projectModules.length > 0
                          ? projectModules
                          : ["NGUOI-DUNG", "KHOA-HOC", "BAI-HOC", "BAI-TAP", "DON-HANG", "THANH-TOAN", "BAO-CAO", "THONG-BAO", "HE-THONG", "TICH-HOP"]
                        ).map((mod) => (
                          <SelectItem key={mod} value={mod}>
                            {mod}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <div>
                  <Label className="text-sm font-semibold text-content-primary mb-1.5 block">
                    Tiêu Đề Task (Title) <span className="text-rose-500">*</span>
                  </Label>
                  <Input
                    placeholder="VD: T-07.1.00 · Tạo API đăng ký tài khoản học viên"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    className="bg-surface-secondary border-border text-content-primary rounded-xl focus:ring-1 focus:ring-accent"
                    required
                  />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                  <div>
                    <Label className="text-sm font-semibold text-content-primary mb-1.5 block">Mức Độ Ưu Tiên (Priority)</Label>
                    <Select value={priority} onValueChange={(val) => val && setPriority(val)}>
                      <SelectTrigger className="bg-surface-secondary border-border text-content-primary rounded-xl">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent className="bg-surface-secondary border-border text-content-primary rounded-xl">
                        <SelectItem value="CRITICAL">🔴 CRITICAL (Blocking)</SelectItem>
                        <SelectItem value="HIGH">🟠 HIGH (Core Feature)</SelectItem>
                        <SelectItem value="MEDIUM">🟡 MEDIUM (Standard)</SelectItem>
                        <SelectItem value="LOW">🔵 LOW (Nice-to-have)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label className="text-sm font-semibold text-content-primary mb-1.5 block">AI Agent Phụ Trách (Assignee)</Label>
                    <Select value={assignedTo} onValueChange={(val) => val && setAssignedTo(val)}>
                      <SelectTrigger className="bg-surface-secondary border-border text-content-primary rounded-xl">
                        <SelectValue placeholder="Chọn AI Agent..." />
                      </SelectTrigger>
                      <SelectContent className="bg-surface-secondary border-border text-content-primary rounded-xl">
                        <SelectItem value="unassigned">-- Chưa Gán (Unassigned) --</SelectItem>
                        {projectAgents.length > 0 ? (
                          projectAgents.map((agent) => (
                            <SelectItem key={agent.id} value={agent.id}>
                              🤖 {agent.name} {agent.model ? `(${agent.model})` : ""}
                            </SelectItem>
                          ))
                        ) : (
                          <>
                            <SelectItem value="claude-engineer">🤖 Claude Engineer Agent</SelectItem>
                            <SelectItem value="codex-worker">⚡ Codex Worker Agent</SelectItem>
                          </>
                        )}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </TabsContent>

              {/* Tab 2: Context & Tech */}
              <TabsContent value="context" className="space-y-5 m-0">
                <div>
                  <div className="flex items-center justify-between mb-1.5">
                    <Label className="text-sm font-semibold text-content-primary">
                      Bối Cảnh Nghiệp Vụ (Business Context) <span className="text-rose-500">*</span>
                    </Label>
                    <span className="text-[11px] text-content-tertiary">Lý do nghiệp vụ & Giá trị mang lại</span>
                  </div>
                  <Textarea
                    rows={3}
                    placeholder="Mô tả bối cảnh tại sao cần tính năng này..."
                    value={businessContext}
                    onChange={(e) => setBusinessContext(e.target.value)}
                    className="bg-surface-secondary border-border text-content-primary rounded-xl leading-relaxed"
                    required
                  />
                </div>

                <div>
                  <div className="flex items-center justify-between mb-1.5">
                    <Label className="text-sm font-semibold text-content-primary">
                      Mô Tả Kỹ Thuật (Technical Scope & Approach) <span className="text-rose-500">*</span>
                    </Label>
                    <span className="text-[11px] text-content-tertiary">Chi tiết các yêu cầu kỹ thuật cần làm</span>
                  </div>
                  <Textarea
                    rows={4}
                    placeholder="Mô tả chi tiết giải pháp kỹ thuật..."
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    className="bg-surface-secondary border-border text-content-primary rounded-xl leading-relaxed"
                    required
                  />
                </div>

                <div>
                  <div className="flex items-center justify-between mb-1.5">
                    <Label className="text-sm font-semibold text-content-primary">Ghi Chú Kỹ Thuật (Technical Notes)</Label>
                    <span className="text-[11px] text-content-tertiary">Trade-offs, rate limits & Security</span>
                  </div>
                  <Textarea
                    rows={2}
                    placeholder="Lưu ý quan trọng về thiết kế hoặc hạ tầng..."
                    value={technicalNotes}
                    onChange={(e) => setTechnicalNotes(e.target.value)}
                    className="bg-surface-secondary border-border text-content-primary rounded-xl"
                  />
                </div>
              </TabsContent>

              {/* Tab 3: Steps & QC */}
              <TabsContent value="execution" className="grid grid-cols-1 md:grid-cols-2 gap-5 m-0">
                <div>
                  <div className="flex items-center justify-between mb-1.5">
                    <Label className="text-sm font-semibold text-content-primary">Các Bước Thực Hiện (Steps)</Label>
                    <span className="text-[11px] text-content-tertiary">Mỗi dòng 1 bước</span>
                  </div>
                  <Textarea
                    rows={8}
                    value={stepsText}
                    onChange={(e) => setStepsText(e.target.value)}
                    className="bg-surface-secondary border-border text-content-primary rounded-xl font-mono text-xs leading-relaxed"
                  />
                </div>

                <div>
                  <div className="flex items-center justify-between mb-1.5">
                    <Label className="text-sm font-semibold text-content-primary">Tiêu Chuẩn QC (QC Checks)</Label>
                    <span className="text-[11px] text-content-tertiary">Mỗi dòng 1 tiêu chí check</span>
                  </div>
                  <Textarea
                    rows={8}
                    value={qcChecksText}
                    onChange={(e) => setQCChecksText(e.target.value)}
                    className="bg-surface-secondary border-border text-content-primary rounded-xl font-mono text-xs leading-relaxed"
                  />
                </div>
              </TabsContent>

              {/* Tab 4: Files & Tests */}
              <TabsContent value="scope" className="space-y-5 m-0">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                  <div>
                    <div className="flex items-center justify-between mb-1.5">
                      <Label className="text-sm font-semibold text-content-primary">Files Ảnh Hưởng (Affected Files)</Label>
                      <span className="text-[11px] text-content-tertiary">filepath (MODIFY/CREATE)</span>
                    </div>
                    <Textarea
                      rows={4}
                      value={affectedFilesText}
                      onChange={(e) => setAffectedFilesText(e.target.value)}
                      className="bg-surface-secondary border-border text-content-primary rounded-xl font-mono text-xs"
                    />
                  </div>

                  <div>
                    <div className="flex items-center justify-between mb-1.5">
                      <Label className="text-sm font-semibold text-content-primary">Ngoài Phạm Vi (Out Of Scope)</Label>
                      <span className="text-[11px] text-content-tertiary">Những gì không làm trong task</span>
                    </div>
                    <Textarea
                      rows={4}
                      placeholder="VD: Không bao gồm Social Login, Forgot Password..."
                      value={outOfScope}
                      onChange={(e) => setOutOfScope(e.target.value)}
                      className="bg-surface-secondary border-border text-content-primary rounded-xl text-xs"
                    />
                  </div>
                </div>

                <div>
                  <div className="flex items-center justify-between mb-1.5">
                    <Label className="text-sm font-semibold text-content-primary">Kịch Bản Nghiệm Thu (Acceptance Tests)</Label>
                    <span className="text-[11px] text-content-tertiary">Dạng GIVEN - WHEN - THEN</span>
                  </div>
                  <Textarea
                    rows={3}
                    value={acceptanceTestsText}
                    onChange={(e) => setAcceptanceTestsText(e.target.value)}
                    className="bg-surface-secondary border-border text-content-primary rounded-xl font-mono text-xs"
                  />
                </div>
              </TabsContent>
            </div>
          </Tabs>

          {/* Sticky Footer */}
          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-border shrink-0 bg-surface-primary">
            <Button
              type="button"
              variant="outline"
              onClick={() => setIsOpen(false)}
              disabled={isSubmitting}
              className="rounded-xl px-5 py-2 text-sm font-medium border-border hover:bg-surface-secondary"
            >
              Hủy
            </Button>
            <Button
              type="submit"
              disabled={isSubmitting}
              className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold px-6 py-2 text-sm rounded-xl shadow-xs"
            >
              {isSubmitting ? "Đang Tạo..." : "Tạo Task Mới"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}