"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import workData from "../data/work-list.json";
import styles from "./WorkList.module.css";

type WorkItem = {
  id: string;
  code: string;
  name: string;
  kind: "project" | "milestone" | "task" | "subtask";
  owner: { name: string; initial: string; tone: string };
  status: string;
  priority: string;
  progress: number;
  startDate: string;
  dueDate: string;
  tags: string[];
  children: WorkItem[];
};

type FlatRow = { item: WorkItem; level: number; parentId?: string };

const initialItems = workData.items as WorkItem[];

function parentIds(items: WorkItem[]): string[] {
  return items.flatMap((item) => item.children.length ? [item.id, ...parentIds(item.children)] : []);
}

function flatten(items: WorkItem[], expanded: Set<string>, level = 0, parentId?: string): FlatRow[] {
  const rows: FlatRow[] = [];
  items.forEach((item) => {
    rows.push({ item, level, parentId });
    if (item.children.length && expanded.has(item.id)) rows.push(...flatten(item.children, expanded, level + 1, item.id));
  });
  return rows;
}

function filterTree(items: WorkItem[], search: string, status: string, priority: string): WorkItem[] {
  return items.flatMap((item) => {
    const children = filterTree(item.children, search, status, priority);
    const matchesSearch = !search || `${item.name}${item.code}${item.owner.name}${item.tags.join("")}`.toLowerCase().includes(search.toLowerCase());
    const matchesStatus = status === "全部状态" || item.status === status;
    const matchesPriority = priority === "全部优先级" || item.priority === priority;
    return (matchesSearch && matchesStatus && matchesPriority) || children.length ? [{ ...item, children }] : [];
  });
}

function findItem(items: WorkItem[], id: string): WorkItem | undefined {
  for (const item of items) {
    if (item.id === id) return item;
    const child = findItem(item.children, id);
    if (child) return child;
  }
}

function insertChild(items: WorkItem[], parentId: string, child: WorkItem): WorkItem[] {
  return items.map((item) => item.id === parentId ? { ...item, children: [...item.children, child] } : { ...item, children: insertChild(item.children, parentId, child) });
}

