"use client";

import Link from "next/link";
import {
  ArrowLeft,
  ArrowUpRight,
  ChevronRight,
  CircleUserRound,
  Landmark,
  RefreshCw,
  ShieldCheck,
  WalletCards,
  X,
} from "lucide-react";
import { FormEvent, useEffect, useMemo, useState } from "react";
import { apiFetch } from "@/lib/api";
import { clearToken } from "@/lib/auth";
import type { UserPayload } from "@/types/api";

interface Balance {
  balance?: number | string;
  available_balance?: number | string;
}

interface Holding {
  product_id?: number;
  product_name?: string;
  product_code?: string;
  shares?: number | string;
  cost_amount?: number | string;
  current_value?: number | string;
  market_value?: number | string;
  profit_loss?: number | string;
  profit_ratio?: number | string;
}

/** /products 列表项（只取展示与跳转需要的字段）。 */
interface ProductLite {
  id?: number;
  product_code?: string;
  product_name?: string;
  product_type?: string;
  risk_level?: string;
}

interface ProductPage {
  items?: ProductLite[];
}

/**
 * 持仓接口（/holdings）只返回 product_id，不含基金名称与代码，
 * 因此用产品列表（status=全部，含暂停/到期/清盘）在前端做一次映射，
 * 以便展示「具体是哪一只基金」并跳转到详情页。后端不改动。
 */
async function loadProductMap(): Promise<Map<number, ProductLite>> {
  const page = await apiFetch<ProductPage>("/products?status=全部&page_size=100");
  const map = new Map<number, ProductLite>();
  for (const item of page.items ?? []) {
    if (typeof item.id === "number") map.set(item.id, item);
  }
  return map;
}

function toNumber(value: number | string | undefined | null): number | null {
  if (value === undefined || value === null || value === "") return null;
  const n = Number(value);
  return Number.isFinite(n) ? n : null;
}

