"use client";

import { useEffect, useState } from "react";
import {Plus } from "lucide-react";
import { listTasks, updateTask } from "@/lib/api-v2";
import { PageContainer, Badge } from "@/components/shared/PageContainer";
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
import { EmptyState } from "@/components/shared/EmptyState";
import { toast } from "sonner";

/** 任务项。 */
interface TaskItem {
  id: string;
  title: string;
  status: string;
  priority: string;
  description?: string;
}

const STATUS_LABELS: Record<string, string> = {
  todo: "待办",
  in_progress: "进行中",
  done: "已完成",
  cancelled: "已取消",
};

const PRIORITY_COLORS: Record<string, "red" | "amber" | "gray" | "blue"> = {
  urgent: "red",
  high: "amber",
  medium: "gray",
  low: "blue",
};

export default function TasksPage() {
  const [items, setItems] = useState<TaskItem[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  const load = () => {
    listTasks()
      .then((resp) => setItems((resp.data as TaskItem[]) ?? []))
      .catch(() => setItems([]))
      .finally(() => setIsLoading(false));
  };

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

  const handleStatusChange = async (id: string, status: string) => {
    try {
      await updateTask(id, { status });
      toast.success("状态已更新");
      load();
    } catch {
      toast.error("更新失败");
    }
  };

  const columns = ["todo", "in_progress", "done"];

  return (
    <PageContainer
      title="任务看板"
      description="投后任务管理 — 来源：风险/月报/协同/手动"
      actions={
        <button className="flex items-center gap-1 rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white hover:bg-gray-700">
          <Plus size={16} /> 新建任务
        </button>
      }
    >
      {isLoading ? (
        <LoadingSpinner />
      ) : items.length === 0 ? (
        <EmptyState description="暂无任务" />
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          {columns.map((col) => (
            <div key={col} className="rounded-lg border border-gray-200 bg-gray-50 p-3">
              <h3 className="mb-2 text-sm font-medium text-gray-700">{STATUS_LABELS[col]}</h3>
              <div className="space-y-2">
                {items.filter((i) => i.status === col).map((item, i) => (
                  <div key={i} className="rounded-md border border-gray-200 bg-white p-3">
                    <div className="flex items-start justify-between">
                      <span className="text-sm font-medium text-gray-900">{item.title}</span>
                      <Badge color={PRIORITY_COLORS[item.priority] ?? "gray"}>
                        {item.priority}
                      </Badge>
                    </div>
                    {item.description && <p className="mt-1 text-xs text-gray-500">{item.description}</p>}
                    <select
                      value={item.status}
                      onChange={(e) => handleStatusChange(item.id, e.target.value)}
                      className="mt-2 w-full rounded border border-gray-200 px-2 py-1 text-xs"
                    >
                      {Object.entries(STATUS_LABELS).map(([k, v]) => (
                        <option key={k} value={k}>{v}</option>
                      ))}
                    </select>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </PageContainer>
  );
}