"use client";

import { useEffect, useState } from "react";
import { listSynergies, authorizeSynergy } 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 Synergy {
  id: string;
  type: string;
  title: string;
  status: string;
  authorized?: boolean;
  description?: string;
  match_reason?: string;
}

const SYNERGY_TYPE_LABELS: Record<string, string> = {
  customer: "客户协同",
  talent: "人才协同",
  funding: "融资协同",
  supply_chain: "供应链协同",
  tech: "技术协同",
};

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

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

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

  const handleAuthorize = async (id: string) => {
    try {
      await authorizeSynergy(id);
      toast.success("授权成功");
      load();
    } catch {
      toast.error("授权失败");
    }
  };

  return (
    <PageContainer title="协同中心" description="Portfolio 内部协同匹配 → 双方授权 → 效果追踪">
      {isLoading ? (
        <LoadingSpinner />
      ) : items.length === 0 ? (
        <EmptyState description="暂无协同机会" />
      ) : (
        <div className="space-y-3">
          {items.map((item, i) => (
            <div key={i} className="rounded-lg border border-gray-200 bg-white p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Badge color="blue">{SYNERGY_TYPE_LABELS[item.type] ?? item.type}</Badge>
                  <h3 className="font-medium text-gray-900">{item.title}</h3>
                </div>
                <div className="flex items-center gap-2">
                  <Badge color={item.status === "completed" ? "green" : item.status === "authorized" ? "blue" : "gray"}>
                    {item.status}
                  </Badge>
                  {item.authorized === false && (
                    <button
                      onClick={() => handleAuthorize(item.id)}
                      className="rounded-md bg-gray-900 px-2 py-1 text-xs text-white hover:bg-gray-700"
                    >
                      授权
                    </button>
                  )}
                </div>
              </div>
              {item.description && <p className="mt-2 text-sm text-gray-600">{item.description}</p>}
              {item.match_reason && <p className="mt-1 text-xs text-gray-400">匹配理由：{item.match_reason}</p>}
            </div>
          ))}
        </div>
      )}
    </PageContainer>
  );
}