"use client";

import React, { useState, useMemo, useCallback, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import {
  Plus,
  RotateCcw,
  Save,
  Pencil,
  Trash2,
  ChevronRight,
  FolderOpen,
  Rocket,
  ClipboardList,
  BarChart3,
  Users,
  FileText,
  Loader2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import {
  getProjectList,
  createProject,
  updateProject,
  getTasksByProject,
  createTask,
  updateTask,
  deleteTask,
} from "@/lib/api/design";

// --- Types ---
type ProjectStatus = "진행중" | "계획" | "보류" | "완료";
type TaskStatus = "대기" | "진행중" | "검토중" | "완료";
type RelationType = "sub" | "depend" | "related";

interface WorkLog {
  date: string;
  hours: number;
  desc: string;
  progressBefore: number;
  progressAfter: number;
  author: string;
}

interface Issue {
  id: number;
  title: string;
  status: string;
  priority: string;
  desc: string;
  registeredBy: string;
  registeredDate: string;
  resolvedDate?: string;
}

interface Task {
  id?: string;
  name: string;
  category: string;
  assignee: string;
  start: string;
  end: string;
  status: TaskStatus;
  progress: number;
  remark: string;
  workLogs: WorkLog[];
  issues: Issue[];
}

interface Project {
  id: string;
  projectNo: string;
  name: string;
  status: ProjectStatus;
  pm: string;
  customer: string;
  startDate: string;
  endDate: string;
  sourceNo: string;
  desc: string;
  progress: number;
  parentId: string | null;
  relation: RelationType | null;
  tasks: Task[];
}

// API 응답(snake_case) -> 프론트(camelCase) 매핑
function mapWorkLog(w: any): WorkLog {
  const dt = w.start_dt || w.date;
  const date = typeof dt === "string" ? dt.split("T")[0] : "";
  return {
    date,
    hours: Number(w.hours) || 0,
    desc: w.description || w.desc || "",
    progressBefore: Number(w.progress_before) || 0,
    progressAfter: Number(w.progress_after) || 0,
    author: w.author || "",
  };
}

function mapIssue(i: any): Issue {
  return {
    id: i.id,
    title: i.title || "",
    status: i.status || "",
    priority: i.priority || "",
    desc: i.description || i.desc || "",
    registeredBy: i.registered_by || "",
    registeredDate: i.registered_date || "",
    resolvedDate: i.resolved_date,
  };
}

function mapTask(t: any): Task {
  const workLogs = (t.work_logs || t.workLogs || []).map(mapWorkLog);
  const issues = (t.issues || []).map(mapIssue);
  const start = t.start_date || t.start || "";
  const end = t.end_date || t.end || "";
  return {
    id: t.id,
    name: t.name || "",
    category: t.category || "기구설계",
    assignee: t.assignee || "",
    start: typeof start === "string" ? start.split("T")[0] : "",
    end: typeof end === "string" ? end.split("T")[0] : "",
    status: (t.status || "대기") as TaskStatus,
    progress: Number(t.progress) || 0,
    remark: t.remark || "",
    workLogs,
    issues,
  };
}

function mapProject(p: any): Project {
  const tasks = (p.tasks || []).map(mapTask);
  return {
    id: p.id,
    projectNo: p.project_no || p.id,
    name: p.name || "",
    status: (p.status || "계획") as ProjectStatus,
    pm: p.pm || "",
    customer: p.customer || "",
    startDate: (p.start_date || "").toString().split("T")[0],
    endDate: (p.end_date || "").toString().split("T")[0],
    sourceNo: p.source_no || "",
    desc: p.description || p.desc || "",
    progress: Number(p.progress) || 0,
    parentId: p.parent_id || null,
    relation: (p.relation_type || p.relation) as RelationType | null,
    tasks,
  };
}

// --- 상태 색상 ---
const getStatusColor = (status: ProjectStatus) => {
  switch (status) {
    case "진행중":
      return "bg-blue-100 text-blue-800 border-blue-200";
    case "계획":
      return "bg-slate-100 text-slate-800 border-slate-200";
    case "보류":
      return "bg-amber-100 text-amber-800 border-amber-200";
    case "완료":
      return "bg-emerald-100 text-emerald-800 border-emerald-200";
    default:
      return "bg-gray-100 text-gray-800 border-gray-200";
  }
};

const getTaskStatusColor = (status: string) => {
  switch (status) {
    case "대기":
      return "bg-gray-100 text-gray-700";
    case "진행중":
      return "bg-blue-100 text-blue-800";
    case "검토중":
      return "bg-amber-100 text-amber-800";
    case "완료":
      return "bg-emerald-100 text-emerald-800";
    case "지연":
      return "bg-rose-100 text-rose-800";
    default:
      return "bg-gray-100 text-gray-700";
  }
};

const getRelationLabel = (r: RelationType | null) => {
  if (!r) return "";
  const m: Record<RelationType, string> = {
    sub: "하위",
    depend: "종속",
    related: "연관",
  };
  return m[r];
};

const getRelationColor = (r: RelationType | null) => {
  if (!r) return "";
  const m: Record<RelationType, string> = {
    sub: "bg-blue-100 text-blue-700",
    depend: "bg-amber-100 text-amber-800",
    related: "bg-purple-100 text-purple-700",
  };
  return m[r];
};

const categoryIcons: Record<string, string> = {
  기구설계: "⚙️",
  전장설계: "⚡",
  SW개발: "💻",
  "구매/조달": "📦",
  "조립/시운전": "🔧",
  "검토/승인": "✅",
};

const progressColor = (p: number) =>
  p >= 80 ? "bg-emerald-500" : p >= 40 ? "bg-blue-500" : p > 0 ? "bg-amber-500" : "bg-gray-300";

const progressTextColor = (p: number) =>
  p >= 80 ? "text-emerald-600" : p >= 40 ? "text-blue-600" : p > 0 ? "text-amber-600" : "text-gray-400";

// --- Helper functions ---
function getChildren(projects: Project[], parentId: string): Project[] {
  return projects.filter((p) => p.parentId === parentId);
}

function getAllDescendants(projects: Project[], parentId: string): Project[] {
  const children = getChildren(projects, parentId);
  let all = [...children];
  children.forEach((c) => {
    all = all.concat(getAllDescendants(projects, c.id));
  });
  return all;
}

// --- Component ---
export default function DesignProjectPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});

  // 검색
  const [searchStatus, setSearchStatus] = useState("all");
  const [searchPM, setSearchPM] = useState("all");
  const [searchKeyword, setSearchKeyword] = useState("");

  // 상세 탭
  const [detailTab, setDetailTab] = useState("wbs");

  // 모달
  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
  const [isTaskDetailOpen, setIsTaskDetailOpen] = useState(false);
  const [editingTaskIdx, setEditingTaskIdx] = useState(-1);
  const [taskDetailIdx, setTaskDetailIdx] = useState(-1);
  const [taskDetailTab, setTaskDetailTab] = useState("log");

  // 프로젝트 폼
  const [formProjectId, setFormProjectId] = useState("");
  const [formProjectNo, setFormProjectNo] = useState("");
  const [formName, setFormName] = useState("");
  const [formStartDate, setFormStartDate] = useState("");
  const [formEndDate, setFormEndDate] = useState("");
  const [formPM, setFormPM] = useState("");
  const [formCustomer, setFormCustomer] = useState("");
  const [formSourceNo, setFormSourceNo] = useState("");
  const [formDesc, setFormDesc] = useState("");
  const [formParentId, setFormParentId] = useState("");
  const [formRelation, setFormRelation] = useState<RelationType>("sub");

  // 태스크 폼
  const [tName, setTName] = useState("");
  const [tCategory, setTCategory] = useState("기구설계");
  const [tAssignee, setTAssignee] = useState("");
  const [tStart, setTStart] = useState("");
  const [tEnd, setTEnd] = useState("");
  const [tStatus, setTStatus] = useState<TaskStatus>("대기");
  const [tProgress, setTProgress] = useState(0);
  const [tRemark, setTRemark] = useState("");

  const fetchProjects = useCallback(async () => {
    setLoading(true);
    try {
      const res = await getProjectList();
      if (res.success && res.data) {
        const mapped = (res.data as any[]).map(mapProject);
        setProjects(mapped);
      } else {
        setProjects([]);
      }
    } catch {
      toast.error("프로젝트 목록을 불러오는데 실패했습니다.");
      setProjects([]);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchProjects();
  }, [fetchProjects]);

  const fetchTaskDetails = useCallback(async (projectId: string) => {
    try {
      const res = await getTasksByProject(projectId);
      if (res.success && res.data) {
        const tasks = (res.data as any[]).map(mapTask);
        setProjects((prev) =>
          prev.map((p) => (p.id === projectId ? { ...p, tasks } : p))
        );
      }
    } catch {
      toast.error("업무 상세를 불러오는데 실패했습니다.");
    }
  }, []);

  // 필터링
  const filteredProjects = useMemo(() => {
    if (searchStatus === "all" && searchPM === "all" && !searchKeyword) return projects;

    const matched = new Set<string>();
    projects.forEach((p) => {
      let pass = true;
      if (searchStatus !== "all" && p.status !== searchStatus) pass = false;
      if (searchPM !== "all" && p.pm !== searchPM) pass = false;
      if (searchKeyword) {
        const str = [p.projectNo, p.name, p.customer, p.pm, p.sourceNo].join(" ").toLowerCase();
        if (!str.includes(searchKeyword.toLowerCase())) pass = false;
      }
      if (pass) matched.add(p.id);
    });

    const result = new Set(matched);
    matched.forEach((id) => {
      getAllDescendants(projects, id).forEach((d) => result.add(d.id));
    });
    matched.forEach((id) => {
      let current = projects.find((p) => p.id === id);
      while (current?.parentId) {
        result.add(current.parentId);
        current = projects.find((p) => p.id === current!.parentId);
      }
    });

    return projects.filter((p) => result.has(p.id));
  }, [projects, searchStatus, searchPM, searchKeyword]);

  const selectedProject = useMemo(
    () => projects.find((p) => p.id === selectedId),
    [projects, selectedId]
  );

  // 트리 렌더
  const buildTreeRows = useCallback(
    (parentId: string | null, depth: number): { project: Project; depth: number }[] => {
      const children = filteredProjects.filter((p) => p.parentId === parentId);
      const rows: { project: Project; depth: number }[] = [];
      children.forEach((child) => {
        rows.push({ project: child, depth });
        if (expandedIds[child.id] !== false) {
          rows.push(...buildTreeRows(child.id, depth + 1));
        }
      });
      return rows;
    },
    [filteredProjects, expandedIds]
  );

  const treeRows = useMemo(() => buildTreeRows(null, 0), [buildTreeRows]);

  const toggleExpand = (id: string) => {
    setExpandedIds((prev) => ({
      ...prev,
      [id]: prev[id] === undefined ? false : !prev[id],
    }));
  };

  const handleResetSearch = () => {
    setSearchStatus("all");
    setSearchPM("all");
    setSearchKeyword("");
  };

  // --- 프로젝트 모달 ---
  const openProjectModal = (editProject?: Project, presetParentId?: string) => {
    if (editProject) {
      setFormProjectId(editProject.id);
      setFormProjectNo(editProject.projectNo);
      setFormName(editProject.name);
      setFormStartDate(editProject.startDate);
      setFormEndDate(editProject.endDate);
      setFormPM(editProject.pm);
      setFormCustomer(editProject.customer);
      setFormSourceNo(editProject.sourceNo);
      setFormDesc(editProject.desc);
      setFormParentId(editProject.parentId || "");
      setFormRelation((editProject.relation as RelationType) || "sub");
    } else {
      const maxNum = projects.reduce((max, p) => {
        const match = p.projectNo?.match(/PJ-\d{4}-(\d+)/);
        const num = match ? parseInt(match[1], 10) : 0;
        return num > max ? num : max;
      }, 0);
      const year = new Date().getFullYear();
      const newProjectNo = `PJ-${year}-${String(maxNum + 1).padStart(4, "0")}`;
      setFormProjectId("");
      setFormProjectNo(newProjectNo);
      setFormName("");
      setFormStartDate(new Date().toISOString().split("T")[0]);
      setFormEndDate("");
      setFormPM("");
      setFormCustomer("");
      setFormSourceNo("");
      setFormDesc("");
      setFormParentId(presetParentId || "");
      setFormRelation("sub");

      if (presetParentId) {
        const parent = projects.find((p) => p.id === presetParentId);
        if (parent) {
          setFormCustomer(parent.customer);
          setFormEndDate(parent.endDate);
        }
      }
    }
    setIsProjectModalOpen(true);
  };

  const handleSaveProject = async () => {
    if (!formName.trim()) { toast.error("프로젝트명을 입력하세요."); return; }
    if (!formStartDate) { toast.error("시작일을 입력하세요."); return; }
    if (!formEndDate) { toast.error("종료예정일을 입력하세요."); return; }
    if (!formPM) { toast.error("PM을 선택하세요."); return; }

    const existing = projects.find((p) => p.id === formProjectId);
    const payload = {
      project_no: formProjectNo || formProjectId,
      name: formName,
      status: (existing?.status || "계획") as ProjectStatus,
      pm: formPM,
      customer: formCustomer,
      start_date: formStartDate,
      end_date: formEndDate,
      source_no: formSourceNo,
      description: formDesc,
      progress: existing?.progress ?? 0,
      parent_id: formParentId || null,
      relation_type: formParentId ? formRelation : null,
    };

    const isEdit = !!formProjectId;
    try {
      if (isEdit) {
        const res = await updateProject(formProjectId, payload);
        if (res.success) {
          toast.success("프로젝트가 수정되었습니다.");
          await fetchProjects();
          setIsProjectModalOpen(false);
        } else {
          toast.error(res.message || "프로젝트 수정에 실패했습니다.");
        }
      } else {
        const res = await createProject(payload);
        if (res.success && res.data) {
          toast.success("프로젝트가 등록되었습니다.");
          await fetchProjects();
          if (formParentId) {
            setExpandedIds((prev) => ({ ...prev, [formParentId]: true }));
          }
          const projectId = (res.data as any).id;
          setSelectedId(projectId);
          fetchTaskDetails(projectId);
          setIsProjectModalOpen(false);
        } else {
          toast.error(res.message || "프로젝트 등록에 실패했습니다.");
        }
      }
    } catch {
      toast.error("프로젝트 저장에 실패했습니다.");
    }
  };

  // --- 태스크 모달 ---
  const openTaskModal = (idx?: number) => {
    if (idx !== undefined && selectedProject) {
      const t = selectedProject.tasks[idx];
      setEditingTaskIdx(idx);
      setTName(t.name);
      setTCategory(t.category);
      setTAssignee(t.assignee);
      setTStart(t.start);
      setTEnd(t.end);
      setTStatus(t.status);
      setTProgress(t.progress);
      setTRemark(t.remark);
    } else {
      setEditingTaskIdx(-1);
      setTName("");
      setTCategory("기구설계");
      setTAssignee("");
      setTStart(selectedProject?.startDate || "");
      setTEnd(selectedProject?.endDate || "");
      setTStatus("대기");
      setTProgress(0);
      setTRemark("");
    }
    setIsTaskModalOpen(true);
  };

  const handleSaveTask = async () => {
    if (!tName.trim()) { toast.error("업무명을 입력하세요."); return; }
    if (!tAssignee) { toast.error("담당자를 선택하세요."); return; }
    if (!tStart || !tEnd) { toast.error("시작일과 종료일을 입력하세요."); return; }
    if (!selectedId) return;

    const payload = {
      name: tName,
      category: tCategory,
      assignee: tAssignee,
      start_date: tStart,
      end_date: tEnd,
      status: tStatus,
      progress: tProgress,
      priority: "보통",
      remark: tRemark,
      sort_order: String(editingTaskIdx >= 0 ? editingTaskIdx : selectedProject?.tasks.length ?? 0),
    };

    try {
      if (editingTaskIdx >= 0 && selectedProject?.tasks[editingTaskIdx]?.id) {
        const taskId = selectedProject.tasks[editingTaskIdx].id!;
        const res = await updateTask(taskId, payload);
        if (res.success) {
          toast.success("업무가 수정되었습니다.");
          await fetchTaskDetails(selectedId);
          setIsTaskModalOpen(false);
        } else {
          toast.error(res.message || "업무 수정에 실패했습니다.");
        }
      } else {
        const res = await createTask(selectedId, payload);
        if (res.success) {
          toast.success("업무가 등록되었습니다.");
          await fetchTaskDetails(selectedId);
          await fetchProjects();
          setIsTaskModalOpen(false);
        } else {
          toast.error(res.message || "업무 등록에 실패했습니다.");
        }
      }
    } catch {
      toast.error("업무 저장에 실패했습니다.");
    }
  };

  const handleDeleteTask = async (idx: number) => {
    if (!selectedProject || !selectedId) return;
    const task = selectedProject.tasks[idx];
    if (!task) return;
    if (!confirm(`"${task.name}" 업무를 삭제하시겠습니까?`)) return;

    const taskId = task.id;
    if (!taskId) {
      toast.error("삭제할 업무 정보를 찾을 수 없습니다.");
      return;
    }

    try {
      const res = await deleteTask(taskId);
      if (res.success) {
        toast.success("업무가 삭제되었습니다.");
        await fetchTaskDetails(selectedId);
        await fetchProjects();
      } else {
        toast.error(res.message || "업무 삭제에 실패했습니다.");
      }
    } catch {
      toast.error("업무 삭제에 실패했습니다.");
    }
  };

  // --- 상세 패널 계산 ---
  const childProjects = useMemo(
    () => (selectedId ? getChildren(projects, selectedId) : []),
    [projects, selectedId]
  );

  const taskStats = useMemo(() => {
    if (!selectedProject) return { total: 0, completed: 0, inProgress: 0, delayed: 0 };
    const total = selectedProject.tasks.length;
    const completed = selectedProject.tasks.filter((t) => t.status === "완료").length;
    const inProgress = selectedProject.tasks.filter((t) => t.status === "진행중").length;
    const delayed = selectedProject.tasks.filter(
      (t) => t.status !== "완료" && new Date(t.end) < new Date()
    ).length;
    return { total, completed, inProgress, delayed };
  }, [selectedProject]);

  // 카테고리별 그룹핑 (WBS)
  const tasksByCategory = useMemo(() => {
    if (!selectedProject) return {};
    const groups: Record<string, (Task & { _idx: number })[]> = {};
    selectedProject.tasks.forEach((t, i) => {
      if (!groups[t.category]) groups[t.category] = [];
      groups[t.category].push({ ...t, _idx: i });
    });
    return groups;
  }, [selectedProject]);

  // 팀원별 그룹핑
  const teamMembers = useMemo(() => {
    if (!selectedProject) return {};
    const members: Record<string, Task[]> = {};
    selectedProject.tasks.forEach((t) => {
      if (!members[t.assignee]) members[t.assignee] = [];
      members[t.assignee].push(t);
    });
    return members;
  }, [selectedProject]);

  const parentProject = useMemo(
    () => (selectedProject?.parentId ? projects.find((p) => p.id === selectedProject.parentId) : null),
    [projects, selectedProject]
  );

  // 태스크 상세
  const detailTask = useMemo(
    () => (selectedProject && taskDetailIdx >= 0 ? selectedProject.tasks[taskDetailIdx] : null),
    [selectedProject, taskDetailIdx]
  );

  return (
    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
      {/* 검색 섹션 */}
      <Card className="shrink-0">
        <CardContent className="p-4 flex flex-wrap items-end gap-4">
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">상태</Label>
            <Select value={searchStatus} onValueChange={setSearchStatus}>
              <SelectTrigger className="w-[110px] h-9"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="all">전체</SelectItem>
                <SelectItem value="진행중">진행중</SelectItem>
                <SelectItem value="계획">계획</SelectItem>
                <SelectItem value="보류">보류</SelectItem>
                <SelectItem value="완료">완료</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">PM</Label>
            <Select value={searchPM} onValueChange={setSearchPM}>
              <SelectTrigger className="w-[110px] h-9"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="all">전체</SelectItem>
                <SelectItem value="이설계">이설계</SelectItem>
                <SelectItem value="박도면">박도면</SelectItem>
                <SelectItem value="최기구">최기구</SelectItem>
                <SelectItem value="김전장">김전장</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">프로젝트/고객 검색</Label>
            <Input
              placeholder="프로젝트번호 / 프로젝트명 / 고객명"
              className="w-[280px] h-9"
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
            />
          </div>
          <div className="flex-1" />
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 좌우 분할 메인 */}
      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
        <ResizablePanelGroup direction="horizontal">
          {/* 왼쪽: 프로젝트 목록 */}
          <ResizablePanel defaultSize={selectedId ? 50 : 100} minSize={30}>
            <div className="flex flex-col h-full">
              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
                <div className="font-semibold flex items-center gap-2">
                  <Rocket className="w-5 h-5" /> 프로젝트 목록
                  <Badge variant="secondary" className="font-normal">{filteredProjects.length}건</Badge>
                </div>
                <Button size="sm" onClick={() => openProjectModal()}>
                  <Plus className="w-4 h-4 mr-1.5" /> 프로젝트 등록
                </Button>
              </div>

              <div className="flex-1 overflow-auto">
                <Table>
                  <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
                    <TableRow>
                      <TableHead className="w-[160px]">프로젝트번호</TableHead>
                      <TableHead className="w-[80px] text-center">상태</TableHead>
                      <TableHead className="w-[200px]">프로젝트명</TableHead>
                      <TableHead className="w-[70px]">PM</TableHead>
                      <TableHead className="w-[80px]">고객</TableHead>
                      <TableHead className="w-[90px]">시작일</TableHead>
                      <TableHead className="w-[90px]">종료예정</TableHead>
                      <TableHead className="w-[100px] text-center">진행률</TableHead>
                      <TableHead className="w-[90px]">원접수번호</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {loading ? (
                      <TableRow>
                        <TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
                          <Loader2 className="w-10 h-10 mx-auto mb-2 animate-spin text-muted-foreground" />
                          <div className="text-sm">로딩 중...</div>
                        </TableCell>
                      </TableRow>
                    ) : treeRows.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
                          <Rocket className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
                          조건에 맞는 프로젝트가 없습니다
                        </TableCell>
                      </TableRow>
                    ) : (
                      treeRows.map(({ project: p, depth }) => {
                        const hasChildren = filteredProjects.some((c) => c.parentId === p.id);
                        const isExpanded = expandedIds[p.id] !== false;
                        const childCount = getAllDescendants(projects, p.id).length;

                        return (
                          <TableRow
                            key={p.id}
                            className={cn(
                              "cursor-pointer hover:bg-muted/50 transition-colors",
                              selectedId === p.id && "bg-primary/5",
                              depth === 1 && "bg-slate-50/50",
                              depth >= 2 && "bg-violet-50/30"
                            )}
                            onClick={() => {
                              setSelectedId(p.id);
                              setDetailTab("wbs");
                              fetchTaskDetails(p.id);
                            }}
                          >
                            <TableCell>
                              <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
                                {hasChildren ? (
                                  <button
                                    className="p-0.5 rounded hover:bg-muted transition-transform"
                                    onClick={(e) => { e.stopPropagation(); toggleExpand(p.id); }}
                                  >
                                    <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
                                  </button>
                                ) : (
                                  <span className="w-4" />
                                )}
                                <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-indigo-600" : "text-violet-600")}>
                                  {p.projectNo}
                                </span>
                                {p.relation && (
                                  <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(p.relation))}>
                                    {getRelationLabel(p.relation)}
                                  </span>
                                )}
                              </div>
                            </TableCell>
                            <TableCell className="text-center">
                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(p.status))}>
                                {p.status}
                              </span>
                            </TableCell>
                            <TableCell className="font-medium text-sm">
                              {p.name}
                              {childCount > 0 && (
                                <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal">
                                  <FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}
                                </Badge>
                              )}
                            </TableCell>
                            <TableCell className="text-xs">{p.pm}</TableCell>
                            <TableCell className="text-xs">{p.customer}</TableCell>
                            <TableCell className="text-xs text-muted-foreground">{p.startDate}</TableCell>
                            <TableCell className="text-xs text-muted-foreground">{p.endDate}</TableCell>
                            <TableCell>
                              <div className="flex items-center gap-1.5">
                                <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
                                  <div className={cn("h-full rounded-full transition-all", progressColor(p.progress))} style={{ width: `${p.progress}%` }} />
                                </div>
                                <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(p.progress))}>{p.progress}%</span>
                              </div>
                            </TableCell>
                            <TableCell className="text-xs text-muted-foreground">{p.sourceNo || "-"}</TableCell>
                          </TableRow>
                        );
                      })
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          </ResizablePanel>

          {/* 오른쪽: 상세 */}
          {selectedId && selectedProject && (
            <>
              <ResizableHandle withHandle />
              <ResizablePanel defaultSize={50} minSize={30}>
                <div className="flex flex-col h-full bg-card">
                  {/* 상세 헤더 */}
                  <div className="flex items-center justify-between p-3 border-b shrink-0">
                    <span className="font-semibold text-sm flex items-center gap-2">
                      <ClipboardList className="w-4 h-4" />
                      {selectedProject.projectNo} - {selectedProject.name}
                    </span>
                    <div className="flex items-center gap-1.5">
                      <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
                        <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
                      </Button>
                      <Button size="sm" variant="default" className="h-7 text-xs bg-violet-600 hover:bg-violet-700" onClick={() => openProjectModal(undefined, selectedProject.id)}>
                        <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
                      </Button>
                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
                        <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                      </Button>
                    </div>
                  </div>

                  <div className="flex-1 overflow-auto p-4 space-y-4">
                    {/* 상위 프로젝트 링크 */}
                    {parentProject && (
                      <div
                        className="flex items-center gap-2 px-3 py-2 bg-blue-50 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-blue-100 transition-colors"
                        onClick={() => { setSelectedId(parentProject.id); setDetailTab("wbs"); fetchTaskDetails(parentProject.id); }}
                      >
                        <span className="text-muted-foreground">상위:</span>
                        <span className="text-primary font-semibold">{parentProject.projectNo} - {parentProject.name}</span>
                        {selectedProject.relation && (
                          <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(selectedProject.relation))}>
                            {getRelationLabel(selectedProject.relation)}
                          </span>
                        )}
                      </div>
                    )}

                    {/* 개요 카드 */}
                    <div className="grid grid-cols-5 gap-3">
                      {[
                        { label: "전체 업무", value: taskStats.total, color: "text-primary" },
                        { label: "완료", value: taskStats.completed, color: "text-emerald-600" },
                        { label: "진행중", value: taskStats.inProgress, color: "text-amber-600" },
                        { label: "지연", value: taskStats.delayed, color: "text-destructive" },
                        { label: "하위 프로젝트", value: childProjects.length, color: "text-violet-600" },
                      ].map((item) => (
                        <div key={item.label} className="bg-muted/30 rounded-lg p-3 text-center border">
                          <div className="text-[11px] text-muted-foreground mb-1">{item.label}</div>
                          <div className={cn("text-2xl font-bold", item.color)}>{item.value}</div>
                        </div>
                      ))}
                    </div>

                    {/* 탭 */}
                    <Tabs value={detailTab} onValueChange={setDetailTab}>
                      <TabsList className="w-full">
                        <TabsTrigger value="wbs" className="flex-1 text-xs gap-1.5">
                          <ClipboardList className="w-3.5 h-3.5" /> WBS
                        </TabsTrigger>
                        <TabsTrigger value="gantt" className="flex-1 text-xs gap-1.5">
                          <BarChart3 className="w-3.5 h-3.5" /> 간트차트
                        </TabsTrigger>
                        <TabsTrigger value="team" className="flex-1 text-xs gap-1.5">
                          <Users className="w-3.5 h-3.5" /> 팀원
                        </TabsTrigger>
                        <TabsTrigger value="subprojects" className="flex-1 text-xs gap-1.5">
                          <FolderOpen className="w-3.5 h-3.5" /> 하위({childProjects.length})
                        </TabsTrigger>
                      </TabsList>

                      {/* WBS 탭 */}
                      <TabsContent value="wbs" className="mt-4">
                        {selectedProject.tasks.length === 0 ? (
                          <div className="text-center py-10 text-muted-foreground">
                            <ClipboardList className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
                            <div className="text-sm">등록된 업무가 없습니다</div>
                          </div>
                        ) : (
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead className="w-[180px]">업무명</TableHead>
                                <TableHead className="w-[70px]">담당자</TableHead>
                                <TableHead className="w-[85px]">시작일</TableHead>
                                <TableHead className="w-[85px]">종료일</TableHead>
                                <TableHead className="w-[70px] text-center">상태</TableHead>
                                <TableHead className="w-[90px] text-center">진행률</TableHead>
                                <TableHead className="w-[80px] text-center">관리</TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {Object.entries(tasksByCategory).map(([cat, tasks]) => {
                                const catProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
                                return (
                                  <React.Fragment key={cat}>
                                    <TableRow className="bg-muted/30">
                                      <TableCell colSpan={5} className="font-semibold text-sm">
                                        {categoryIcons[cat] || "📋"} {cat}
                                      </TableCell>
                                      <TableCell className="text-center">
                                        <span className={cn("text-xs font-semibold", progressTextColor(catProg))}>{catProg}%</span>
                                      </TableCell>
                                      <TableCell />
                                    </TableRow>
                                    {tasks.map((task) => {
                                      const isDelay = task.status !== "완료" && new Date(task.end) < new Date();
                                      const displayStatus = isDelay ? "지연" : task.status;
                                      return (
                                        <TableRow key={task._idx}>
                                          <TableCell className="pl-8 text-xs">{task.name}</TableCell>
                                          <TableCell className="text-xs">{task.assignee}</TableCell>
                                          <TableCell className="text-xs text-muted-foreground">{task.start}</TableCell>
                                          <TableCell className={cn("text-xs", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
                                          <TableCell className="text-center">
                                            <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getTaskStatusColor(displayStatus))}>
                                              {displayStatus}
                                            </span>
                                          </TableCell>
                                          <TableCell>
                                            <div className="flex items-center gap-1">
                                              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
                                                <div className={cn("h-full rounded-full", progressColor(task.progress))} style={{ width: `${task.progress}%` }} />
                                              </div>
                                              <span className="text-[10px] text-muted-foreground min-w-[24px] text-right">{task.progress}%</span>
                                            </div>
                                          </TableCell>
                                          <TableCell className="text-center">
                                            <div className="flex items-center justify-center gap-0.5">
                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => { setTaskDetailIdx(task._idx); setTaskDetailTab("log"); setIsTaskDetailOpen(true); }}>
                                                <FileText className="w-3.5 h-3.5" />
                                              </Button>
                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => openTaskModal(task._idx)}>
                                                <Pencil className="w-3.5 h-3.5" />
                                              </Button>
                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteTask(task._idx)}>
                                                <Trash2 className="w-3.5 h-3.5 text-destructive" />
                                              </Button>
                                            </div>
                                          </TableCell>
                                        </TableRow>
                                      );
                                    })}
                                  </React.Fragment>
                                );
                              })}
                            </TableBody>
                          </Table>
                        )}
                      </TabsContent>

                      {/* 간트차트 탭 */}
                      <TabsContent value="gantt" className="mt-4">
                        {selectedProject.tasks.length === 0 ? (
                          <div className="text-center py-10 text-muted-foreground">
                            <BarChart3 className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
                            <div className="text-sm">업무를 등록하면 간트차트가 표시됩니다</div>
                          </div>
                        ) : (
                          <GanttChart tasks={selectedProject.tasks} startDate={selectedProject.startDate} endDate={selectedProject.endDate} />
                        )}
                      </TabsContent>

                      {/* 팀원 탭 */}
                      <TabsContent value="team" className="mt-4">
                        {selectedProject.tasks.length === 0 ? (
                          <div className="text-center py-10 text-muted-foreground">
                            <Users className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
                            <div className="text-sm">업무를 등록하면 팀원 현황이 표시됩니다</div>
                          </div>
                        ) : (
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            {Object.entries(teamMembers).map(([name, tasks], idx) => {
                              const avgProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
                              const isPM = name === selectedProject.pm;
                              const avatarColors = ["bg-primary", "bg-emerald-600", "bg-violet-600", "bg-amber-600"];
                              return (
                                <div key={name} className="border rounded-lg p-4 hover:shadow-sm transition-shadow">
                                  <div className="flex items-center gap-3 mb-3">
                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-white font-bold", avatarColors[idx % 4])}>
                                      {name.charAt(0)}
                                    </div>
                                    <div>
                                      <div className="font-semibold text-sm flex items-center gap-1.5">
                                        {name}
                                        {isPM && <Badge variant="secondary" className="text-[10px] py-0">PM</Badge>}
                                      </div>
                                      <div className="text-xs text-muted-foreground">
                                        업무 {tasks.length}건 (진행중 {tasks.filter((t) => t.status === "진행중").length}건)
                                      </div>
                                    </div>
                                  </div>
                                  <ul className="space-y-1 mb-3">
                                    {tasks.map((t, ti) => {
                                      const isDelay = t.status !== "완료" && new Date(t.end) < new Date();
                                      return (
                                        <li key={ti} className="flex items-center justify-between text-xs py-1 border-b border-muted/50 last:border-0">
                                          <span>
                                            {isDelay ? "🔴" : t.status === "완료" ? "✅" : t.status === "진행중" ? "🔵" : "⚪"} {t.name}
                                          </span>
                                          <span className={cn("text-[11px]", isDelay ? "text-destructive" : "text-muted-foreground")}>{t.progress}%</span>
                                        </li>
                                      );
                                    })}
                                  </ul>
                                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                                    <span>종합:</span>
                                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
                                      <div className={cn("h-full rounded-full", progressColor(avgProg))} style={{ width: `${avgProg}%` }} />
                                    </div>
                                    <span className={cn("font-semibold", progressTextColor(avgProg))}>{avgProg}%</span>
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        )}
                      </TabsContent>

                      {/* 하위 프로젝트 탭 */}
                      <TabsContent value="subprojects" className="mt-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                          {childProjects.map((child) => {
                            const completedCount = child.tasks.filter((t) => t.status === "완료").length;
                            return (
                              <div
                                key={child.id}
                                className="border rounded-lg p-4 cursor-pointer hover:border-primary hover:shadow-sm transition-all"
                                onClick={() => { setSelectedId(child.id); setDetailTab("wbs"); fetchTaskDetails(child.id); }}
                              >
                                <div className="flex items-center justify-between mb-2">
                                  <div>
                                    <div className="text-xs font-semibold text-primary">{child.projectNo}</div>
                                    {child.relation && (
                                      <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(child.relation))}>
                                        {getRelationLabel(child.relation)}
                                      </span>
                                    )}
                                  </div>
                                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(child.status))}>{child.status}</span>
                                </div>
                                <div className="font-semibold text-sm mb-2">{child.name}</div>
                                <div className="flex gap-3 text-xs text-muted-foreground mb-2">
                                  <span>👤 {child.pm}</span>
                                  <span>📅 {child.startDate} ~ {child.endDate}</span>
                                </div>
                                <div className="text-xs text-muted-foreground mb-2">
                                  업무 {child.tasks.length}건 (완료 {completedCount}건)
                                </div>
                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                                  <span>진행률</span>
                                  <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
                                    <div className={cn("h-full rounded-full", progressColor(child.progress))} style={{ width: `${child.progress}%` }} />
                                  </div>
                                  <span className={cn("font-semibold", progressTextColor(child.progress))}>{child.progress}%</span>
                                </div>
                              </div>
                            );
                          })}
                          <div
                            className="border-2 border-dashed rounded-lg p-4 flex flex-col items-center justify-center min-h-[120px] cursor-pointer text-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 transition-all"
                            onClick={() => openProjectModal(undefined, selectedProject.id)}
                          >
                            <Plus className="w-7 h-7 mb-1" />
                            <span className="text-sm font-medium">하위 프로젝트 등록</span>
                          </div>
                        </div>
                      </TabsContent>
                    </Tabs>
                  </div>
                </div>
              </ResizablePanel>
            </>
          )}
        </ResizablePanelGroup>
      </div>

      {/* 프로젝트 등록/수정 모달 */}
      <Dialog open={isProjectModalOpen} onOpenChange={setIsProjectModalOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">
              {projects.some((p) => p.id === formProjectId) ? "프로젝트 수정" : formParentId ? "하위 프로젝트 등록" : "프로젝트 등록"}
            </DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">프로젝트 기본 정보를 입력하세요.</DialogDescription>
          </DialogHeader>
          <div className="space-y-3 sm:space-y-4">
            <div>
              <Label className="text-xs sm:text-sm">프로젝트 번호</Label>
              <Input value={formProjectNo || formProjectId} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted/50" />
            </div>
            <div>
              <Label className="text-xs sm:text-sm">프로젝트명 <span className="text-destructive">*</span></Label>
              <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="프로젝트명" className="h-8 text-xs sm:h-10 sm:text-sm" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs sm:text-sm">시작일 <span className="text-destructive">*</span></Label>
                <Input type="date" value={formStartDate} onChange={(e) => setFormStartDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
              </div>
              <div>
                <Label className="text-xs sm:text-sm">종료예정일 <span className="text-destructive">*</span></Label>
                <Input type="date" value={formEndDate} onChange={(e) => setFormEndDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs sm:text-sm">PM <span className="text-destructive">*</span></Label>
                <Select value={formPM || "none"} onValueChange={(v) => setFormPM(v === "none" ? "" : v)}>
                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">선택</SelectItem>
                    <SelectItem value="이설계">이설계</SelectItem>
                    <SelectItem value="박도면">박도면</SelectItem>
                    <SelectItem value="최기구">최기구</SelectItem>
                    <SelectItem value="김전장">김전장</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs sm:text-sm">고객</Label>
                <Input value={formCustomer} onChange={(e) => setFormCustomer(e.target.value)} placeholder="고객/거래처명" className="h-8 text-xs sm:h-10 sm:text-sm" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs sm:text-sm">상위 프로젝트</Label>
                <Select value={formParentId || "none"} onValueChange={(v) => setFormParentId(v === "none" ? "" : v)}>
                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="없음" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">없음 (최상위)</SelectItem>
                    {projects.filter((p) => p.id !== formProjectId).map((p) => (
                      <SelectItem key={p.id} value={p.id}>{p.projectNo} - {p.name}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs sm:text-sm">관계 유형</Label>
                <Select value={formRelation} onValueChange={(v) => setFormRelation(v as RelationType)}>
                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="sub">하위 프로젝트</SelectItem>
                    <SelectItem value="depend">종속 프로젝트</SelectItem>
                    <SelectItem value="related">연관 프로젝트</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div>
              <Label className="text-xs sm:text-sm">원접수번호</Label>
              <Input value={formSourceNo} onChange={(e) => setFormSourceNo(e.target.value)} placeholder="DR-XXXX-XXXX" className="h-8 text-xs sm:h-10 sm:text-sm" />
            </div>
            <div>
              <Label className="text-xs sm:text-sm">설명</Label>
              <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="프로젝트 개요" rows={3} />
            </div>
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
            <Button onClick={handleSaveProject} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
              <Save className="w-4 h-4 mr-1.5" /> 저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 업무 등록/수정 모달 */}
      <Dialog open={isTaskModalOpen} onOpenChange={setIsTaskModalOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">업무 정보를 입력하세요.</DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div>
              <Label className="text-xs sm:text-sm">업무명 <span className="text-destructive">*</span></Label>
              <Input value={tName} onChange={(e) => setTName(e.target.value)} placeholder="업무명" className="h-8 text-xs sm:h-10 sm:text-sm" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs sm:text-sm">업무 유형</Label>
                <Select value={tCategory} onValueChange={setTCategory}>
                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((c) => (
                      <SelectItem key={c} value={c}>{c}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs sm:text-sm">담당자 <span className="text-destructive">*</span></Label>
                <Select value={tAssignee || "none"} onValueChange={(v) => setTAssignee(v === "none" ? "" : v)}>
                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">선택</SelectItem>
                    {["이설계", "박도면", "최기구", "김전장", "정SW", "한조립", "박구매", "팀장"].map((n) => (
                      <SelectItem key={n} value={n}>{n}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs sm:text-sm">시작일 <span className="text-destructive">*</span></Label>
                <Input type="date" value={tStart} onChange={(e) => setTStart(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
              </div>
              <div>
                <Label className="text-xs sm:text-sm">종료일 <span className="text-destructive">*</span></Label>
                <Input type="date" value={tEnd} onChange={(e) => setTEnd(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-xs sm:text-sm">상태</Label>
                <Select value={tStatus} onValueChange={(v) => setTStatus(v as TaskStatus)}>
                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {(["대기", "진행중", "검토중", "완료"] as TaskStatus[]).map((s) => (
                      <SelectItem key={s} value={s}>{s}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs sm:text-sm">진행률 (%)</Label>
                <Input type="number" min={0} max={100} value={tProgress} onChange={(e) => setTProgress(Number(e.target.value))} className="h-8 text-xs sm:h-10 sm:text-sm" />
              </div>
            </div>
            <div>
              <Label className="text-xs sm:text-sm">비고</Label>
              <Textarea value={tRemark} onChange={(e) => setTRemark(e.target.value)} placeholder="비고 사항" rows={2} />
            </div>
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
            <Button onClick={handleSaveTask} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
              <Save className="w-4 h-4 mr-1.5" /> 저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 태스크 상세 모달 (수행기록/이슈) */}
      <Dialog open={isTaskDetailOpen} onOpenChange={setIsTaskDetailOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[700px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">{detailTask?.name || "업무 상세"}</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">업무 이력 및 이슈를 확인합니다.</DialogDescription>
          </DialogHeader>
          {detailTask && (
            <>
              {/* 태스크 요약 */}
              <div className="grid grid-cols-2 gap-2 bg-muted/30 p-3 rounded-lg border text-xs">
                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">유형</span><span className="font-medium">{detailTask.category}</span></div>
                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">담당자</span><span className="font-medium">{detailTask.assignee}</span></div>
                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">기간</span><span className="font-medium">{detailTask.start} ~ {detailTask.end}</span></div>
                <div className="flex gap-2 items-center">
                  <span className="text-muted-foreground w-[50px]">진행률</span>
                  <div className="flex items-center gap-1.5 flex-1">
                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden max-w-[60px]">
                      <div className={cn("h-full rounded-full", progressColor(detailTask.progress))} style={{ width: `${detailTask.progress}%` }} />
                    </div>
                    <span className={cn("font-semibold", progressTextColor(detailTask.progress))}>{detailTask.progress}%</span>
                  </div>
                </div>
              </div>

              <Tabs value={taskDetailTab} onValueChange={setTaskDetailTab}>
                <TabsList className="w-full">
                  <TabsTrigger value="log" className="flex-1 text-xs">수행이력 ({detailTask.workLogs?.length || 0})</TabsTrigger>
                  <TabsTrigger value="issue" className="flex-1 text-xs">이슈 ({detailTask.issues?.length || 0})</TabsTrigger>
                </TabsList>

                <TabsContent value="log" className="mt-3">
                  <div className="bg-blue-50 rounded-md p-2.5 mb-3 text-xs text-blue-800 border border-blue-100">
                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행합니다.
                  </div>
                  {(!detailTask.workLogs || detailTask.workLogs.length === 0) ? (
                    <div className="text-center py-8 text-muted-foreground text-sm">등록된 수행기록이 없습니다.</div>
                  ) : (
                    <div className="space-y-2 max-h-[300px] overflow-y-auto">
                      {[...detailTask.workLogs].sort((a, b) => b.date.localeCompare(a.date)).map((log, i) => {
                        const d = new Date(log.date);
                        const days = ["일", "월", "화", "수", "목", "금", "토"];
                        return (
                          <div key={i} className="flex gap-3 p-3 bg-muted/20 rounded-lg border text-xs">
                            <div className="bg-background border rounded-md px-2 py-1.5 text-center min-w-[55px] shrink-0">
                              <div className="text-[10px] text-muted-foreground">{d.getMonth() + 1}월</div>
                              <div className="text-lg font-bold">{d.getDate()}</div>
                              <div className="text-[10px] text-muted-foreground">{days[d.getDay()]}</div>
                            </div>
                            <div className="flex-1">
                              <div className="text-sm mb-1">{log.desc}</div>
                              <div className="flex gap-2 text-muted-foreground flex-wrap">
                                <Badge variant="secondary" className="text-[10px] py-0">⏱ {log.hours}h</Badge>
                                {log.progressBefore !== undefined && (
                                  <Badge variant="outline" className="text-[10px] py-0 bg-emerald-50 text-emerald-700 border-emerald-200">
                                    📈 {log.progressBefore}% → {log.progressAfter}%
                                  </Badge>
                                )}
                                {log.author && <span>👤 {log.author}</span>}
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </TabsContent>

                <TabsContent value="issue" className="mt-3">
                  {(!detailTask.issues || detailTask.issues.length === 0) ? (
                    <div className="text-center py-8 text-muted-foreground text-sm">등록된 이슈가 없습니다.</div>
                  ) : (
                    <div className="space-y-2 max-h-[300px] overflow-y-auto">
                      {detailTask.issues.map((issue) => {
                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-amber-600" : "text-muted-foreground";
                        const statusBadge = issue.status === "해결" ? "bg-emerald-100 text-emerald-700" : issue.status === "진행중" ? "bg-blue-100 text-blue-700" : "bg-rose-100 text-rose-700";
                        return (
                          <div key={issue.id} className="border rounded-lg p-3">
                            <div className="flex items-center justify-between mb-1.5">
                              <div className="font-semibold text-xs flex items-center gap-1">
                                <span className={priorityColor}>●</span> {issue.title}
                              </div>
                              <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", statusBadge)}>{issue.status}</span>
                            </div>
                            <div className="text-xs text-muted-foreground mb-1">{issue.desc}</div>
                            <div className="flex gap-2 text-[11px] text-muted-foreground">
                              <span>📅 {issue.registeredDate}</span>
                              <span>👤 {issue.registeredBy}</span>
                              {issue.resolvedDate && <span>✅ {issue.resolvedDate}</span>}
                              <span className={priorityColor}>⚡ {issue.priority}</span>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </TabsContent>
              </Tabs>
            </>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)} className="h-8 text-xs sm:h-10 sm:text-sm">닫기</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// --- 간트차트 컴포넌트 ---
function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: string; endDate: string }) {
  const pStart = new Date(startDate);
  const pEnd = new Date(endDate);
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  const totalDays = Math.ceil((pEnd.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24)) + 1;
  const useWeekly = totalDays > 90;
  const cellWidth = useWeekly ? 50 : 28;

  const dates: Date[] = [];
  const cur = new Date(pStart);
  if (useWeekly) {
    while (cur <= pEnd) {
      dates.push(new Date(cur));
      cur.setDate(cur.getDate() + 7);
    }
  } else {
    while (cur <= pEnd) {
      dates.push(new Date(cur));
      cur.setDate(cur.getDate() + 1);
    }
  }

  const barColors: Record<string, string> = {
    기구설계: "bg-blue-500",
    전장설계: "bg-amber-500",
    SW개발: "bg-violet-500",
    "구매/조달": "bg-emerald-500",
    "조립/시운전": "bg-rose-500",
    "검토/승인": "bg-gray-400",
  };

  const todayFromStart = Math.ceil((today.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24));
  const todayLeft = useWeekly ? (todayFromStart / 7) * cellWidth + 180 : todayFromStart * cellWidth + 180;
  const showTodayLine = today >= pStart && today <= pEnd;

  return (
    <div className="border rounded-lg overflow-hidden">
      {/* 범례 */}
      <div className="flex gap-3 p-2 flex-wrap text-[11px] border-b bg-muted/20">
        {Object.entries(barColors).map(([cat, color]) => (
          <span key={cat} className="flex items-center gap-1">
            {categoryIcons[cat]} <span className={cn("w-3 h-3 rounded-sm", color)} /> {cat}
          </span>
        ))}
        <span className="text-destructive font-semibold">│ 오늘</span>
      </div>

      <div className="overflow-x-auto relative">
        {showTodayLine && (
          <div className="absolute top-0 bottom-0 w-[2px] bg-destructive z-5" style={{ left: todayLeft }} />
        )}

        {/* 헤더 */}
        <div className="flex border-b sticky top-0 bg-muted/50 z-4">
          <div className="w-[180px] min-w-[180px] p-2 text-xs font-semibold text-muted-foreground border-r shrink-0">업무명</div>
          <div className="flex">
            {dates.map((d, i) => {
              const dow = d.getDay();
              const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
              const isToday = d.toDateString() === today.toDateString();
              return (
                <div
                  key={i}
                  className={cn(
                    "text-center text-[10px] text-muted-foreground border-r py-1.5",
                    isWeekend && "bg-rose-50",
                    isToday && "bg-blue-50 text-primary font-bold"
                  )}
                  style={{ minWidth: cellWidth }}
                >
                  {useWeekly ? `${d.getMonth() + 1}/${d.getDate()}` : d.getDate()}
                </div>
              );
            })}
          </div>
        </div>

        {/* 행 */}
        {tasks.map((task, i) => {
          const tStart = new Date(task.start);
          const tEnd = new Date(task.end);
          const dayFromStart = Math.max(0, Math.ceil((tStart.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24)));
          const taskDays = Math.max(1, Math.ceil((tEnd.getTime() - tStart.getTime()) / (1000 * 60 * 60 * 24)) + 1);
          const leftPos = useWeekly ? (dayFromStart / 7) * cellWidth : dayFromStart * cellWidth;
          const barWidth = useWeekly ? (taskDays / 7) * cellWidth : taskDays * cellWidth;
          const barColor = barColors[task.category] || "bg-blue-500";

          return (
            <div key={i} className="flex border-b hover:bg-muted/30 min-h-[34px]">
              <div className="w-[180px] min-w-[180px] px-3 py-2 text-xs text-muted-foreground border-r truncate shrink-0" title={task.name}>{task.name}</div>
              <div className="flex relative items-center" style={{ minWidth: dates.length * cellWidth }}>
                {dates.map((d, di) => {
                  const dow = d.getDay();
                  const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-rose-50")} style={{ minWidth: cellWidth }} />;
                })}
                <div
                  className={cn("absolute h-5 rounded text-[10px] text-white flex items-center justify-center font-semibold", barColor)}
                  style={{ left: leftPos, width: Math.max(barWidth, 16), top: "50%", transform: "translateY(-50%)" }}
                >
                  {barWidth > 30 ? `${task.progress}%` : ""}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}