"use client";

import { useEffect, useMemo, useState } from "react";

import type { Market } from "@/src/domain/types";
import type { Trade } from "@/src/trading/types";
import { computePositions } from "@/src/services/paperTrading";
import { toTrade } from "@/src/repositories/tradeRepo";
import { useTradingStore } from "@/src/stores/tradingStore";

function normalizeCode(raw: string) {
  return raw.trim();
}

function toNumber(v: string) {
  const n = Number(v);
  return Number.isFinite(n) ? n : NaN;
}

export default function TradingPage() {
  const { trades, loading, error, refresh, add, remove } = useTradingStore();

  const [code, setCode] = useState("");
  const [market, setMarket] = useState<Market>("SZ");
  const [side, setSide] = useState<"BUY" | "SELL">("BUY");
  const [quantity, setQuantity] = useState("100");
  const [price, setPrice] = useState("10");
  const [fees, setFees] = useState("0");
  const [note, setNote] = useState("");

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

  const tradesParsed: Trade[] = useMemo(() => {
    return trades.map(toTrade);
  }, [trades]);

  const positions = useMemo(() => computePositions(tradesParsed), [tradesParsed]);

  const qtyNum = useMemo(() => toNumber(quantity), [quantity]);
  const priceNum = useMemo(() => toNumber(price), [price]);

  const canSubmit = useMemo(() => {
    return (
      normalizeCode(code).length > 0 &&
      qtyNum > 0 &&
      priceNum > 0 &&
      !Number.isNaN(qtyNum) &&
      !Number.isNaN(priceNum)
    );
  }, [code, qtyNum, priceNum]);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-semibold">模拟盘</h1>
        <p className="mt-1 text-sm text-black/60 dark:text-white/60">
          MVP：手动录入成交（买/卖），以平均成本计算持仓与已实现盈亏。
        </p>
      </div>

      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
        <div className="text-sm font-medium">新增成交</div>

        <form
          className="mt-3 grid gap-3 md:grid-cols-10"
          onSubmit={async (e) => {
            e.preventDefault();
            if (!canSubmit) return;

            await add({
              code: normalizeCode(code),
              market,
              side,
              quantity: qtyNum,
              price: priceNum,
              fees: fees.trim() ? toNumber(fees) : undefined,
              tradeAt: new Date().toISOString(),
              note: note.trim() || undefined,
            });

            setNote("");
          }}
        >
          <label className="md:col-span-2">
            <div className="text-xs text-black/60 dark:text-white/60">代码</div>
            <input
              value={code}
              onChange={(e) => setCode(e.target.value)}
              placeholder="例如：600519"
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            />
          </label>

          <label className="md:col-span-1">
            <div className="text-xs text-black/60 dark:text-white/60">市场</div>
            <select
              value={market}
              onChange={(e) => setMarket(e.target.value as Market)}
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            >
              <option value="SZ">SZ</option>
              <option value="SH">SH</option>
              <option value="BJ">BJ</option>
            </select>
          </label>

          <label className="md:col-span-1">
            <div className="text-xs text-black/60 dark:text-white/60">方向</div>
            <select
              value={side}
              onChange={(e) => setSide(e.target.value as "BUY" | "SELL")}
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            >
              <option value="BUY">买入</option>
              <option value="SELL">卖出</option>
            </select>
          </label>

          <label className="md:col-span-2">
            <div className="text-xs text-black/60 dark:text-white/60">数量</div>
            <input
              value={quantity}
              onChange={(e) => setQuantity(e.target.value)}
              inputMode="numeric"
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            />
          </label>

          <label className="md:col-span-2">
            <div className="text-xs text-black/60 dark:text-white/60">价格</div>
            <input
              value={price}
              onChange={(e) => setPrice(e.target.value)}
              inputMode="decimal"
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            />
          </label>

          <label className="md:col-span-2">
            <div className="text-xs text-black/60 dark:text-white/60">费用(可选)</div>
            <input
              value={fees}
              onChange={(e) => setFees(e.target.value)}
              inputMode="decimal"
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            />
          </label>

          <label className="md:col-span-8">
            <div className="text-xs text-black/60 dark:text-white/60">备注(可选)</div>
            <input
              value={note}
              onChange={(e) => setNote(e.target.value)}
              className="mt-1 w-full rounded-lg border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:border-black/30 dark:border-white/10 dark:bg-black/20 dark:focus:border-white/30"
            />
          </label>

          <div className="flex items-end md:col-span-2">
            <button
              type="submit"
              disabled={!canSubmit || loading}
              className="w-full rounded-lg bg-black px-3 py-2 text-sm font-medium text-white transition-opacity disabled:opacity-50 dark:bg-white dark:text-black"
            >
              记录成交
            </button>
          </div>
        </form>

        {error ? (
          <div className="mt-3 text-sm text-red-600 dark:text-red-400">
            {error}
          </div>
        ) : null}
      </section>

      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
        <div className="text-sm font-medium">持仓</div>
        <div className="mt-3 overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="text-left text-xs text-black/60 dark:text-white/60">
              <tr>
                <th className="py-2">代码</th>
                <th className="py-2">市场</th>
                <th className="py-2">数量</th>
                <th className="py-2">均价</th>
                <th className="py-2">已实现盈亏</th>
              </tr>
            </thead>
            <tbody>
              {positions.length === 0 ? (
                <tr>
                  <td
                    className="py-6 text-xs text-black/60 dark:text-white/60"
                    colSpan={5}
                  >
                    暂无持仓
                  </td>
                </tr>
              ) : null}

              {positions.map((p) => (
                <tr
                  key={`${p.market}:${p.code}`}
                  className="border-t border-black/5 dark:border-white/10"
                >
                  <td className="py-2 font-mono">{p.code}</td>
                  <td className="py-2">{p.market}</td>
                  <td className="py-2">{p.quantity}</td>
                  <td className="py-2">{p.avgCost.toFixed(3)}</td>
                  <td className="py-2">{p.realizedPnl.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="rounded-xl border border-black/10 p-4 dark:border-white/10">
        <div className="flex items-center justify-between gap-3">
          <div className="text-sm font-medium">交易流水</div>
          <button
            type="button"
            onClick={() => void refresh()}
            className="rounded-lg border border-black/10 px-3 py-2 text-xs transition-colors hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
          >
            刷新
          </button>
        </div>

        <div className="mt-3 overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="text-left text-xs text-black/60 dark:text-white/60">
              <tr>
                <th className="py-2">时间</th>
                <th className="py-2">代码</th>
                <th className="py-2">市场</th>
                <th className="py-2">方向</th>
                <th className="py-2">数量</th>
                <th className="py-2">价格</th>
                <th className="py-2">费用</th>
                <th className="py-2">备注</th>
                <th className="py-2">操作</th>
              </tr>
            </thead>
            <tbody>
              {trades.length === 0 ? (
                <tr>
                  <td
                    className="py-6 text-xs text-black/60 dark:text-white/60"
                    colSpan={9}
                  >
                    暂无交易
                  </td>
                </tr>
              ) : null}

              {trades.map((t) => (
                <tr key={t.tradeId} className="border-t border-black/5 dark:border-white/10">
                  <td className="py-2 text-xs text-black/60 dark:text-white/60">
                    {new Date(t.tradeAt).toLocaleString()}
                  </td>
                  <td className="py-2 font-mono">{t.code}</td>
                  <td className="py-2">{t.market}</td>
                  <td className="py-2">{t.side === "BUY" ? "买" : "卖"}</td>
                  <td className="py-2">{t.quantity}</td>
                  <td className="py-2">{t.price}</td>
                  <td className="py-2">{t.fees ?? 0}</td>
                  <td className="py-2 text-xs">{t.note ?? ""}</td>
                  <td className="py-2">
                    <button
                      type="button"
                      className="rounded-md border border-black/10 px-2 py-1 text-xs transition-colors hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
                      onClick={() => void remove(t.tradeId)}
                    >
                      删除
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {loading ? (
          <div className="mt-3 text-xs text-black/60 dark:text-white/60">
            加载中…
          </div>
        ) : null}
      </section>
    </div>
  );
}