export default function WorkListPage() {
  const [items, setItems] = useState<WorkItem[]>(initialItems);
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set(parentIds(initialItems)));
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("全部状态");
  const [priorityFilter, setPriorityFilter] = useState("全部优先级");
  const [activeTab, setActiveTab] = useState("全部工作");
  const [detailId, setDetailId] = useState<string | null>(null);
  const [createOpen, setCreateOpen] = useState(false);
  const [toast, setToast] = useState("");

  useEffect(() => {
    const saved = window.localStorage.getItem("orbit-work-list");
    if (saved) {
      try { setItems(JSON.parse(saved)); }
      catch { window.localStorage.removeItem("orbit-work-list"); }
    }
  }, []);

  useEffect(() => {
    window.localStorage.setItem("orbit-work-list", JSON.stringify(items));
  }, [items]);

  const filtered = useMemo(() => filterTree(items, search, statusFilter, priorityFilter), [items, search, statusFilter, priorityFilter]);
  const rows = useMemo(() => flatten(filtered, expanded), [filtered, expanded]);
  const detailItem = detailId ? findItem(items, detailId) : undefined;

  const notify = (message: string) => {
    setToast(message);
    window.setTimeout(() => setToast(""), 2300);
  };

  const toggleExpand = (id: string) => setExpanded((current) => {
    const next = new Set(current);
    if (next.has(id)) next.delete(id); else next.add(id);
    return next;
  });

  const toggleSelect = (id: string) => setSelected((current) => {
    const next = new Set(current);
    if (next.has(id)) next.delete(id); else next.add(id);
    return next;
  });

  const toggleAll = () => {
    if (rows.length > 0 && rows.every(({ item }) => selected.has(item.id))) setSelected(new Set());
    else setSelected(new Set(rows.map(({ item }) => item.id)));
  };

  const updateStatus = (id: string, status: string) => {
    const update = (source: WorkItem[]): WorkItem[] => source.map((item) => item.id === id ? { ...item, status } : { ...item, children: update(item.children) });
    setItems(update);
    notify("工作状态已保存到本地");
  };

  const createItem = (name: string, parentId: string, priority: string) => {
    const parent = findItem(items, parentId);
    const item: WorkItem = {
      id: `task-${Date.now()}`,
      code: `TASK-${String(Date.now()).slice(-4)}`,
      name,
      kind: parent?.kind === "task" ? "subtask" : "task",
      owner: { name: "林知夏", initial: "林", tone: "blue" },
      status: "待处理",
      priority,
      progress: 0,
      startDate: "2026-08-07",
      dueDate: "2026-08-21",
      tags: ["新任务"],
      children: [],
    };
    setItems((current) => insertChild(current, parentId, item));
    setExpanded((current) => new Set([...current, parentId]));
    setCreateOpen(false);
    notify("新任务已添加到工作列表");
  };

  return (
    <div className={styles.shell}>
      <aside className={styles.sidebar}>
        <Link href="/" className={styles.brand}><span className={styles.brandMark}><i /><i /><i /></span><strong>Orbit<span>Flow</span></strong></Link>
        <nav>
          <p>工作台</p>
          <Link href="/"><span>⌂</span>概览</Link>
          <a className={styles.active}><span>☷</span>工作列表<b>36</b></a>
          <Link href="/approval"><span>⌘</span>审批流程设计<em>NEW</em></Link>
          <p>业务管理</p>
          <Link href="/"><span>▦</span>流程泳道</Link>
          <Link href="/"><span>◷</span>定时任务</Link>
          <Link href="/"><span>▤</span>内容管理</Link>
          <p>个人工作</p>
          <a><span>☆</span>我的关注</a>
          <a><span>◫</span>最近浏览</a>
        </nav>
        <div className={styles.sidebarFooter}><span>林</span><div><strong>林知夏</strong><small>产品设计师</small></div><button>•••</button></div>
      </aside>

      <main className={styles.main}>
        <header className={styles.topbar}>
          <div className={styles.breadcrumb}><span>工作管理</span><b>/</b><strong>工作列表</strong></div>
          <label className={styles.globalSearch}><span>⌕</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="搜索工作项、编号或负责人" /><kbd>⌘ K</kbd></label>
          <div className={styles.topActions}><button onClick={() => notify("暂无新通知")}>♢<i /></button><span className={styles.avatar}>林</span></div>
        </header>

        <section className={styles.content}>
          <div className={styles.heading}>
            <div><p>WORK MANAGEMENT</p><h1>工作列表</h1><span>用树形结构管理项目、里程碑、任务与子任务。</span></div>
            <div><button className={styles.secondaryButton} onClick={() => notify("已生成当前视图的演示导出")}>↓ 导出</button><button className={styles.primaryButton} onClick={() => setCreateOpen(true)}>＋ 新建工作项</button></div>
          </div>

          <div className={styles.summaryGrid}>
            <article><span className={`${styles.summaryIcon} ${styles.blue}`}>☷</span><p>全部工作<strong>{workData.summary.total}</strong><small>包含 3 个项目</small></p></article>
            <article><span className={`${styles.summaryIcon} ${styles.purple}`}>↻</span><p>进行中<strong>{workData.summary.inProgress}</strong><small>本周新增 4 项</small></p></article>
            <article><span className={`${styles.summaryIcon} ${styles.orange}`}>!</span><p>即将到期<strong>{workData.summary.dueSoon}</strong><small>7 天内需完成</small></p></article>
            <article><span className={`${styles.summaryIcon} ${styles.green}`}>✓</span><p>已完成<strong>{workData.summary.completed}</strong><small>完成率 44%</small></p></article>
          </div>

          <section className={styles.tablePanel}>
            <div className={styles.tabs}>
              <div>{["全部工作", "我负责的", "我参与的", "已归档"].map((tab) => <button key={tab} className={activeTab === tab ? styles.activeTab : ""} onClick={() => { setActiveTab(tab); notify(`已切换到“${tab}”视图`); }}>{tab}{tab === "全部工作" && <b>36</b>}</button>)}</div>
              <button className={styles.viewSettings} onClick={() => notify("列设置已打开为模板提示")}>⚙ 列设置</button>
            </div>
            <div className={styles.toolbar}>
              <label><span>⌕</span><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="筛选当前列表" /></label>
              <select value={statusFilter} onChange={(event) => setStatusFilter(event.target.value)}><option>全部状态</option><option>待处理</option><option>进行中</option><option>待验收</option><option>已完成</option><option>阻塞</option></select>
              <select value={priorityFilter} onChange={(event) => setPriorityFilter(event.target.value)}><option>全部优先级</option><option>高</option><option>中</option><option>低</option></select>
              <button onClick={() => { setExpanded(new Set(parentIds(filtered))); notify("已展开全部层级"); }}>⊞ 展开全部</button>
              <button onClick={() => setExpanded(new Set())}>⊟ 收起全部</button>
              <span className={styles.resultCount}>显示 {rows.length} 项</span>
            </div>

            <div className={styles.tableWrap}>
              <table>
                <thead><tr><th className={styles.checkCell}><input type="checkbox" checked={rows.length > 0 && rows.every(({ item }) => selected.has(item.id))} onChange={toggleAll} aria-label="选择全部" /></th><th>工作项</th><th>负责人</th><th>状态</th><th>优先级</th><th>进度</th><th>开始日期</th><th>截止日期</th><th /></tr></thead>
                <tbody>
                  {rows.map(({ item, level }) => (
                    <tr key={item.id} className={`${styles[`level${level}`]} ${selected.has(item.id) ? styles.selectedRow : ""}`}>
                      <td className={styles.checkCell}><input type="checkbox" checked={selected.has(item.id)} onChange={() => toggleSelect(item.id)} aria-label={`选择${item.name}`} /></td>
                      <td className={styles.nameCell}>
                        <div className={styles.treeName} style={{ paddingLeft: `${level * 23}px` }}>
                          {level > 0 && <span className={styles.treeGuide} style={{ left: `${level * 23 - 13}px` }} />}
                          {item.children.length ? <button className={`${styles.expandButton} ${expanded.has(item.id) ? styles.expanded : ""}`} onClick={() => toggleExpand(item.id)}>›</button> : <span className={styles.leafDot} />}
                          <span className={`${styles.kindIcon} ${styles[item.kind]}`}>{item.kind === "project" ? "项" : item.kind === "milestone" ? "碑" : item.kind === "task" ? "任" : "子"}</span>
                          <button className={styles.itemTitle} onClick={() => setDetailId(item.id)}><strong>{item.name}</strong><small>{item.code}</small></button>
                          {item.tags.slice(0, 1).map((tag) => <span className={styles.rowTag} key={tag}>{tag}</span>)}
                        </div>
                      </td>
                      <td><div className={styles.owner}><span className={styles[item.owner.tone]}>{item.owner.initial}</span><strong>{item.owner.name}</strong></div></td>
                      <td><span className={`${styles.status} ${styles[`status_${item.status}`]}`}><i />{item.status}</span></td>
                      <td><span className={`${styles.priority} ${styles[`priority_${item.priority}`]}`}>{item.priority === "高" ? "↑" : item.priority === "低" ? "↓" : "="} {item.priority}</span></td>
                      <td><div className={styles.progress}><span><i style={{ width: `${item.progress}%` }} /></span><b>{item.progress}%</b></div></td>
                      <td className={styles.dateCell}>{item.startDate.slice(5).replace("-", "/")}</td>
                      <td className={`${styles.dateCell} ${item.dueDate <= "2026-08-10" && item.status !== "已完成" ? styles.dueSoon : ""}`}>{item.dueDate.slice(5).replace("-", "/")}</td>
                      <td><button className={styles.rowAction} onClick={() => setDetailId(item.id)}>•••</button></td>
                    </tr>
                  ))}
                  {rows.length === 0 && <tr><td colSpan={9}><div className={styles.empty}><span>⌕</span><strong>没有匹配的工作项</strong><p>请调整搜索条件或筛选项。</p></div></td></tr>}
                </tbody>
              </table>
            </div>
            <footer className={styles.pagination}><span>共 36 条，每页 20 条</span><div><button disabled>‹</button><button className={styles.currentPage}>1</button><button>2</button><button>›</button></div></footer>
          </section>
        </section>
      </main>

      {selected.size > 0 && <div className={styles.bulkBar}><span>已选择 <strong>{selected.size}</strong> 项</span><i /><button onClick={() => notify("已批量更新负责人")}>更改负责人</button><button onClick={() => notify("已批量更新状态")}>更新状态</button><button onClick={() => notify("工作项已加入归档演示")}>归档</button><button onClick={() => setSelected(new Set())}>取消</button></div>}
      {detailItem && <DetailDrawer item={detailItem} onClose={() => setDetailId(null)} updateStatus={updateStatus} notify={notify} />}
      {createOpen && <CreateModal items={items} onClose={() => setCreateOpen(false)} onCreate={createItem} />}
      {toast && <div className={styles.toast}><span>✓</span>{toast}</div>}
    </div>
  );
}

