"use client";

import { Eye, PieChart, Search, Users } from "lucide-react";
import { useCallback, useEffect, useState, type ReactNode } from "react";
import {
  adminApi,
  errMessage,
  type Customer,
  type CustomerDetail,
  type Diagnosis,
  type Holding,
  type ReportItem,
} from "@/lib/admin-api";
import {
  Badge,
  Button,
  Card,
  EmptyState,
  ErrorState,
  LoadingBlock,
  Modal,
  Pagination,
  SearchInput,
  Select,
  TableWrap,
  Td,
  Th,
  formatMoney,
  formatPercent,
  formatTime,
  statusTone,
  useToast,
} from "@/components/admin/ui";

const STATUS_OPTIONS = [
  { value: "", label: "全部状态" },
  { value: "已分配", label: "已分配" },
  { value: "已签约", label: "已签约" },
  { value: "已结束", label: "已结束" },
];

const REPORT_STATUS: Record<string, string> = {
  draft: "草稿",
  sent: "已发送",
  discarded: "已废弃",
};

export function CustomersSection() {
  const toast = useToast();
  const [items, setItems] = useState<Customer[]>([]);
  const [total, setTotal] = useState(0);
  const [totalPages, setTotalPages] = useState(0);
  const [page, setPage] = useState(1);
  const [keyword, setKeyword] = useState("");
  const [status, setStatus] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const [activeId, setActiveId] = useState<number | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const result = await adminApi.customers({
        status: status || undefined,
        keyword: keyword || undefined,
        page,
        page_size: 10,
      });
      setItems(result.items ?? []);
      setTotal(result.total ?? 0);
      setTotalPages(result.total_pages ?? 0);
    } catch (e) {
      setError(errMessage(e, "客户列表加载失败"));
    } finally {
      setLoading(false);
    }
  }, [status, keyword, page]);

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

  return (
    <>
      <Card title="客户管理" description="仅展示名下客户，敏感信息由后端脱敏" bodyClassName="p-0">
        <div className="flex flex-wrap items-center gap-3 border-b border-slate-100 p-4">
          <SearchInput
            className="w-64"
            placeholder="搜索姓名或手机号"
            value={keyword}
            onChange={(event) => {
              setKeyword(event.target.value);
              setPage(1);
            }}
          />
          <Select value={status} onChange={(event) => { setStatus(event.target.value); setPage(1); }}>
            {STATUS_OPTIONS.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </Select>
          <Button size="sm" className="ml-auto" onClick={() => void load()} loading={loading}>
            <Search className="h-3.5 w-3.5" />
            查询
          </Button>
        </div>

        {loading ? (
          <LoadingBlock />
        ) : error ? (
          <ErrorState message={error} onRetry={() => void load()} />
        ) : items.length === 0 ? (
          <EmptyState text="没有匹配的客户" />
        ) : (
          <>
            <TableWrap>
              <thead>
                <tr>
                  <Th>客户</Th>
                  <Th>客户等级</Th>
                  <Th>风险等级</Th>
                  <Th>总资产</Th>
                  <Th>关系状态</Th>
                  <Th className="text-right">操作</Th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-50">
                {items.map((customer) => (
                  <tr key={customer.customer_id} className="transition-colors hover:bg-slate-50">
                    <Td>
                      <div className="flex items-center gap-3">
                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-sm font-medium text-slate-600">
                          <Users className="h-4 w-4" />
                        </div>
                        <div>
                          <p className="font-medium text-slate-900">{customer.real_name ?? "匿名客户"}</p>
                          <p className="text-xs text-slate-400">{customer.phone ?? "--"}</p>
                        </div>
                      </div>
                    </Td>
                    <Td>{customer.customer_level ?? "--"}</Td>
                    <Td>{customer.risk_level ?? "--"}</Td>
                    <Td>{customer.total_assets !== null ? formatMoney(customer.total_assets) : "--"}</Td>
                    <Td>
                      <Badge tone={statusTone(customer.relation_status)}>{customer.relation_status}</Badge>
                    </Td>
                    <Td>
                      <div className="flex justify-end gap-2">
                        <Button size="sm" onClick={() => setActiveId(customer.customer_id)}>
                          <Eye className="h-3.5 w-3.5" />
                          详情
                        </Button>
                      </div>
                    </Td>
                  </tr>
                ))}
              </tbody>
            </TableWrap>
            <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
          </>
        )}
      </Card>

      {activeId !== null && (
        <CustomerDetailModal
          customerId={activeId}
          onClose={() => setActiveId(null)}
          onChanged={() => void load()}
          onToast={(text, tone) => toast(text, tone)}
        />
      )}
    </>
  );
}

