"use client";

import { useState } from "react";
import { listMajorEvents, listInquiries } from "@/lib/api-v2";
import { useScopeEffect } from "@/lib/company-scope";
import { CompanyNameTag } from "@/components/shared/CompanyNameTag";
import { PageContainer, Badge } from "@/components/shared/PageContainer";
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
import { EmptyState } from "@/components/shared/EmptyState";

/** 重大事项项。 */
interface MajorEvent {
  company_id?: string;
  event_type: string;
  title: string;
  severity: string;
  description?: string;
}

/** 追问清单项。 */
interface Inquiry {
  company_id?: string;
  status: string;
  questions?: unknown[];
}

export default function EventsPage() {
  const [events, setEvents] = useState<MajorEvent[]>([]);
  const [inquiries, setInquiries] = useState<Inquiry[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [tab, setTab] = useState<"events" | "inquiries">("events");

  useScopeEffect(() => {
    Promise.all([listMajorEvents(), listInquiries()])
      .then(([e, i]) => {
        setEvents((e.data as MajorEvent[]) ?? []);
        setInquiries((i.data as Inquiry[]) ?? []);
      })
      .catch(() => {
        setEvents([]);
        setInquiries([]);
      })
      .finally(() => setIsLoading(false));
  });

  return (
    <PageContainer title="重大事项 & 追问清单" description="AI 从月报/弱信号中自动识别重大事项 + 生成追问清单">
      <div className="flex gap-2 border-b border-gray-200">
        <button
          onClick={() => setTab("events")}
          className={`px-4 py-2 text-sm font-medium ${tab === "events" ? "border-b-2 border-gray-900 text-gray-900" : "text-gray-500"}`}
        >
          重大事项
        </button>
        <button
          onClick={() => setTab("inquiries")}
          className={`px-4 py-2 text-sm font-medium ${tab === "inquiries" ? "border-b-2 border-gray-900 text-gray-900" : "text-gray-500"}`}
        >
          追问清单
        </button>
      </div>

      {isLoading ? (
        <LoadingSpinner />
      ) : tab === "events" ? (
        events.length === 0 ? (
          <EmptyState description="暂无重大事项" />
        ) : (
          <div className="space-y-3">
            {events.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">{item.event_type}</Badge>
                    <CompanyNameTag companyId={item.company_id} />
                    <h3 className="font-medium text-gray-900">{item.title}</h3>
                  </div>
                  <Badge color={item.severity === "critical" ? "red" : item.severity === "high" ? "amber" : "gray"}>
                    {item.severity}
                  </Badge>
                </div>
                {item.description && <p className="mt-2 text-sm text-gray-600">{item.description}</p>}
              </div>
            ))}
          </div>
        )
      ) : (
        inquiries.length === 0 ? (
          <EmptyState description="暂无追问清单" />
        ) : (
          <div className="space-y-3">
            {inquiries.map((item, i) => (
              <div key={i} className="rounded-lg border border-gray-200 bg-white p-4">
                <div className="flex items-center justify-between">
                  <h3 className="font-medium text-gray-900">追问清单</h3>
                  <Badge color={item.status === "answered" ? "green" : item.status === "closed" ? "gray" : "amber"}>
                    {item.status}
                  </Badge>
                </div>
                <div className="mt-2 space-y-1">
                  {Array.isArray(item.questions) && (item.questions as unknown[]).map((q, qi) => (
                    <p key={qi} className="text-sm text-gray-600">• {String(q)}</p>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )
      )}
    </PageContainer>
  );
}