"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { authFetch } from "@/lib/auth";
import { useAuth } from "@/lib/auth";
import Link from "next/link";
import { ArrowLeft, Save, Info } from "lucide-react";

// ─── Types ────────────────────────────────────────────────────────────────────
export interface StrategyFormData {
  display_name: string;
  symbol: string;
  direction: string;
  initial_balance: number;
  cvd_fast_window: string;
  cvd_slow_window: string;
  weight_direction: number;
  weight_env: number;
  weight_aux: number;
  weight_momentum: number;
  entry_score: number;
  gate_obi_enabled: boolean;
  obi_threshold: number;
  gate_whale_enabled: boolean;
  whale_cvd_threshold: number;
  gate_vol_enabled: boolean;
  atr_percentile_min: number;
  gate_spot_perp_enabled: boolean;
  spot_perp_threshold: number;
  sl_atr_multiplier: number;
  tp1_ratio: number;
  tp2_ratio: number;
  timeout_minutes: number;
  flip_threshold: number;
  description: string;
}

export const DEFAULT_FORM: StrategyFormData = {
  display_name: "",
  symbol: "BTCUSDT",
  direction: "both",
  initial_balance: 10000,
  cvd_fast_window: "30m",
  cvd_slow_window: "4h",
  weight_direction: 55,
  weight_env: 25,
  weight_aux: 15,
  weight_momentum: 5,
  entry_score: 75,
  gate_obi_enabled: true,
  obi_threshold: 0.3,
  gate_whale_enabled: true,
  whale_cvd_threshold: 0.0,
  gate_vol_enabled: true,
  atr_percentile_min: 20,
  gate_spot_perp_enabled: false,
  spot_perp_threshold: 0.002,
  sl_atr_multiplier: 1.5,
  tp1_ratio: 0.75,
  tp2_ratio: 1.5,
  timeout_minutes: 240,
  flip_threshold: 80,
  description: "",
};

// ─── Helper Components ────────────────────────────────────────────────────────
function FieldLabel({ label, hint }: { label: string; hint?: string }) {
  return (
    <div className="flex items-center gap-1 mb-1">
      <span className="text-xs font-medium text-slate-600">{label}</span>
      {hint && (
        <span className="group relative">
          <Info size={11} className="text-slate-400 cursor-help" />
          <span className="hidden group-hover:block absolute left-4 top-0 z-10 w-48 text-[10px] bg-slate-800 text-white rounded px-2 py-1">
            {hint}
          </span>
        </span>
      )}
    </div>
  );
}

function NumberInput({
  value, onChange, min, max, step = 1, disabled = false
}: {
  value: number; onChange: (v: number) => void;
  min: number; max: number; step?: number; disabled?: boolean;
}) {
  return (
    <input
      type="number"
      value={value}
      min={min}
      max={max}
      step={step}
      disabled={disabled}
      onChange={(e) => {
        const v = parseFloat(e.target.value);
        if (!isNaN(v)) onChange(Math.min(max, Math.max(min, v)));
      }}
      className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-300 disabled:bg-slate-50 disabled:text-slate-400"
    />
  );
}

function SelectInput({
  value, onChange, options
}: {
  value: string; onChange: (v: string) => void;
  options: { label: string; value: string }[];
}) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-300 bg-white"
    >
      {options.map((o) => (
        <option key={o.value} value={o.value}>{o.label}</option>
      ))}
    </select>
  );
}

