import type { Project, ProjectDocument, ProjectMember, ProjectRule, Task } from "@vtit-agent-coding/shared";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ProjectRequirementsTab } from "../components/ProjectRequirementsTab";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../components/ui/dialog";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
import { Textarea } from "../components/ui/textarea";
import { BoardPage } from "./BoardPage";

export function ProjectDetailPage() {
  const { projectId } = useParams<{ projectId: string }>();
  const navigate = useNavigate();
  const [project, setProject] = useState<(Project & { board_id?: string }) | null>(null);
  const [tasks, setTasks] = useState<Task[]>([]);
  const [rules, setRules] = useState<ProjectRule[]>([]);
  const [docs, setDocs] = useState<ProjectDocument[]>([]);
  const [members, setMembers] = useState<ProjectMember[]>([]);
  const [agents, setAgents] = useState<any[]>([]);
  const [availableAgents, setAvailableAgents] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  // Modal states for Rule and Doc
  const [ruleModalOpen, setRuleModalOpen] = useState(false);
  const [ruleFileName, setRuleFileName] = useState("");
  const [ruleTitle, setRuleTitle] = useState("");
  const [ruleContent, setRuleContent] = useState("");

  const [docModalOpen, setDocModalOpen] = useState(false);
  const [docCategory, setDocCategory] = useState("Architecture");
  const [docFileName, setDocFileName] = useState("");

  // Agent assign modal state
  const [agentAssignModalOpen, setAgentAssignModalOpen] = useState(false);
  const [selectedAgentId, setSelectedAgentId] = useState("");

  // Invite member modal state
  const [inviteMemberModalOpen, setInviteMemberModalOpen] = useState(false);
  const [inviteEmail, setInviteEmail] = useState("");
  const [inviteRole, setInviteRole] = useState("READ");

  // GitLab config state
  const [gitlabUrl, setGitlabUrl] = useState("");
  const [gitlabProjectId, setGitlabProjectId] = useState("");
  const [gitlabAccessToken, setGitlabAccessToken] = useState("");
  const [gitlabWebhookSecret, setGitlabWebhookSecret] = useState("");
  const [gitlabTestStatus, setGitlabTestStatus] = useState<"idle" | "testing" | "success" | "error">("idle");
  const [gitlabTestMessage, setGitlabTestMessage] = useState("");
  const [docTitle, setDocTitle] = useState("");
  const [docContent, setDocContent] = useState("");

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

  async function loadProjectData(id: string) {
    setIsLoading(true);
    try {
      const [projRes, rulesRes, docsRes, membersRes, planRes] = await Promise.all([
        fetch(`/api/projects/${id}`),
        fetch(`/api/projects/${id}/rules`),
        fetch(`/api/projects/${id}/docs`),
        fetch(`/api/projects/${id}/members`),
        fetch(`/api/projects/${id}/master-plan`),
      ]);

      if (projRes.ok) setProject(await projRes.json());
      if (rulesRes.ok) {
        const d = await rulesRes.json();
        setRules(Array.isArray(d) ? d : []);
      }
      if (docsRes.ok) {
        const d = await docsRes.json();
        setDocs(Array.isArray(d) ? d : []);
      }
      if (membersRes.ok) {
        const d = await membersRes.json();
        setMembers(Array.isArray(d) ? d : []);
      }
      if (planRes.ok) {
        const planData = (await planRes.json()) as { tasks?: Task[] };
        setTasks(Array.isArray(planData.tasks) ? planData.tasks : []);
      }

      // Fetch project agents
      const agentsRes = await fetch(`/api/projects/${id}/agents`);
      if (agentsRes.ok) {
        const d = await agentsRes.json();
        setAgents(Array.isArray(d) ? d : []);
      }

      // Fetch all available agents
      const allAgentsRes = await fetch("/api/agents");
      if (allAgentsRes.ok) {
        const d = await allAgentsRes.json();
        setAvailableAgents(Array.isArray(d) ? d : []);
      }
    } catch (err) {
      console.error("Failed to load project details", err);
    } finally {
      setIsLoading(false);
    }
  }

  async function handleCreateRule(e: React.FormEvent) {
    e.preventDefault();
    if (!projectId || !ruleFileName || !ruleTitle) return;

    try {
      const res = await fetch(`/api/projects/${projectId}/rules`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ file_name: ruleFileName, title: ruleTitle, content: ruleContent }),
      });
      if (res.ok) {
        setRuleModalOpen(false);
        setRuleFileName("");
        setRuleTitle("");
        setRuleContent("");
        loadProjectData(projectId);
      }
    } catch (err) {
      console.error("Failed to create rule", err);
    }
  }

  async function handleCreateDoc(e: React.FormEvent) {
    e.preventDefault();
    if (!projectId || !docFileName || !docTitle) return;

    try {
      const res = await fetch(`/api/projects/${projectId}/docs`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          category: docCategory,
          file_name: docFileName,
          title: docTitle,
          content: docContent,
        }),
      });
      if (res.ok) {
        setDocModalOpen(false);
        setDocFileName("");
        setDocTitle("");
        setDocContent("");
        loadProjectData(projectId);
      }
    } catch (err) {
      console.error("Failed to create doc", err);
    }
  }

  async function handleAssignAgent() {
    if (!projectId || !selectedAgentId) return;
    try {
      const res = await fetch(`/api/projects/${projectId}/agents`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ agent_id: selectedAgentId }),
      });
      if (res.ok) {
        setAgentAssignModalOpen(false);
        setSelectedAgentId("");
        loadProjectData(projectId);
      }
    } catch (err) {
      console.error("Failed to assign agent", err);
    }
  }

  async function handleRemoveAgent(agentId: string) {
    if (!projectId) return;
    try {
      const res = await fetch(`/api/projects/${projectId}/agents/${agentId}`, { method: "DELETE" });
      if (res.ok) loadProjectData(projectId);
    } catch (err) {
      console.error("Failed to remove agent", err);
    }
  }

  async function handleInviteMember(e: React.FormEvent) {
    e.preventDefault();
    if (!projectId || !inviteEmail) return;
    try {
      // Find user by email first
      const searchRes = await fetch(`/api/users/search?q=${encodeURIComponent(inviteEmail)}`);
      if (!searchRes.ok) throw new Error("Search user failed");
      const users = await searchRes.json();
      if (!Array.isArray(users) || users.length === 0) {
        alert("Không tìm thấy người dùng với email này!");
        return;
      }
      const targetUser = users.find((u: any) => u.email.toLowerCase() === inviteEmail.toLowerCase()) || users[0];

      const res = await fetch(`/api/projects/${projectId}/members`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ user_id: targetUser.id, role: inviteRole }),
      });
      if (res.ok) {
        setInviteMemberModalOpen(false);
        setInviteEmail("");
        setInviteRole("READ");
        loadProjectData(projectId);
      }
    } catch (err) {
      console.error("Failed to invite member", err);
    }
  }

  async function handleChangeMemberRole(userId: string, newRole: string) {
    if (!projectId) return;
    try {
      const res = await fetch(`/api/projects/${projectId}/members`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ user_id: userId, role: newRole }),
      });
      if (res.ok) loadProjectData(projectId);
    } catch (err) {
      console.error("Failed to change member role", err);
    }
  }

  async function handleRemoveMember(userId: string) {
    if (!projectId) return;
    try {
      const res = await fetch(`/api/projects/${projectId}/members/${userId}`, { method: "DELETE" });
      if (res.ok) loadProjectData(projectId);
    } catch (err) {
      console.error("Failed to remove member", err);
    }
  }

  async function handleSaveGitLabConfig() {
    if (!projectId) return;
    try {
      await fetch(`/api/projects/${projectId}/gitlab-config`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          gitlab_url: gitlabUrl,
          gitlab_project_id: gitlabProjectId,
          access_token: gitlabAccessToken,
          webhook_secret: gitlabWebhookSecret,
        }),
      });
    } catch (err) {
      console.error("Failed to save GitLab config", err);
    }
  }

  async function handleTestGitLabConnection() {
    if (!projectId) return;
    setGitlabTestStatus("testing");
    setGitlabTestMessage("");
    try {
      const res = await fetch(`/api/projects/${projectId}/gitlab-config/test`, { method: "POST" });
      if (res.ok) {
        setGitlabTestStatus("success");
        setGitlabTestMessage("Kết nối GitLab thành công!");
      } else {
        const data = (await res.json().catch(() => ({}))) as any;
        setGitlabTestStatus("error");
        setGitlabTestMessage(data.error || "Kết nối thất bại.");
      }
    } catch (_err) {
      setGitlabTestStatus("error");
      setGitlabTestMessage("Không thể kết nối đến server.");
    }
  }

  function getRoleBadgeClasses(role: string) {
    switch (role) {
      case "READ":
        return "bg-blue-500/10 text-blue-600 border-blue-500/20";
      case "DEVELOPER":
        return "bg-amber-500/10 text-amber-600 border-amber-500/20";
      case "MAINTAINER":
        return "bg-red-500/10 text-red-600 border-red-500/20";
      default:
        return "bg-primary/10 text-primary border-primary/20";
    }
  }

  if (isLoading) {
    return <div className="p-8 text-center text-muted-foreground">Đang tải dữ liệu dự án...</div>;
  }

  if (!project) {
    return <div className="p-8 text-center text-destructive">Không tìm thấy thông tin dự án.</div>;
  }

  return (
    <div className="w-full px-8 py-6 space-y-6">
      {/* Project Title Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 border-b pb-4">
        <div>
          <div className="flex items-center gap-3">
            <span className="px-3 py-1 rounded text-sm font-mono font-bold bg-primary/10 text-primary border border-primary/20">{project.code}</span>
            <h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
          </div>
          {project.description && <p className="text-muted-foreground mt-1 text-sm">{project.description}</p>}
        </div>
        {project.board_id && (
          <Button className="bg-primary hover:bg-primary/90 text-primary-foreground" onClick={() => navigate(`/boards/${project.board_id}`)}>
            Xem Board Kanban →
          </Button>
        )}
      </div>

      <Tabs defaultValue="master-plan" className="w-full space-y-6">
        <TabsList className="flex flex-row w-full justify-start overflow-x-auto p-1 bg-muted h-auto max-w-5xl scrollbar-none shrink-0">
          <TabsTrigger value="master-plan" className="shrink-0 px-4 py-1.5">
            🗺️ Master Plan
          </TabsTrigger>
          <TabsTrigger value="kanban" className="shrink-0 px-4 py-1.5">
            📋 Kanban
          </TabsTrigger>
          <TabsTrigger value="rules" className="shrink-0 px-4 py-1.5">
            📜 Rules ({rules.length})
          </TabsTrigger>
          <TabsTrigger value="docs" className="shrink-0 px-4 py-1.5">
            📚 Tri Thức ({docs.length})
          </TabsTrigger>
          <TabsTrigger value="repos-agents" className="shrink-0 px-4 py-1.5">
            🤖 Agents & Repos
          </TabsTrigger>
          <TabsTrigger value="requirements" className="shrink-0 px-4 py-1.5">
            📝 Yêu Cầu
          </TabsTrigger>
          <TabsTrigger value="settings" className="shrink-0 px-4 py-1.5">
            ⚙️ Phân Quyền & Settings
          </TabsTrigger>
        </TabsList>

        {/* Tab 1: Master Plan */}
        <TabsContent value="master-plan">
          <Card>
            <CardHeader>
              <CardTitle>Lộ Trình & Tiến Độ Kế Hoạch Tổng Thể (Master Plan)</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {tasks.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  Chưa có công việc nào trong Master Plan. Hãy thêm công việc vào Kanban Board!
                </div>
              ) : (
                <div className="space-y-4">
                  {["Phase 1", "Phase 2", "Phase 3"].map((phase) => {
                    const phaseTasks = tasks.filter((t) => (t as any).phase === phase || (!(t as any).phase && phase === "Phase 1"));
                    const doneCount = phaseTasks.filter((t) => t.status === "done").length;
                    const percent = phaseTasks.length > 0 ? Math.round((doneCount / phaseTasks.length) * 100) : 0;

                    return (
                      <div key={phase} className="p-4 border rounded-lg bg-card space-y-3">
                        <div className="flex items-center justify-between">
                          <h3 className="font-semibold text-lg flex items-center gap-2">
                            <span>🚀 {phase}</span>
                            <span className="text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground">
                              {doneCount}/{phaseTasks.length} Đã Xong ({percent}%)
                            </span>
                          </h3>
                        </div>
                        <div className="w-full bg-muted h-2 rounded-full overflow-hidden">
                          <div className="bg-primary h-full transition-all duration-300" style={{ width: `${percent}%` }} />
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 pt-2">
                          {phaseTasks.map((task) => (
                            <div key={task.id} className="p-3 border rounded text-sm bg-background flex justify-between items-center">
                              <div>
                                <span className="font-mono text-xs text-muted-foreground mr-2">#{task.seq}</span>
                                <span className="font-medium">{task.title}</span>
                              </div>
                              <span
                                className={`px-2 py-0.5 rounded text-xs uppercase font-mono ${
                                  task.status === "done"
                                    ? "bg-emerald-500/10 text-emerald-500 border border-emerald-500/20"
                                    : "bg-amber-500/10 text-amber-500 border border-amber-500/20"
                                }`}
                              >
                                {task.status}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Tab 2: Kanban */}
        <TabsContent
          value="kanban"
          className="border rounded-lg overflow-hidden flex flex-col bg-background shrink-0"
          style={{ height: "calc(100vh - 240px)", minHeight: "550px" }}
        >
          {project.board_id ? <BoardPage /> : <div className="p-8 text-center text-muted-foreground">Dự án này chưa được khởi tạo Kanban Board.</div>}
        </TabsContent>

        {/* Tab 3: Rules */}
        <TabsContent value="rules">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Quy Tắc Dự Án (Project Rules)</CardTitle>
              <Dialog open={ruleModalOpen} onOpenChange={setRuleModalOpen}>
                <DialogTrigger>
                  <Button size="sm">+ Thêm Tệp Quy Tắc (.md)</Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Thêm File Quy Tắc Mới</DialogTitle>
                  </DialogHeader>
                  <form onSubmit={handleCreateRule} className="space-y-4 py-2">
                    <div>
                      <Label>Tên Tệp (FileName)</Label>
                      <Input placeholder="VD: coding-standards.md" value={ruleFileName} onChange={(e) => setRuleFileName(e.target.value)} required />
                    </div>
                    <div>
                      <Label>Tiêu Đề Quy Tắc</Label>
                      <Input
                        placeholder="VD: Quy chuẩn lập trình React & Tailwind"
                        value={ruleTitle}
                        onChange={(e) => setRuleTitle(e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label>Nội Dung Markdown</Label>
                      <Textarea
                        rows={6}
                        placeholder="Nhập các quy tắc tại đây..."
                        value={ruleContent}
                        onChange={(e) => setRuleContent(e.target.value)}
                      />
                    </div>
                    <div className="flex justify-end gap-2">
                      <Button type="button" variant="outline" onClick={() => setRuleModalOpen(false)}>
                        Hủy
                      </Button>
                      <Button type="submit">Lưu File Quy Tắc</Button>
                    </div>
                  </form>
                </DialogContent>
              </Dialog>
            </CardHeader>
            <CardContent className="space-y-4">
              {rules.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  Chưa có tệp quy tắc nào. Thêm tệp quy tắc để hướng dẫn các AI Agents thực hiện dự án!
                </div>
              ) : (
                rules.map((rule) => (
                  <div key={rule.id} className="p-4 border rounded bg-card space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <span className="font-mono text-xs px-2 py-0.5 bg-muted rounded">{rule.file_name}</span>
                        <h4 className="font-bold">{rule.title}</h4>
                      </div>
                    </div>
                    <pre className="p-3 bg-muted/50 rounded text-xs font-mono whitespace-pre-wrap max-h-40 overflow-y-auto">{rule.content}</pre>
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Tab 4: Docs */}
        <TabsContent value="docs">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Tài Liệu & Kho Tri Thức (Documents)</CardTitle>
              <Dialog open={docModalOpen} onOpenChange={setDocModalOpen}>
                <DialogTrigger>
                  <Button size="sm">+ Thêm Tài Liệu (.md)</Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Thêm Tài Liệu Mới</DialogTitle>
                  </DialogHeader>
                  <form onSubmit={handleCreateDoc} className="space-y-4 py-2">
                    <div>
                      <Label>Chuyên Mục / Danh Mục</Label>
                      <Input
                        placeholder="VD: Architecture, API, Security"
                        value={docCategory}
                        onChange={(e) => setDocCategory(e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label>Tên Tệp (FileName)</Label>
                      <Input placeholder="VD: system-architecture.md" value={docFileName} onChange={(e) => setDocFileName(e.target.value)} required />
                    </div>
                    <div>
                      <Label>Tiêu Đề Tài Liệu</Label>
                      <Input
                        placeholder="VD: Kiến trúc Hệ thống PostgreSQL & Cloudflare Workers"
                        value={docTitle}
                        onChange={(e) => setDocTitle(e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label>Nội Dung Markdown</Label>
                      <Textarea
                        rows={6}
                        placeholder="Nhập tài liệu tri thức tại đây..."
                        value={docContent}
                        onChange={(e) => setDocContent(e.target.value)}
                      />
                    </div>
                    <div className="flex justify-end gap-2">
                      <Button type="button" variant="outline" onClick={() => setDocModalOpen(false)}>
                        Hủy
                      </Button>
                      <Button type="submit">Lưu Tài Liệu</Button>
                    </div>
                  </form>
                </DialogContent>
              </Dialog>
            </CardHeader>
            <CardContent className="space-y-4">
              {docs.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  Chưa có tài liệu tri thức nào. Hãy lưu trữ các file kiến trúc & spec tại đây!
                </div>
              ) : (
                docs.map((doc) => (
                  <div key={doc.id} className="p-4 border rounded bg-card space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <span className="font-mono text-xs px-2 py-0.5 bg-primary/10 text-primary rounded">{doc.category}</span>
                        <span className="font-mono text-xs px-2 py-0.5 bg-muted rounded">{doc.file_name}</span>
                        <h4 className="font-bold">{doc.title}</h4>
                      </div>
                    </div>
                    <pre className="p-3 bg-muted/50 rounded text-xs font-mono whitespace-pre-wrap max-h-40 overflow-y-auto">{doc.content}</pre>
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Tab 5: Repos & Agents */}
        <TabsContent value="repos-agents">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>AI Agents & Repositories Được Gán Về Dự Án</CardTitle>
              <Dialog open={agentAssignModalOpen} onOpenChange={setAgentAssignModalOpen}>
                <DialogTrigger>
                  <Button size="sm">+ Gán Agent</Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Gán AI Agent Vào Dự Án</DialogTitle>
                  </DialogHeader>
                  <div className="space-y-4 py-2">
                    <div>
                      <Label>Chọn Agent</Label>
                      <Select value={selectedAgentId} onValueChange={(val) => val && setSelectedAgentId(val)}>
                        <SelectTrigger>
                          <SelectValue placeholder="Chọn AI Agent..." />
                        </SelectTrigger>
                        <SelectContent>
                          {availableAgents
                            .filter((a) => !agents.some((assigned) => assigned.id === a.id))
                            .map((agent) => (
                              <SelectItem key={agent.id} value={agent.id}>
                                🤖 {agent.name} {agent.model ? `(${agent.model})` : ""}
                              </SelectItem>
                            ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="flex justify-end gap-2">
                      <Button type="button" variant="outline" onClick={() => setAgentAssignModalOpen(false)}>
                        Hủy
                      </Button>
                      <Button onClick={handleAssignAgent} disabled={!selectedAgentId}>
                        Gán Agent
                      </Button>
                    </div>
                  </div>
                </DialogContent>
              </Dialog>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="p-4 border rounded bg-muted/20">
                <h4 className="font-semibold text-sm mb-2">🦊 GitLab Repository Liên Thông:</h4>
                {project.gitlab_url ? (
                  <div className="font-mono text-xs text-primary">{project.gitlab_url}</div>
                ) : (
                  <div className="text-xs text-muted-foreground">Chưa gán repository GitLab Enterprise. Cấu hình tại tab Settings.</div>
                )}
              </div>

              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <h4 className="font-semibold text-sm">🤖 Danh Sách AI Agents Được Phép Thực Thi Task Trong Dự Án:</h4>
                </div>
                <div className="border rounded p-4 text-sm bg-card space-y-2">
                  <p className="text-xs text-muted-foreground">
                    Các Agent được gán vào dự án sẽ tự động xuất hiện trong danh sách Assignee khi giao task trong Kanban Board.
                  </p>
                  {agents.length === 0 ? (
                    <div className="text-center py-4 text-muted-foreground text-sm">Chưa có agent nào được gán. Nhấn "+ Gán Agent" để thêm.</div>
                  ) : (
                    <div className="space-y-2 pt-2">
                      {agents.map((agent) => (
                        <div key={agent.id} className="flex items-center justify-between p-2 border rounded bg-background">
                          <div className="flex items-center gap-2">
                            <span className="font-mono text-xs px-2.5 py-1 bg-primary/10 text-primary font-bold rounded border border-primary/20">
                              🤖 {agent.name} {agent.model ? `(${agent.model})` : ""}
                            </span>
                            {agent.status && (
                              <Badge variant="outline" className="text-[10px]">
                                {agent.status}
                              </Badge>
                            )}
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="text-destructive hover:text-destructive hover:bg-destructive/10 text-xs"
                            onClick={() => handleRemoveAgent(agent.id)}
                          >
                            ✕ Gỡ
                          </Button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="requirements">
          <ProjectRequirementsTab projectId={projectId!} />
        </TabsContent>

        {/* Tab 6: Settings & Members */}
        <TabsContent value="settings">
          <div className="space-y-6">
            {/* Members RBAC Section */}
            <Card>
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>Thành Viên & Phân Quyền Dự Án (RBAC)</CardTitle>
                <Dialog open={inviteMemberModalOpen} onOpenChange={setInviteMemberModalOpen}>
                  <DialogTrigger>
                    <Button size="sm">+ Mời Thành Viên</Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Mời Thành Viên Mới</DialogTitle>
                    </DialogHeader>
                    <form onSubmit={handleInviteMember} className="space-y-4 py-2">
                      <div>
                        <Label>Email Thành Viên</Label>
                        <Input
                          type="email"
                          placeholder="user@example.com"
                          value={inviteEmail}
                          onChange={(e) => setInviteEmail(e.target.value)}
                          required
                        />
                      </div>
                      <div>
                        <Label>Vai Trò (Role)</Label>
                        <Select value={inviteRole} onValueChange={(val) => val && setInviteRole(val)}>
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="READ">🔵 READ (Chỉ Xem)</SelectItem>
                            <SelectItem value="DEVELOPER">🟡 DEVELOPER (Phát Triển)</SelectItem>
                            <SelectItem value="MAINTAINER">🔴 MAINTAINER (Quản Trị)</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="flex justify-end gap-2">
                        <Button type="button" variant="outline" onClick={() => setInviteMemberModalOpen(false)}>
                          Hủy
                        </Button>
                        <Button type="submit">Gửi Lời Mời</Button>
                      </div>
                    </form>
                  </DialogContent>
                </Dialog>
              </CardHeader>
              <CardContent className="space-y-3">
                <h4 className="font-semibold text-sm">Danh Sách Thành Viên:</h4>
                {members.length === 0 ? (
                  <div className="text-center py-4 text-muted-foreground text-sm">Chưa có thành viên nào. Nhấn "+ Mời Thành Viên" để thêm.</div>
                ) : (
                  <div className="border rounded divide-y">
                    {members.map((m) => (
                      <div key={m.id} className="p-3 flex items-center justify-between text-sm">
                        <div className="flex items-center gap-2">
                          <span className="font-medium">{m.user_name || m.user_id}</span>
                          {m.user_email && <span className="text-xs text-muted-foreground">({m.user_email})</span>}
                        </div>
                        <div className="flex items-center gap-2">
                          <Select value={m.role} onValueChange={(newRole) => newRole && handleChangeMemberRole(m.user_id, newRole)}>
                            <SelectTrigger className="w-[160px] h-8 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="READ">🔵 READ</SelectItem>
                              <SelectItem value="DEVELOPER">🟡 DEVELOPER</SelectItem>
                              <SelectItem value="MAINTAINER">🔴 MAINTAINER</SelectItem>
                            </SelectContent>
                          </Select>
                          <Badge variant="outline" className={`font-mono text-[10px] px-2 py-0.5 ${getRoleBadgeClasses(m.role)}`}>
                            {m.role}
                          </Badge>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="text-destructive hover:text-destructive hover:bg-destructive/10 text-xs h-8"
                            onClick={() => handleRemoveMember(m.user_id)}
                          >
                            ✕
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

            {/* GitLab Enterprise Config Section */}
            <Card>
              <CardHeader>
                <CardTitle>🦊 Cấu Hình GitLab Enterprise</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label>GitLab URL (Custom Domain)</Label>
                    <Input placeholder="https://gitlab.company.com" value={gitlabUrl} onChange={(e) => setGitlabUrl(e.target.value)} />
                  </div>
                  <div>
                    <Label>GitLab Project ID</Label>
                    <Input placeholder="VD: 42" value={gitlabProjectId} onChange={(e) => setGitlabProjectId(e.target.value)} />
                  </div>
                  <div>
                    <Label>Access Token</Label>
                    <Input
                      type="password"
                      placeholder="glpat-xxxxxxxxxxxxxxxxxxxx"
                      value={gitlabAccessToken}
                      onChange={(e) => setGitlabAccessToken(e.target.value)}
                    />
                  </div>
                  <div>
                    <Label>Webhook Secret</Label>
                    <Input
                      type="password"
                      placeholder="webhook-secret-token"
                      value={gitlabWebhookSecret}
                      onChange={(e) => setGitlabWebhookSecret(e.target.value)}
                    />
                  </div>
                </div>
                <div className="flex items-center gap-3 pt-2">
                  <Button onClick={handleSaveGitLabConfig}>Lưu Cấu Hình GitLab</Button>
                  <Button variant="outline" onClick={handleTestGitLabConnection} disabled={gitlabTestStatus === "testing"}>
                    {gitlabTestStatus === "testing" ? "Đang kiểm tra..." : "Kiểm Tra Kết Nối"}
                  </Button>
                  {gitlabTestMessage && (
                    <span className={`text-sm font-medium ${gitlabTestStatus === "success" ? "text-emerald-600" : "text-destructive"}`}>
                      {gitlabTestMessage}
                    </span>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}