function DetailDrawer({ item, onClose, updateStatus, notify }: { item: WorkItem; onClose: () => void; updateStatus: (id: string, status: string) => void; notify: (message: string) => void }) {
  return <div className={styles.drawerBackdrop} onMouseDown={onClose}><aside className={styles.drawer} onMouseDown={(event) => event.stopPropagation()}><header><div><span className={`${styles.kindIcon} ${styles[item.kind]}`}>{item.kind === "project" ? "项" : item.kind === "milestone" ? "碑" : item.kind === "task" ? "任" : "子"}</span><div><small>{item.code}</small><h2>{item.name}</h2></div></div><button onClick={onClose}>×</button></header><div className={styles.drawerBody}><div className={styles.detailProgress}><div><span>整体进度</span><strong>{item.progress}%</strong></div><span><i style={{ width: `${item.progress}%` }} /></span></div><section><h3>基本信息</h3><dl><div><dt>负责人</dt><dd><span className={`${styles.miniAvatar} ${styles[item.owner.tone]}`}>{item.owner.initial}</span>{item.owner.name}</dd></div><div><dt>当前状态</dt><dd><select value={item.status} onChange={(event) => updateStatus(item.id, event.target.value)}><option>待处理</option><option>进行中</option><option>待验收</option><option>已完成</option><option>阻塞</option></select></dd></div><div><dt>优先级</dt><dd><span className={`${styles.priority} ${styles[`priority_${item.priority}`]}`}>{item.priority}</span></dd></div><div><dt>计划时间</dt><dd>{item.startDate} — {item.dueDate}</dd></div></dl></section><section><h3>标签</h3><div className={styles.detailTags}>{item.tags.map((tag) => <span key={tag}>{tag}</span>)}<button onClick={() => notify("标签编辑为模板交互")}>＋</button></div></section><section><h3>最近动态</h3><div className={styles.activity}><span className={`${styles.miniAvatar} ${styles.blue}`}>林</span><p><strong>林知夏</strong> 更新了任务进度<small>今天 14:32</small></p></div><div className={styles.activity}><span className={`${styles.miniAvatar} ${styles.purple}`}>周</span><p><strong>周屿</strong> 添加了一条评论<small>昨天 18:08</small></p></div></section></div><footer><button onClick={onClose}>关闭</button><button onClick={() => notify("编辑模式已作为模板提示")}>编辑工作项</button></footer></aside></div>;
}

