"use client";

import { useEffect, useState } from "react";
import { Lightbulb } from "lucide-react";
import { listWeakSignals } from "@/lib/api-v2";
import { PageContainer, Badge, TableEmpty } from "@/components/shared/PageContainer";
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
import { EmptyState } from "@/components/shared/EmptyState";

const SIGNAL_TYPE_LABELS: Record<string, string> = {
  technical: "技术",
  sentiment: "情绪",
  org: "组织",
  market: "市场",
};

export default function WeakSignalsPage() {
  const [items, setItems] = useState<Record<string, any>[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    listWeakSignals()
      .then((resp) => setItems((resp.data as Record<string, any>[]) ?? []))
      .catch(() => setItems([]))
      .finally(() => setIsLoading(false));
  }, []);

  return (
    <PageContainer title="弱信号监控" description="技术/情绪/组织/市场四类弱信号采集与关联分析">
      {isLoading ? (
        <LoadingSpinner />
      ) : items.length === 0 ? (
        <EmptyState description="暂无弱信号" />
      ) : (
        <div className="overflow-x-auto rounded-lg border border-gray-200">
          <table className="min-w-full divide-y divide-gray-200 text-sm">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-2 text-left font-medium text-gray-500">类型</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">内容</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">置信度</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">风险概率</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">状态</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100 bg-white">
              {items.map((item, i) => (
                <tr key={i}>
                  <td className="px-4 py-2">
                    <Badge color="blue">{SIGNAL_TYPE_LABELS[item.signal_type as string] ?? item.signal_type}</Badge>
                  </td>
                  <td className="px-4 py-2 text-gray-900 max-w-xs truncate">{item.content as string}</td>
                  <td className="px-4 py-2 text-gray-600">{((item.confidence as number) * 100).toFixed(0)}%</td>
                  <td className="px-4 py-2">
                    {item.risk_probability ? (
                      <Badge color={(item.risk_probability as number) > 0.6 ? "red" : (item.risk_probability as number) > 0.3 ? "amber" : "green"}>
                        {((item.risk_probability as number) * 100).toFixed(0)}%
                      </Badge>
                    ) : "-"}
                  </td>
                  <td className="px-4 py-2">
                    <Badge color={item.status === "alerted" ? "red" : item.status === "correlated" ? "amber" : "gray"}>
                      {item.status as string}
                    </Badge>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </PageContainer>
  );
}