import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  AutoExitLogEntry,
  autoExitLogToCsv,
  clearAutoExitLog,
  subscribeAutoExitLog,
} from "@/lib/auto-exit-log";
import { Download, Trash2, ShieldAlert, TrendingDown, TrendingUp, AlertTriangle, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
import { useSort, byNumber, byString, type SortDir } from "@/lib/use-sort";

function SortHead({
  label,
  active,
  dir,
  onClick,
  align = "left",
}: {
  label: string;
  active: boolean;
  dir: SortDir;
  onClick: () => void;
  align?: "left" | "right";
}) {
  const Icon = active ? (dir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
  return (
    <TableHead
      className={align === "right" ? "text-right" : ""}
      aria-sort={active ? (dir === "asc" ? "ascending" : "descending") : "none"}
    >
      <button
        type="button"
        onClick={onClick}
        className={`inline-flex items-center gap-1 ${active ? "text-primary" : "hover:text-foreground"}`}
      >
        {label}
        <Icon className="h-3 w-3" aria-hidden />
      </button>
    </TableHead>
  );
}

export const Route = createFileRoute("/_app/activity")({
  component: ActivityPage,
  head: () => ({
    meta: [
      { title: "Auto-Exit Activity Log · Delta Terminal" },
      {
        name: "description",
        content:
          "Timestamped record of every auto-close and trailing-stop adjustment, including signal values, thresholds, and executed order details.",
      },
    ],
  }),
});

type KindFilter = "all" | AutoExitLogEntry["kind"];

const kindLabel: Record<AutoExitLogEntry["kind"], string> = {
  reversal_close: "Trend reversal · closed",
  reversal_close_failed: "Trend reversal · failed",
  trailing_sl_update: "Trailing SL · tightened",
  trailing_sl_failed: "Trailing SL · failed",
};

function KindBadge({ kind }: { kind: AutoExitLogEntry["kind"] }) {
  const map = {
    reversal_close: { icon: TrendingDown, cls: "bg-amber-500/15 text-amber-300 border-amber-500/30" },
    reversal_close_failed: { icon: ShieldAlert, cls: "bg-red-500/15 text-red-300 border-red-500/30" },
    trailing_sl_update: { icon: TrendingUp, cls: "bg-emerald-500/15 text-emerald-300 border-emerald-500/30" },
    trailing_sl_failed: { icon: AlertTriangle, cls: "bg-red-500/15 text-red-300 border-red-500/30" },
  } as const;
  const { icon: Icon, cls } = map[kind];
  return (
    <Badge variant="outline" className={`gap-1 border ${cls}`}>
      <Icon className="h-3 w-3" />
      {kindLabel[kind]}
    </Badge>
  );
}

function fmt(n: number | undefined, digits = 4) {
  if (n === undefined || n === null || Number.isNaN(n)) return "—";
  return n < 1 && n > -1 ? n.toFixed(digits + 1) : n.toFixed(2);
}

function ActivityPage() {
  const [entries, setEntries] = useState<AutoExitLogEntry[]>([]);
  const [kind, setKind] = useState<KindFilter>("all");
  const [symbol, setSymbol] = useState("");
  const [q, setQ] = useState("");

  useEffect(() => subscribeAutoExitLog(setEntries), []);

  const symbols = useMemo(
    () => Array.from(new Set(entries.map((e) => e.symbol))).sort(),
    [entries],
  );

  const filtered = useMemo(() => {
    const needle = q.trim().toLowerCase();
    return entries.filter((e) => {
      if (kind !== "all" && e.kind !== kind) return false;
      if (symbol && e.symbol !== symbol) return false;
      if (needle) {
        const hay = `${e.symbol} ${e.positionId} ${e.signalId ?? ""} ${e.note ?? ""} ${e.error ?? ""}`.toLowerCase();
        if (!hay.includes(needle)) return false;
      }
      return true;
    });
  }, [entries, kind, symbol, q]);

  const stats = useMemo(() => {
    const total = filtered.length;
    const reversals = filtered.filter((e) => e.kind === "reversal_close").length;
    const trailingUpdates = filtered.filter((e) => e.kind === "trailing_sl_update").length;
    const failures = filtered.filter((e) => e.kind.endsWith("_failed")).length;
    return { total, reversals, trailingUpdates, failures };
  }, [filtered]);

  // Sorting
  const sorters = useMemo(
    () => ({
      time: byNumber<AutoExitLogEntry>((e) => new Date(e.ts).getTime()),
      kind: byString<AutoExitLogEntry>((e) => e.kind),
      symbol: byString<AutoExitLogEntry>((e) => e.symbol),
      side: byString<AutoExitLogEntry>((e) => e.positionSide),
      entry: byNumber<AutoExitLogEntry>((e) => e.entryPrice),
      mark: byNumber<AutoExitLogEntry>((e) => e.markPrice),
    }),
    [],
  );
  type ActSortKey = "time" | "kind" | "symbol" | "side" | "entry" | "mark";
  const { sorted, key: sortKey, dir: sortDir, toggle: toggleSort } = useSort<AutoExitLogEntry, ActSortKey>(
    filtered,
    sorters,
    "time",
    "desc",
  );

  // Pagination (over sorted list)
  const PAGE_SIZES = [10, 25, 50, 100] as const;
  const [pageSize, setPageSize] = useState<number>(25);
  const [page, setPage] = useState(1);
  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
  useEffect(() => { if (page > totalPages) setPage(1); }, [totalPages, page]);
  useEffect(() => { setPage(1); }, [kind, symbol, q, pageSize, sortKey, sortDir]);
  const pageStart = (page - 1) * pageSize;
  const paged = sorted.slice(pageStart, pageStart + pageSize);

  const download = () => {
    const csv = autoExitLogToCsv(sorted);
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `auto-exit-log-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-")}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard label="Events" value={stats.total} />
        <StatCard label="Reversal closes" value={stats.reversals} />
        <StatCard label="Trailing SL updates" value={stats.trailingUpdates} />
        <StatCard label="Failures" value={stats.failures} tone={stats.failures ? "danger" : "neutral"} />
      </div>

      <Card className="glass">
        <CardHeader className="flex flex-col gap-3 pb-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <CardTitle className="text-base">Auto-Exit Activity Log</CardTitle>
            <p className="text-xs text-muted-foreground">
              Every automated exit and trailing-stop adjustment, with the signal / threshold that triggered it.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <Select value={kind} onValueChange={(v) => setKind(v as KindFilter)}>
              <SelectTrigger className="h-9 w-[200px]">
                <SelectValue placeholder="Event type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All events</SelectItem>
                <SelectItem value="reversal_close">Trend reversal closes</SelectItem>
                <SelectItem value="reversal_close_failed">Reversal failures</SelectItem>
                <SelectItem value="trailing_sl_update">Trailing SL updates</SelectItem>
                <SelectItem value="trailing_sl_failed">Trailing SL failures</SelectItem>
              </SelectContent>
            </Select>
            <Select value={symbol || "__all__"} onValueChange={(v) => setSymbol(v === "__all__" ? "" : v)}>
              <SelectTrigger className="h-9 w-[160px]">
                <SelectValue placeholder="Symbol" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="__all__">All symbols</SelectItem>
                {symbols.map((s) => (
                  <SelectItem key={s} value={s}>
                    {s}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Search notes / IDs…"
              className="h-9 w-[200px]"
            />
            <Button variant="outline" size="sm" onClick={download} disabled={!filtered.length}>
              <Download className="mr-1 h-3.5 w-3.5" />
              CSV
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => {
                if (confirm("Clear the activity log?")) clearAutoExitLog();
              }}
              disabled={!entries.length}
            >
              <Trash2 className="mr-1 h-3.5 w-3.5" />
              Clear
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <SortHead label="Time" active={sortKey === "time"} dir={sortDir} onClick={() => toggleSort("time")} />
                  <SortHead label="Event" active={sortKey === "kind"} dir={sortDir} onClick={() => toggleSort("kind")} />
                  <SortHead label="Symbol" active={sortKey === "symbol"} dir={sortDir} onClick={() => toggleSort("symbol")} />
                  <SortHead label="Side" active={sortKey === "side"} dir={sortDir} onClick={() => toggleSort("side")} />
                  <SortHead label="Entry" active={sortKey === "entry"} dir={sortDir} onClick={() => toggleSort("entry")} align="right" />
                  <SortHead label="Mark" active={sortKey === "mark"} dir={sortDir} onClick={() => toggleSort("mark")} align="right" />
                  <TableHead>Trigger</TableHead>
                  <TableHead>Order / Result</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {sorted.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={8} className="py-10 text-center text-sm text-muted-foreground">
                      No auto-exit events recorded yet. Runs while Trade Execution Mode = auto and rules are enabled.
                    </TableCell>
                  </TableRow>
                )}
                {paged.map((e) => (
                  <TableRow key={e.id} className="align-top">
                    <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
                      {new Date(e.ts).toLocaleString()}
                    </TableCell>
                    <TableCell>
                      <KindBadge kind={e.kind} />
                    </TableCell>
                    <TableCell className="font-mono text-xs">{e.symbol}</TableCell>
                    <TableCell>
                      <Badge
                        variant="outline"
                        className={
                          e.positionSide === "LONG"
                            ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-300"
                            : "border-red-500/30 bg-red-500/10 text-red-300"
                        }
                      >
                        {e.positionSide}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-right font-mono text-xs">{fmt(e.entryPrice)}</TableCell>
                    <TableCell className="text-right font-mono text-xs">{fmt(e.markPrice)}</TableCell>
                    <TableCell className="min-w-[220px] text-xs">
                      {e.kind.startsWith("reversal") ? (
                        <div className="space-y-0.5">
                          <div>
                            Opposite <strong>{e.signalSide}</strong> signal
                            {" "}
                            <span className="text-emerald-300">
                              {e.signalConfidence != null ? `${(e.signalConfidence * 100).toFixed(0)}%` : "—"}
                            </span>
                            {" "}
                            ≥ threshold{" "}
                            <span className="text-muted-foreground">
                              {e.reverseMinConfidence != null ? `${(e.reverseMinConfidence * 100).toFixed(0)}%` : "—"}
                            </span>
                          </div>
                          {e.signalId && (
                            <div className="font-mono text-[10px] text-muted-foreground">
                              signal {e.signalId.slice(0, 10)}…
                            </div>
                          )}
                        </div>
                      ) : (
                        <div className="space-y-0.5">
                          <div>
                            Peak <span className="font-mono">{fmt(e.peakPrice)}</span> · profit{" "}
                            <span className="text-emerald-300">
                              {e.profitPct != null ? `${e.profitPct.toFixed(2)}%` : "—"}
                            </span>
                          </div>
                          <div className="text-muted-foreground">
                            Activate ≥ {e.trailingActivatePct}% · distance {e.trailingDistancePct}%
                          </div>
                          <div>
                            SL <span className="font-mono">{fmt(e.previousSl)}</span> →{" "}
                            <span className="font-mono text-emerald-300">{fmt(e.newSl)}</span>
                          </div>
                        </div>
                      )}
                    </TableCell>
                    <TableCell className="min-w-[180px] text-xs">
                      {e.error ? (
                        <span className="text-red-300">{e.error}</span>
                      ) : (
                        <div className="space-y-0.5">
                          <div className="text-emerald-300">
                            {e.orderStatus ?? "submitted"}
                          </div>
                          {e.orderId && (
                            <div className="font-mono text-[10px] text-muted-foreground">
                              order {e.orderId}
                            </div>
                          )}
                          <div className="font-mono text-[10px] text-muted-foreground">
                            pos {e.positionId.slice(0, 10)}…
                          </div>
                        </div>
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
          {filtered.length > 0 && (
            <div className="flex flex-wrap items-center justify-between gap-2 border-t border-border/60 px-4 py-2 text-xs text-muted-foreground">
              <div className="flex items-center gap-2">
                <span>Rows</span>
                <Select value={String(pageSize)} onValueChange={(v) => setPageSize(Number(v))}>
                  <SelectTrigger className="h-7 w-[80px]"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {PAGE_SIZES.map((n) => (
                      <SelectItem key={n} value={String(n)}>{n}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <span>
                  {pageStart + 1}-{Math.min(pageStart + pageSize, filtered.length)} of {filtered.length}
                </span>
              </div>
              <div className="flex items-center gap-1">
                <Button size="sm" variant="outline" className="h-7 px-2" disabled={page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>
                  <ChevronLeft className="h-3.5 w-3.5" />
                </Button>
                <span className="px-1">Page {page} / {totalPages}</span>
                <Button size="sm" variant="outline" className="h-7 px-2" disabled={page >= totalPages} onClick={() => setPage((p) => Math.min(totalPages, p + 1))}>
                  <ChevronRight className="h-3.5 w-3.5" />
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

function StatCard({
  label,
  value,
  tone = "neutral",
}: {
  label: string;
  value: number;
  tone?: "neutral" | "danger";
}) {
  return (
    <Card className="glass">
      <CardContent className="p-4">
        <div className="text-[11px] uppercase tracking-widest text-muted-foreground">{label}</div>
        <div
          className={`mt-1 font-display text-2xl font-semibold ${
            tone === "danger" && value > 0 ? "text-red-300" : ""
          }`}
        >
          {value}
        </div>
      </CardContent>
    </Card>
  );
}