import { useEffect, useState } from 'react';
import type { ActivationConfig } from '../../lib/types';
import { useActivationSettings, useUpdateActivationSettings } from '../../hooks/useAdmin';
import { SkeletonTable } from '../ui/Skeleton';

const DEFAULTS: ActivationConfig = {
  min_expected_value: 0.15,
  min_rr: 1.2,
  min_confidence: 55,
  min_target_probability: 0,
  require_high_conviction: false,
  exclude_conflicts: false,
};

export function ActivationSettings() {
  const { data, isLoading, isError, error } = useActivationSettings();
  const update = useUpdateActivationSettings();

  const [form, setForm] = useState<ActivationConfig>(DEFAULTS);

  useEffect(() => {
    if (data) setForm(data);
  }, [data]);

  const onSave = () => {
    update.mutate(form);
  };

  const onReset = () => {
    setForm(DEFAULTS);
    update.mutate(DEFAULTS);
  };

  if (isLoading) return <SkeletonTable rows={2} cols={2} />;
  if (isError) return <p className="text-sm text-red-400">{(error as Error)?.message || 'Failed to load activation thresholds'}</p>;

  return (
    <div className="glass p-5 space-y-4">
      <div>
        <h3 className="text-sm font-semibold text-gray-200">Activation Gate</h3>
        <p className="mt-1 text-xs text-gray-500">
          What counts as a signal worth acting on. Drives the Dashboard's "Qualified" metric, the
          Signals "Qualified only" view, and the Track Record's qualified stats. The core test is
          <span className="text-gray-300"> expected value</span> — probability-weighted asymmetry —
          so R:R and target probability no longer fight each other. All setups are still evaluated
          regardless; tune the EV floor against the Track Record's EV sweep to see what actually wins.
        </p>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        <label className="block space-y-1">
          <span className="text-xs text-gray-400">Min Expected Value (R)</span>
          <input
            type="number"
            min={-1}
            max={10}
            step={0.05}
            value={form.min_expected_value}
            onChange={(e) => setForm((prev) => ({ ...prev, min_expected_value: Number(e.target.value) }))}
            className="w-full input-glass px-3 py-2 text-sm"
          />
          <span className="text-[11px] text-gray-600">p·R:R − (1−p), in R. 0.15 ≈ +0.15× risk/trade. The core gate.</span>
        </label>
        <label className="block space-y-1">
          <span className="text-xs text-gray-400">Min Risk:Reward (1 : x)</span>
          <input
            type="number"
            min={0}
            step={0.1}
            value={form.min_rr}
            onChange={(e) => setForm((prev) => ({ ...prev, min_rr: Number(e.target.value) }))}
            className="w-full input-glass px-3 py-2 text-sm"
          />
          <span className="text-[11px] text-gray-600">Floor only — keeps symmetric/negative trades out.</span>
        </label>
        <label className="block space-y-1">
          <span className="text-xs text-gray-400">Min Confidence (%)</span>
          <input
            type="number"
            min={0}
            max={100}
            step={1}
            value={form.min_confidence}
            onChange={(e) => setForm((prev) => ({ ...prev, min_confidence: Number(e.target.value) }))}
            className="w-full input-glass px-3 py-2 text-sm"
          />
        </label>
      </div>

      <div className="border-t border-white/[0.06] pt-4">
        <p className="text-xs font-medium uppercase tracking-widest text-gray-500">Optional tighteners</p>
        <p className="mt-1 text-[11px] text-gray-600">Off by default — turn on to be more selective on top of the EV gate.</p>
        <div className="mt-3 grid gap-3 md:grid-cols-3">
          <label className="block space-y-1">
            <span className="text-xs text-gray-400">Min Target Probability (%)</span>
            <input
              type="number"
              min={0}
              max={100}
              step={1}
              value={form.min_target_probability}
              onChange={(e) => setForm((prev) => ({ ...prev, min_target_probability: Number(e.target.value) }))}
              className="w-full input-glass px-3 py-2 text-sm"
            />
            <span className="text-[11px] text-gray-600">Best target's probability must clear this. 0 disables.</span>
          </label>
          <label className="flex cursor-pointer items-start gap-2.5 text-sm text-gray-300">
            <input
              type="checkbox"
              checked={form.require_high_conviction}
              onChange={(e) => setForm((prev) => ({ ...prev, require_high_conviction: e.target.checked }))}
              className="mt-0.5 h-4 w-4 cursor-pointer accent-blue-400"
            />
            <span>
              Require high conviction
              <span className="mt-0.5 block text-[11px] text-gray-500">
                Only LONG (High) / SHORT (High) — the signals must clearly pick a side.
              </span>
            </span>
          </label>
          <label className="flex cursor-pointer items-start gap-2.5 text-sm text-gray-300">
            <input
              type="checkbox"
              checked={form.exclude_conflicts}
              onChange={(e) => setForm((prev) => ({ ...prev, exclude_conflicts: e.target.checked }))}
              className="mt-0.5 h-4 w-4 cursor-pointer accent-blue-400"
            />
            <span>
              Exclude conflicted setups
              <span className="mt-0.5 block text-[11px] text-gray-500">
                Risk level must be Low — drops setups with contradicting signals.
              </span>
            </span>
          </label>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <button className="btn-primary px-4 py-2 text-sm" onClick={onSave} disabled={update.isPending}>
          {update.isPending ? 'Saving…' : 'Save Thresholds'}
        </button>
        <button className="px-4 py-2 text-sm rounded border border-white/[0.1] text-gray-300 hover:text-white" onClick={onReset} disabled={update.isPending}>
          Reset to Defaults
        </button>
      </div>
    </div>
  );
}