function formatMoney(value: number | string | undefined | null): string {
  const n = toNumber(value);
  if (n === null) return "--";
  return n.toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function formatNumber(value: number | string | undefined | null, digits = 4): string {
  const n = toNumber(value);
  if (n === null) return "--";
  return n.toLocaleString("zh-CN", { minimumFractionDigits: 0, maximumFractionDigits: digits });
}

/** 盈亏着色：盈利红、亏损绿（国内习惯）。 */
function profitTone(value: number | string | undefined | null): string {
  const n = toNumber(value);
  if (n === null || n === 0) return "text-slate-500";
  return n > 0 ? "text-rose-600" : "text-emerald-600";
}

/**
 * /auth/me 不返回 real_name，客户账号的用户名即手机号，
 * 直接展示会暴露完整号码，这里做脱敏（139****0041）。
 */
function maskAccountName(value: string | undefined | null): string {
  if (!value) return "您的华夏基金账户";
  return /^\d{11}$/.test(value) ? `${value.slice(0, 3)}****${value.slice(7)}` : value;
}

export default function AccountPage() {
  const [user, setUser] = useState<UserPayload | null>(null);
  const [balance, setBalance] = useState<Balance | null>(null);
  const [holdings, setHoldings] = useState<Holding[]>([]);
  const [productMap, setProductMap] = useState<Map<number, ProductLite>>(() => new Map());
  const [state, setState] = useState<"loading" | "ready" | "error">("loading");
  const [action, setAction] = useState<"purchase" | "redeem" | null>(null);

  async function loadAccount() {
    setState("loading");
    try {
      const [me, account, holdingList] = await Promise.all([
        apiFetch<{ user: UserPayload }>("/auth/me"),
        apiFetch<Balance>("/account/balance"),
        apiFetch<Holding[]>("/holdings"),
      ]);
      setUser(me.user);
      setBalance(account);
      setHoldings(holdingList);
      setState("ready");
    } catch {
      setState("error");
    }
    // 产品映射失败不影响账户主体数据展示，名称回退为「基金 #id」。
    try {
      setProductMap(await loadProductMap());
    } catch {
      /* 静默降级 */
    }
  }

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

  function signOut() {
    clearToken();
    window.location.href = "/login";
  }

  /* 持仓总金额：各持仓当前市值合计。 */
  const totalHoldingValue = useMemo(
    () =>
      holdings.reduce(
        (sum, item) => sum + (toNumber(item.current_value ?? item.market_value) ?? 0),
        0
      ),
    [holdings]
  );

  return (
    <main className="min-h-screen bg-slate-50">
      <header className="border-b border-slate-200 bg-white">
        <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-8">
          <Link href="/" className="flex items-center gap-3 text-[var(--brand-navy)]">
            <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-[var(--brand-primary)] font-bold text-white">
              华
            </span>
            <span className="font-semibold">华夏基金</span>
          </Link>
          <div className="flex items-center gap-5 text-sm">
            <Link href="/products" className="text-slate-500 hover:text-[var(--brand-primary)]">
              基金产品
            </Link>
            <button onClick={signOut} className="text-slate-500 hover:text-rose-600">
              退出登录
            </button>
          </div>
        </div>
      </header>

      <section className="mx-auto max-w-7xl px-8 py-12">
        <Link
          href="/"
          className="inline-flex items-center gap-2 text-sm text-slate-500 hover:text-[var(--brand-primary)]"
        >
          <ArrowLeft className="h-4 w-4" />
          返回首页
        </Link>

        <div className="mt-10 flex items-end justify-between">
          <div>
            <p className="text-sm text-slate-500">Personal Account</p>
            <h1 className="mt-2 text-4xl font-semibold text-[var(--brand-navy)]">用户中心</h1>
            <p className="mt-3 text-sm text-slate-500">
              {maskAccountName(user?.real_name ?? user?.username)}
            </p>
          </div>
          <button
            onClick={() => void loadAccount()}
            aria-label="刷新账户数据"
            className="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-600 hover:border-[var(--brand-primary)] hover:text-[var(--brand-primary)]"
          >
            <RefreshCw className="h-4 w-4" />
            刷新
          </button>
        </div>

        {state === "loading" && <Notice text="正在加载账户数据..." />}
        {state === "error" && (
          <Notice text="账户数据加载失败，请确认已登录且后端服务可用。" />
        )}

        {state === "ready" && (
          <>
            <div className="mt-8 grid gap-4 md:grid-cols-3">
              <div className="rounded-xl bg-[var(--brand-navy)] p-6 text-white">
                <WalletCards className="h-6 w-6 text-blue-200" />
                <p className="mt-8 text-sm text-blue-100">账户余额</p>
                <p className="mt-2 text-3xl font-semibold">
                  ¥{formatMoney(balance?.balance)}
                </p>
              </div>
              <div className="rounded-xl border border-slate-200 bg-white p-6">
                <Landmark className="h-6 w-6 text-[var(--brand-primary)]" />
                <p className="mt-8 text-sm text-slate-500">持仓总金额</p>
                <p className="mt-2 text-3xl font-semibold text-[var(--brand-navy)]">
                  ¥{formatMoney(totalHoldingValue)}
                </p>
                <p className="mt-2 text-xs text-slate-400">
                  共 {holdings.length} 只基金
                </p>
              </div>
              <div className="rounded-xl border border-slate-200 bg-white p-6">
                <ShieldCheck className="h-6 w-6 text-emerald-500" />
                <p className="mt-8 text-sm text-slate-500">风险测评</p>
                <p className="mt-2 text-lg font-semibold text-[var(--brand-navy)]">待完成测评</p>
                <p className="mt-2 text-xs text-slate-400">当前后端仅提供提交接口</p>
              </div>
            </div>

            <div className="mt-6 grid gap-6 lg:grid-cols-[1.3fr_.7fr]">
              <div className="rounded-xl border border-slate-200 bg-white">
                <div className="flex items-center gap-3 border-b border-slate-100 px-6 py-5">
                  <CircleUserRound className="h-5 w-5 text-[var(--brand-primary)]" />
                  <h2 className="font-semibold text-slate-900">我的持仓</h2>
                </div>

                {holdings.length ? (
                  <div className="divide-y divide-slate-100">
                    {holdings.map((item) => {
                      const product = item.product_id ? productMap.get(item.product_id) : undefined;
                      const code = item.product_code ?? product?.product_code;
                      const name =
                        item.product_name ??
                        product?.product_name ??
                        (item.product_id ? `基金 #${item.product_id}` : "未知基金");
                      const meta = [code, product?.product_type, product?.risk_level]
                        .filter(Boolean)
                        .join(" · ");
                      const row = (
                        <>
                          <div className="min-w-0">
                            <p className="truncate font-medium text-slate-900">{name}</p>
                            <p className="mt-1 text-xs text-slate-400">
                              {meta || "暂无产品信息"}
                            </p>
                          </div>
                          <div className="flex shrink-0 items-center gap-3 text-right">
                            <div>
                              <p className="text-sm font-semibold text-slate-900">
                                ¥{formatMoney(item.current_value ?? item.market_value)}
                              </p>
                              <p className="mt-1 text-xs text-slate-400">
                                份额 {formatNumber(item.shares)} · 盈亏{" "}
                                <span className={profitTone(item.profit_loss)}>
                                  {formatMoney(item.profit_loss)}
                                </span>
                              </p>
                            </div>
                            {code && (
                              <ChevronRight className="h-4 w-4 text-slate-300 transition-colors group-hover:text-[var(--brand-primary)]" />
                            )}
                          </div>
                        </>
                      );

                      return code ? (
                        <Link
                          key={`${item.product_id}-${code}`}
                          href={`/products/${encodeURIComponent(code)}`}
                          aria-label={`查看 ${name} 详情`}
                          className="group flex items-center justify-between gap-4 px-6 py-5 transition-colors hover:bg-slate-50"
                        >
                          {row}
                        </Link>
                      ) : (
                        <div
                          key={`${item.product_id}-unknown`}
                          className="flex items-center justify-between gap-4 px-6 py-5"
                        >
                          {row}
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  <p className="px-6 py-10 text-center text-sm text-slate-400">暂无持仓数据</p>
                )}
              </div>

              <div className="space-y-4">
                <div className="rounded-xl border border-slate-200 bg-white p-6">
                  <h2 className="font-semibold text-slate-900">快捷操作</h2>
                  <div className="mt-5 grid gap-3">
                    <button
                      onClick={() => setAction("purchase")}
                      className="flex items-center justify-between rounded-lg bg-[var(--brand-primary)] px-4 py-3 text-sm font-medium text-white hover:bg-[var(--brand-primary-dark)]"
                    >
                      申购基金 <ArrowUpRight className="h-4 w-4" />
                    </button>
                    <button
                      onClick={() => setAction("redeem")}
                      className="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 text-sm font-medium text-slate-700 hover:border-[var(--brand-primary)] hover:text-[var(--brand-primary)]"
                    >
                      赎回基金 <ArrowUpRight className="h-4 w-4" />
                    </button>
                  </div>
                </div>
                <div className="rounded-xl border border-slate-200 bg-white p-6">
                  <h2 className="font-semibold text-slate-900">交易记录</h2>
                  <p className="mt-3 text-sm leading-6 text-slate-500">
                    当前后端暂未提供交易记录查询接口，页面不会展示虚构数据。
                  </p>
                </div>
                <div className="rounded-xl border border-slate-200 bg-white p-6">
                  <h2 className="font-semibold text-slate-900">消息通知</h2>
                  <p className="mt-3 text-sm leading-6 text-slate-500">
                    当前后端暂未提供用户消息查询接口。
                  </p>
                </div>
              </div>
            </div>
          </>
        )}
      </section>

      {action && (
        <TradeModal
          type={action}
          holdings={holdings}
          onClose={() => setAction(null)}
          onDone={() => {
            setAction(null);
            void loadAccount();
          }}
        />
      )}
    </main>
  );
}

function TradeModal({
  type,
  holdings,
  onClose,
  onDone,
}: {
  type: "purchase" | "redeem";
  holdings: Holding[];
  onClose: () => void;
  onDone: () => void;
}) {
  const [productId, setProductId] = useState(String(holdings[0]?.product_id ?? ""));
  const [value, setValue] = useState("");
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);

  async function submit(event: FormEvent) {
    event.preventDefault();
    setLoading(true);
    setMessage("");
    try {
      await apiFetch(type === "purchase" ? "/purchase" : "/redeem", {
        method: "POST",
        body: JSON.stringify(
          type === "purchase"
            ? { product_id: Number(productId), amount: value }
            : { product_id: Number(productId), shares: value }
        ),
      });
      onDone();
    } catch (error) {
      setMessage(error instanceof Error ? error.message : "操作失败，请稍后重试");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/50 p-6">
      <div
        role="dialog"
        aria-modal="true"
        aria-label={type === "purchase" ? "申购基金" : "赎回基金"}
        className="w-full max-w-md rounded-2xl bg-white p-7 shadow-2xl"
      >
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-[var(--brand-navy)]">
            {type === "purchase" ? "申购基金" : "赎回基金"}
          </h2>
          <button
            onClick={onClose}
            aria-label="关闭弹窗"
            className="rounded-lg p-2 text-slate-400 hover:bg-slate-100"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        <form onSubmit={submit} className="mt-6 space-y-4">
          <label className="block text-sm font-medium text-slate-700">
            基金产品 ID
            <input
              required
              type="number"
              min="1"
              value={productId}
              onChange={(event) => setProductId(event.target.value)}
              className="mt-2 w-full rounded-lg border border-slate-200 px-3 py-3 outline-none focus:border-[var(--brand-primary)]"
            />
          </label>
          <label className="block text-sm font-medium text-slate-700">
            {type === "purchase" ? "申购金额" : "赎回份额"}
            <input
              required
              min="0.01"
              step="0.01"
              type="number"
              value={value}
              onChange={(event) => setValue(event.target.value)}
              className="mt-2 w-full rounded-lg border border-slate-200 px-3 py-3 outline-none focus:border-[var(--brand-primary)]"
            />
          </label>
          {message && <p className="text-sm text-rose-600">{message}</p>}
          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-lg bg-[var(--brand-primary)] px-4 py-3 text-sm font-medium text-white hover:bg-[var(--brand-primary-dark)] disabled:opacity-60"
          >
            {loading ? "提交中..." : "确认提交"}
          </button>
        </form>
      </div>
    </div>
  );
}

function Notice({ text }: { text: string }) {
  return (
    <div className="mt-8 rounded-xl border border-slate-200 bg-white p-8 text-sm text-slate-500">
      {text}
    </div>
  );
}