function CustomerDetailModal({
  customerId,
  onClose,
  onChanged,
  onToast,
}: {
  customerId: number;
  onClose: () => void;
  onChanged: () => void;
  onToast: (text: string, tone?: "success" | "error" | "info") => void;
}) {
  const [tab, setTab] = useState<"profile" | "holdings" | "diagnosis" | "reports">("profile");
  const [detail, setDetail] = useState<CustomerDetail | null>(null);
  const [holdings, setHoldings] = useState<Holding[]>([]);
  const [diagnosis, setDiagnosis] = useState<Diagnosis | null>(null);
  const [reports, setReports] = useState<ReportItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [unmasked, setUnmasked] = useState(false);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    void (async () => {
      setLoading(true);
      setError("");
      try {
        const [base, holdingList, diag, reportPage] = await Promise.all([
          adminApi.customer(customerId),
          adminApi.holdings(customerId).catch(() => []),
          adminApi.diagnosis(customerId).catch(() => null),
          adminApi.reports(customerId).catch(() => null),
        ]);
        setDetail(base);
        setHoldings(holdingList ?? []);
        setDiagnosis(diag);
        setReports(reportPage?.items ?? []);
      } catch (e) {
        setError(errMessage(e, "客户详情加载失败"));
      } finally {
        setLoading(false);
      }
    })();
  }, [customerId]);

  async function unmaskPhone() {
    setBusy(true);
    try {
      const result = await adminApi.customer(customerId, true);
      setDetail(result);
      setUnmasked(true);
      onToast("已查看完整手机号，操作已记入审计台账", "info");
    } catch (e) {
      onToast(errMessage(e, "查看失败"), "error");
    } finally {
      setBusy(false);
    }
  }

  async function changeRelation(action: "sign" | "close") {
    const text = action === "sign" ? "确认签约该客户？" : "确认结束对该客户的服务？结束後不可恢复。";
    if (!window.confirm(text)) return;
    setBusy(true);
    try {
      await adminApi.setRelation(customerId, action);
      onToast(action === "sign" ? "已签约" : "已结束服务");
      const refreshed = await adminApi.customer(customerId, unmasked);
      setDetail(refreshed);
      onChanged();
    } catch (e) {
      onToast(errMessage(e, "操作失败"), "error");
    } finally {
      setBusy(false);
    }
  }

  const tabs = [
    { key: "profile", label: "基本资料" },
    { key: "holdings", label: `持仓 (${holdings.length})` },
    { key: "diagnosis", label: "组合诊断" },
    { key: "reports", label: `历史报告 (${reports.length})` },
  ] as const;

  return (
    <Modal
      open
      title={`客户 #${customerId} 详情`}
      onClose={onClose}
      footer={
        <>
          {detail?.relation_status === "已签约" ? (
            <Button variant="danger" loading={busy} onClick={() => void changeRelation("close")}>
              结束服务
            </Button>
          ) : (
            <Button variant="primary" loading={busy} onClick={() => void changeRelation("sign")}>
              签约
            </Button>
          )}
        </>
      }
    >
      {loading ? (
        <LoadingBlock />
      ) : error ? (
        <ErrorState message={error} />
      ) : (
        <div className="space-y-4">
          <div className="flex flex-wrap gap-2 border-b border-slate-100 pb-3">
            {tabs.map((item) => (
              <button
                key={item.key}
                onClick={() => setTab(item.key)}
                className={
                  tab === item.key
                    ? "rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-medium text-indigo-600"
                    : "rounded-lg px-3 py-1.5 text-xs text-slate-500 hover:bg-slate-100"
                }
              >
                {item.label}
              </button>
            ))}
          </div>

          {tab === "profile" && detail && (
            <dl className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
              <Field label="姓名" value={detail.real_name ?? "--"} />
              <Field
                label="手机号"
                value={
                  <span className="flex items-center gap-2">
                    {detail.phone ?? "--"}
                    {!unmasked && (
                      <button
                        onClick={() => void unmaskPhone()}
                        disabled={busy}
                        className="text-xs text-indigo-600 hover:underline disabled:opacity-50"
                      >
                        查看完整号码
                      </button>
                    )}
                  </span>
                }
              />
              <Field label="客户等级" value={detail.customer_level ?? "--"} />
              <Field label="风险等级" value={detail.risk_level ?? "--"} />
              <Field label="风险评分" value={detail.risk_score?.toString() ?? "--"} />
              <Field label="总资产" value={formatMoney(detail.total_assets)} />
              <Field
                label="关系状态"
                value={<Badge tone={statusTone(detail.relation_status)}>{detail.relation_status}</Badge>}
              />
              <Field label="签约时间" value={formatTime(detail.signed_time)} />
              <Field label="分配时间" value={formatTime(detail.assigned_time)} />
            </dl>
          )}

          {tab === "holdings" &&
            (holdings.length === 0 ? (
              <EmptyState text="该客户暂无持仓" />
            ) : (
              <div className="max-h-80 overflow-y-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="text-xs text-slate-500">
                      <th className="py-2 text-left">产品</th>
                      <th className="py-2 text-right">市值</th>
                      <th className="py-2 text-right">浮动盈亏</th>
                      <th className="py-2 text-right">收益率</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {holdings.map((holding) => (
                      <tr key={holding.product_id}>
                        <td className="py-2">
                          <p className="text-slate-900">{holding.product_name ?? "--"}</p>
                          <p className="text-xs text-slate-400">{holding.product_code ?? ""}</p>
                        </td>
                        <td className="py-2 text-right">{formatMoney(holding.current_value)}</td>
                        <td
                          className={`py-2 text-right ${
                            Number(holding.profit_loss) >= 0 ? "text-red-600" : "text-emerald-600"
                          }`}
                        >
                          {formatMoney(holding.profit_loss)}
                        </td>
                        <td
                          className={`py-2 text-right ${
                            Number(holding.profit_ratio) >= 0 ? "text-red-600" : "text-emerald-600"
                          }`}
                        >
                          {formatPercent(Number(holding.profit_ratio), 2)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ))}

          {tab === "diagnosis" &&
            (diagnosis ? (
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="rounded-lg bg-slate-50 p-4">
                    <p className="text-xs text-slate-500">持仓总市值</p>
                    <p className="mt-1 text-lg font-semibold">{formatMoney(diagnosis.total_value)}</p>
                  </div>
                  <div className="rounded-lg bg-slate-50 p-4">
                    <p className="text-xs text-slate-500">最大单一产品占比</p>
                    <p className="mt-1 text-lg font-semibold">
                      {formatPercent(diagnosis.concentration?.top_product_ratio ?? 0)}
                    </p>
                    <p className="mt-1 truncate text-xs text-slate-400">
                      {diagnosis.concentration?.top_product?.product_name ?? "--"}
                    </p>
                  </div>
                </div>
                <div>
                  <p className="mb-2 flex items-center gap-2 text-xs font-medium text-slate-500">
                    <PieChart className="h-3.5 w-3.5" />
                    资产配置分布
                  </p>
                  {Object.keys(diagnosis.allocation ?? {}).length === 0 ? (
                    <EmptyState text="暂无配置数据" />
                  ) : (
                    <div className="space-y-2">
                      {Object.entries(diagnosis.allocation).map(([type, value]) => {
                        const totalValue = Number(diagnosis.total_value) || 1;
                        const ratio = Number(value) / totalValue;
                        return (
                          <div key={type}>
                            <div className="mb-1 flex justify-between text-xs">
                              <span className="text-slate-600">{type}</span>
                              <span className="text-slate-900">
                                {formatMoney(value)} · {formatPercent(ratio)}
                              </span>
                            </div>
                            <div className="h-2 overflow-hidden rounded-full bg-slate-100">
                              <div
                                className="h-full rounded-full bg-indigo-500"
                                style={{ width: `${Math.min(ratio * 100, 100)}%` }}
                              />
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              </div>
            ) : (
              <EmptyState text="暂无诊断数据" />
            ))}

          {tab === "reports" &&
            (reports.length === 0 ? (
              <EmptyState text="暂无历史建议报告" />
            ) : (
              <ul className="max-h-80 divide-y divide-slate-100 overflow-y-auto">
                {reports.map((report) => (
                  <li key={report.report_id} className="flex items-center justify-between gap-3 py-3">
                    <div className="min-w-0">
                      <p className="truncate text-sm text-slate-900">{report.title ?? "未命名报告"}</p>
                      <p className="text-xs text-slate-400">
                        {report.intent ?? "--"} · {formatTime(report.send_time)}
                      </p>
                    </div>
                    <Badge tone={statusTone(report.send_status)}>
                      {REPORT_STATUS[report.send_status] ?? report.send_status}
                    </Badge>
                  </li>
                ))}
              </ul>
            ))}
        </div>
      )}
    </Modal>
  );
}

function Field({ label, value }: { label: string; value: ReactNode }) {
  return (
    <div>
      <dt className="text-xs text-slate-500">{label}</dt>
      <dd className="mt-0.5 text-slate-900">{value}</dd>
    </div>
  );
}