function CreateModal({ items, onClose, onCreate }: { items: WorkItem[]; onClose: () => void; onCreate: (name: string, parentId: string, priority: string) => void }) {
  const [name, setName] = useState("");
  const [parentId, setParentId] = useState(items[0]?.id ?? "");
  const [priority, setPriority] = useState("中");
  const parents = flatten(items, new Set(parentIds(items))).filter(({ item }) => item.kind !== "subtask");
  return <div className={styles.modalBackdrop} onMouseDown={onClose}><form className={styles.modal} onMouseDown={(event) => event.stopPropagation()} onSubmit={(event) => { event.preventDefault(); if (name.trim() && parentId) onCreate(name.trim(), parentId, priority); }}><header><div><h2>新建工作项</h2><p>工作项将保存到当前浏览器的本地数据。</p></div><button type="button" onClick={onClose}>×</button></header><label><span>工作项名称</span><input autoFocus value={name} onChange={(event) => setName(event.target.value)} placeholder="请输入任务名称" required /></label><label><span>所属上级</span><select value={parentId} onChange={(event) => setParentId(event.target.value)}>{parents.map(({ item, level }) => <option key={item.id} value={item.id}>{"　".repeat(level)}{item.name}</option>)}</select></label><fieldset><legend>优先级</legend>{["高", "中", "低"].map((value) => <label key={value}><input type="radio" name="priority" checked={priority === value} onChange={() => setPriority(value)} />{value}</label>)}</fieldset><div className={styles.modalRow}><label><span>开始日期</span><input type="date" defaultValue="2026-08-07" /></label><label><span>截止日期</span><input type="date" defaultValue="2026-08-21" /></label></div><footer><button type="button" onClick={onClose}>取消</button><button type="submit">创建工作项</button></footer></form></div>;
}