function GateRow({
  label, hint, enabled, onToggle, children
}: {
  label: string; hint: string; enabled: boolean; onToggle: () => void; children: React.ReactNode;
}) {
  return (
    <div className={`border rounded-lg p-3 transition-colors ${enabled ? "border-blue-200 bg-blue-50/30" : "border-slate-200 bg-slate-50/50"}`}>
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-1">
          <span className="text-xs font-medium text-slate-700">{label}</span>
          <span className="group relative">
            <Info size={11} className="text-slate-400 cursor-help" />
            <span className="hidden group-hover:block absolute left-4 top-0 z-10 w-52 text-[10px] bg-slate-800 text-white rounded px-2 py-1">
              {hint}
            </span>
          </span>
        </div>
        <button
          type="button"
          onClick={onToggle}
          className={`relative inline-flex items-center w-10 h-5 rounded-full transition-colors flex-shrink-0 ${enabled ? "bg-blue-500" : "bg-slate-300"}`}
        >
          <span className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${enabled ? "translate-x-5" : "translate-x-0"}`} />
        </button>
      </div>
      {enabled && <div className="mt-2">{children}</div>}
    </div>
  );
}

// ─── Main Form Component ──────────────────────────────────────────────────────
interface StrategyFormProps {
  mode: "create" | "edit";
  initialData: StrategyFormData;
  strategyId?: string;
  onSuccess?: (id: string) => void;
  isBalanceEditable?: boolean;
}

export default function StrategyForm({ mode, initialData, strategyId, onSuccess, isBalanceEditable = true }: StrategyFormProps) {
  useAuth();
  const router = useRouter();
  const [form, setForm] = useState<StrategyFormData>(initialData);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  const set = <K extends keyof StrategyFormData>(key: K, value: StrategyFormData[K]) => {
    setForm((prev) => ({ ...prev, [key]: value }));
  };

  const weightsTotal = form.weight_direction + form.weight_env + form.weight_aux + form.weight_momentum;
  const weightsOk = weightsTotal === 100;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!weightsOk) {
      setError(`权重合计必须等于 100，当前为 ${weightsTotal}`);
      return;
    }
    if (!form.display_name.trim()) {
      setError("策略名称不能为空");
      return;
    }
    setError("");
    setSubmitting(true);

    try {
      const payload: Record<string, unknown> = { ...form };
      if (!payload.description) delete payload.description;

      let res: Response;
      if (mode === "create") {
        res = await authFetch("/api/strategies", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });
      } else {
        // Edit: only send changed fields (excluding symbol & initial_balance)
        const { symbol: _s, initial_balance: _b, ...editPayload } = payload;
        void _s; void _b;
        res = await authFetch(`/api/strategies/${strategyId}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(editPayload),
        });
      }

      if (!res.ok) {
        const err = await res.json();
        throw new Error(err.detail?.[0]?.msg || err.detail || "请求失败");
      }
      const data = await res.json();
      const newId = data.strategy?.strategy_id || strategyId || "";
      if (onSuccess) onSuccess(newId);
      else router.push(`/strategy-plaza/${newId}`);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "未知错误");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* ── 基础信息 ── */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-700 mb-3">基础信息</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <FieldLabel label="策略名称" hint="自由命名，最多50字符" />
            <input
              type="text"
              value={form.display_name}
              onChange={(e) => set("display_name", e.target.value)}
              placeholder="例如：我的BTC激进策略"
              maxLength={50}
              className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-300"
            />
          </div>
          <div>
            <FieldLabel label="交易对" />
            <SelectInput
              value={form.symbol}
              onChange={(v) => set("symbol", v)}
              options={[
                { label: "BTC/USDT", value: "BTCUSDT" },
                { label: "ETH/USDT", value: "ETHUSDT" },
                { label: "SOL/USDT", value: "SOLUSDT" },
                { label: "XRP/USDT", value: "XRPUSDT" },
              ]}
            />
          </div>
          <div>
            <FieldLabel label="交易方向" />
            <SelectInput
              value={form.direction}
              onChange={(v) => set("direction", v)}
              options={[
                { label: "多空双向", value: "both" },
                { label: "只做多", value: "long_only" },
                { label: "只做空", value: "short_only" },
              ]}
            />
          </div>
          <div>
            <FieldLabel label="初始资金 (USDT)" hint="最少 1,000 USDT" />
            <NumberInput
              value={form.initial_balance}
              onChange={(v) => set("initial_balance", v)}
              min={1000}
              max={1000000}
              step={1000}
              disabled={mode === "edit" && !isBalanceEditable}
            />
          </div>
          <div className="md:col-span-2">
            <FieldLabel label="策略描述（可选）" />
            <input
              type="text"
              value={form.description}
              onChange={(e) => set("description", e.target.value)}
              placeholder="简短描述这个策略的思路"
              maxLength={200}
              className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-300"
            />
          </div>
        </div>
      </div>

      {/* ── CVD 窗口 ── */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-700 mb-3">CVD 窗口</h3>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <FieldLabel label="快线 CVD" hint="短周期CVD，捕捉近期买卖力量" />
            <SelectInput
              value={form.cvd_fast_window}
              onChange={(v) => set("cvd_fast_window", v)}
              options={[
                { label: "5m（超短线）", value: "5m" },
                { label: "15m（短线）", value: "15m" },
                { label: "30m（中短线）", value: "30m" },
              ]}
            />
          </div>
          <div>
            <FieldLabel label="慢线 CVD" hint="长周期CVD，反映趋势方向" />
            <SelectInput
              value={form.cvd_slow_window}
              onChange={(v) => set("cvd_slow_window", v)}
              options={[
                { label: "30m", value: "30m" },
                { label: "1h（推荐）", value: "1h" },
                { label: "4h（趋势）", value: "4h" },
              ]}
            />
          </div>
        </div>
      </div>

      {/* ── 四层权重 ── */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-sm font-semibold text-slate-700">四层评分权重</h3>
          <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${weightsOk ? "bg-emerald-100 text-emerald-700" : "bg-red-100 text-red-600"}`}>
            合计: {weightsTotal}/100
          </span>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <FieldLabel label="方向得分权重" hint="CVD方向信号的权重，建议50-65" />
            <NumberInput value={form.weight_direction} onChange={(v) => set("weight_direction", v)} min={10} max={80} />
          </div>
          <div>
            <FieldLabel label="环境得分权重" hint="市场环境（OI/FR/资金费率）的权重" />
            <NumberInput value={form.weight_env} onChange={(v) => set("weight_env", v)} min={5} max={60} />
          </div>
          <div>
            <FieldLabel label="辅助因子权重" hint="清算/现货溢价等辅助信号的权重" />
            <NumberInput value={form.weight_aux} onChange={(v) => set("weight_aux", v)} min={0} max={40} />
          </div>
          <div>
            <FieldLabel label="动量权重" hint="短期价格动量信号的权重" />
            <NumberInput value={form.weight_momentum} onChange={(v) => set("weight_momentum", v)} min={0} max={20} />
          </div>
        </div>
      </div>

      {/* ── 入场阈值 ── */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-700 mb-3">入场阈值</h3>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <FieldLabel label="入场最低总分" hint="信号总分超过此值才开仓，默认75，越高越严格" />
            <NumberInput value={form.entry_score} onChange={(v) => set("entry_score", v)} min={60} max={95} />
          </div>
        </div>
      </div>

      {/* ── 四道 Gate ── */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-700 mb-3">过滤门控（Gate）</h3>
        <div className="space-y-3">
          <GateRow
            label="Gate 1：订单簿失衡 (OBI)"
            hint="要求订单簿方向与信号一致，OBI越高越严格"
            enabled={form.gate_obi_enabled}
            onToggle={() => set("gate_obi_enabled", !form.gate_obi_enabled)}
          >
            <FieldLabel label="OBI 最低阈值" hint="0.1(宽松) ~ 0.9(严格)，默认0.3" />
            <NumberInput value={form.obi_threshold} onChange={(v) => set("obi_threshold", v)} min={0.1} max={0.9} step={0.05} />
          </GateRow>
          <GateRow
            label="Gate 2：大单 CVD 门"
            hint="要求大单累积净买入方向与信号一致"
            enabled={form.gate_whale_enabled}
            onToggle={() => set("gate_whale_enabled", !form.gate_whale_enabled)}
          >
            <FieldLabel label="Whale CVD 阈值" hint="-1到1，多头信号时大单CVD需>此值，默认0" />
            <NumberInput value={form.whale_cvd_threshold} onChange={(v) => set("whale_cvd_threshold", v)} min={-1} max={1} step={0.1} />
          </GateRow>
          <GateRow
            label="Gate 3：波动率门 (ATR%)"
            hint="要求当前ATR百分位高于最低值，过滤低波动时段"
            enabled={form.gate_vol_enabled}
            onToggle={() => set("gate_vol_enabled", !form.gate_vol_enabled)}
          >
            <FieldLabel label="ATR 最低百分位" hint="0-80，默认20，低于此值不开仓" />
            <NumberInput value={form.atr_percentile_min} onChange={(v) => set("atr_percentile_min", v)} min={5} max={80} />
          </GateRow>
          <GateRow
            label="Gate 4：现货/永续溢价门"
            hint="要求现货与永续价格溢价低于阈值，过滤套利异常时段"
            enabled={form.gate_spot_perp_enabled}
            onToggle={() => set("gate_spot_perp_enabled", !form.gate_spot_perp_enabled)}
          >
            <FieldLabel label="溢价率阈值" hint="0.0005~0.01，溢价超过此值不开仓" />
            <NumberInput value={form.spot_perp_threshold} onChange={(v) => set("spot_perp_threshold", v)} min={0.0005} max={0.01} step={0.0005} />
          </GateRow>
        </div>
      </div>

      {/* ── 风控参数 ── */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-700 mb-3">风控参数</h3>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <FieldLabel label="SL 宽度 (× ATR)" hint="止损距离 = SL倍数 × ATR，默认1.5" />
            <NumberInput value={form.sl_atr_multiplier} onChange={(v) => set("sl_atr_multiplier", v)} min={0.5} max={3.0} step={0.1} />
          </div>
          <div>
            <FieldLabel label="TP1 目标 (× RD)" hint="第一止盈 = TP1倍数 × 风险距离，默认0.75" />
            <NumberInput value={form.tp1_ratio} onChange={(v) => set("tp1_ratio", v)} min={0.3} max={2.0} step={0.05} />
          </div>
          <div>
            <FieldLabel label="TP2 目标 (× RD)" hint="第二止盈 = TP2倍数 × 风险距离，默认1.5" />
            <NumberInput value={form.tp2_ratio} onChange={(v) => set("tp2_ratio", v)} min={0.5} max={4.0} step={0.1} />
          </div>
          <div>
            <FieldLabel label="超时时间 (分钟)" hint="持仓超过此时间自动平仓，默认240min" />
            <NumberInput value={form.timeout_minutes} onChange={(v) => set("timeout_minutes", v)} min={30} max={1440} step={30} />
          </div>
          <div>
            <FieldLabel label="反转平仓阈值 (分)" hint="对手方向信号分≥此值时平仓，默认80" />
            <NumberInput value={form.flip_threshold} onChange={(v) => set("flip_threshold", v)} min={60} max={95} />
          </div>
        </div>
      </div>

      {/* ── Error & Submit ── */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-2 text-sm text-red-600">
          {error}
        </div>
      )}

      <div className="flex gap-3">
        <Link
          href="/strategy-plaza"
          className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 text-sm text-slate-600 hover:bg-slate-50 transition-colors"
        >
          <ArrowLeft size={15} />
          返回
        </Link>
        <button
          type="submit"
          disabled={submitting || !weightsOk}
          className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <Save size={15} />
          {submitting ? "保存中..." : mode === "create" ? "创建并启动" : "保存参数"}
        </button>
      </div>
    </form>
  );
}