"use client";

import { useState } from "react";
import PageHeader from "@/components/PageHeader";
import { api } from "@/lib/api";
import { useApi } from "@/lib/useApi";

export default function SettingsPage() {
  const { data: rules, live } = useApi(api.riskRules);
  const [saved, setSaved] = useState(false);
  const [form, setForm] = useState({
    equity: "100000",
    riskPerTrade: "1.0",
    dailyRisk: "6.0",
    minRR: "2.0",
    minConfidence: "65",
    minProbability: "55",
  });

  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [k]: e.target.value });
    setSaved(false);
  };

  return (
    <div>
      <PageHeader
        title="Settings"
        subtitle="Account, risk thresholds, and data provider configuration"
        live={live}
      />

      <div className="grid lg:grid-cols-2 gap-4">
        <div className="card p-5">
          <h3 className="text-sm font-semibold text-slate-200 mb-4">Risk Configuration</h3>
          <p className="text-xs text-slate-500 mb-4">
            Server values come from <code className="text-slate-400">.env</code> ({rules ? "loaded" : "…"}).
            Editing here is a UI preview in the MVP — set values in the backend environment to apply them.
          </p>
          <div className="grid sm:grid-cols-2 gap-4">
            <Field label="Account equity ($)" value={form.equity} onChange={set("equity")} />
            <Field label="Max risk / trade (%)" value={form.riskPerTrade} onChange={set("riskPerTrade")} />
            <Field label="Max daily risk (%)" value={form.dailyRisk} onChange={set("dailyRisk")} />
            <Field label="Min risk : reward" value={form.minRR} onChange={set("minRR")} />
            <Field label="Min confidence" value={form.minConfidence} onChange={set("minConfidence")} />
            <Field label="Min probability (%)" value={form.minProbability} onChange={set("minProbability")} />
          </div>
          <button
            onClick={() => setSaved(true)}
            className="mt-5 text-xs px-4 py-2 rounded-lg bg-accent/15 border border-accent/40 text-accent hover:bg-accent/25"
          >
            {saved ? "✓ Saved (preview)" : "Save Settings"}
          </button>
        </div>

        <div className="space-y-4">
          <div className="card p-5">
            <h3 className="text-sm font-semibold text-slate-200 mb-3">Data Providers</h3>
            <ProviderRow name="Mock Data Engine" status="active" note="Deterministic simulated market data" />
            <ProviderRow name="Alpaca (paper trading)" status="planned" note="Phase 2 — set ALPACA_API_KEY in .env" />
            <ProviderRow name="Tradier (options chains)" status="planned" note="Phase 2 — set TRADIER_API_TOKEN in .env" />
            <ProviderRow name="LLM Sentiment (OpenAI / Anthropic)" status="planned" note="Phase 2 — news & sentiment agent" />
          </div>

          <div className="card p-5 border-gold/30">
            <h3 className="text-sm font-semibold text-gold mb-2">Trading Mode</h3>
            <div className="flex items-center justify-between">
              <span className="text-sm text-slate-300">Paper trading (research)</span>
              <span className="text-xs px-2 py-1 rounded bg-bull/15 text-bull">ENABLED</span>
            </div>
            <div className="flex items-center justify-between mt-2">
              <span className="text-sm text-slate-300">Live trading</span>
              <span className="text-xs px-2 py-1 rounded bg-bear/15 text-bear">NOT AVAILABLE IN MVP</span>
            </div>
            <p className="text-xs text-slate-500 mt-3">
              This build contains no order-execution code. Live trading requires a future,
              explicitly authorized release.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) {
  return (
    <label className="block">
      <span className="text-xs text-slate-500">{label}</span>
      <input
        value={value}
        onChange={onChange}
        inputMode="decimal"
        className="mt-1 w-full bg-ink-950 border border-ink-600 rounded-lg px-3 py-2 text-sm font-mono text-slate-200 focus:outline-none focus:border-accent"
      />
    </label>
  );
}

function ProviderRow({ name, status, note }: { name: string; status: "active" | "planned"; note: string }) {
  return (
    <div className="flex items-start justify-between py-2 border-b border-ink-800 last:border-0">
      <div>
        <div className="text-sm text-slate-300">{name}</div>
        <div className="text-xs text-slate-500">{note}</div>
      </div>
      <span
        className={`text-[11px] px-2 py-0.5 rounded ${
          status === "active" ? "bg-bull/15 text-bull" : "bg-slate-500/15 text-slate-400"
        }`}
      >
        {status}
      </span>
    </div>
  );
}