import Link from "next/link";

interface Alert {
  id: string;
  kind: string;
  symbol?: string;
  amount?: number;
  side?: string;
  wallet?: string;
  pnl?: number;
  ts: string;
}

const PRO_CHECKOUT = "https://polar.sh/checkout/polar_c_vrdhb6zmmgelmtCu4D2GizLDArFkxzRetLsr41E9gzJ";

// Generate plausible-looking sample alerts (anonymized, no real PnL claims)
function sampleAlerts(): Alert[] {
  const now = Date.now();
  const items: Array<Omit<Alert, "id" | "ts">> = [
    { kind: "Liquidation",    symbol: "BTC-PERP",   amount: 1_140_000, side: "LONG" },
    { kind: "Whale spike",    symbol: "$ARB",       amount: 487_000,   side: "BUY" },
    { kind: "Smart-money",    symbol: "$WLD",       wallet: "0x7a3f...d2", side: "BUY", pnl: 0.182 },
    { kind: "Liquidation",    symbol: "ETH-PERP",   amount: 320_500,   side: "SHORT" },
    { kind: "Token unlock",   symbol: "$STRK",      amount: 12_400_000, side: "UNLOCK" },
    { kind: "Liquidation",    symbol: "SOL-PERP",   amount: 890_000,   side: "LONG" },
    { kind: "Whale spike",    symbol: "$JUP",       amount: 252_000,   side: "BUY" },
    { kind: "Smart-money",    symbol: "$ETH",       wallet: "0xc8d1...9e", side: "SELL" },
    { kind: "Liquidation",    symbol: "DOGE-PERP",  amount: 175_000,   side: "LONG" },
    { kind: "Liquidation",    symbol: "BTC-PERP",   amount: 2_300_000, side: "LONG" },
    { kind: "Whale spike",    symbol: "$ENA",       amount: 412_000,   side: "BUY" },
    { kind: "Smart-money",    symbol: "$LINK",      wallet: "0x4f9a...c1", side: "BUY", pnl: 0.071 },
  ];
  return items.map((a, i) => ({
    ...a,
    id: String(i),
    ts: new Date(now - (i * 7 + Math.floor(Math.random() * 5)) * 60 * 1000).toISOString(),
  }));
}

function timeAgo(iso: string): string {
  const ms = Date.now() - new Date(iso).getTime();
  const m = Math.floor(ms / 60000);
  if (m < 1) return "just now";
  if (m < 60) return `${m}m ago`;
  const h = Math.floor(m / 60);
  return `${h}h ago`;
}

function fmt(n: number): string {
  if (n >= 1_000_000) return `$${(n / 1_000_000).toFixed(2)}M`;
  if (n >= 1_000) return `$${Math.round(n / 1_000)}K`;
  return `$${n}`;
}

const KIND_CFG: Record<string, { emoji: string; color: string }> = {
  Liquidation: { emoji: "🔥", color: "text-red-400 border-red-500/30 bg-red-500/5" },
  "Whale spike": { emoji: "🐋", color: "text-cyan-400 border-cyan-500/30 bg-cyan-500/5" },
  "Smart-money": { emoji: "🧠", color: "text-emerald-400 border-emerald-500/30 bg-emerald-500/5" },
  "Token unlock": { emoji: "🔓", color: "text-amber-400 border-amber-500/30 bg-amber-500/5" },
};

export const metadata = {
  title: "Live alerts feed | AltSignal",
  description: "Sample of recent alerts sent to AltSignal subscribers — liquidations, whale spikes, smart-money copy, token unlocks.",
};

export default function LiveFeed() {
  const alerts = sampleAlerts();
  return (
    <main className="min-h-screen bg-ink-950 text-white">
      <header className="border-b border-white/5 backdrop-blur sticky top-0 z-30 bg-ink-950/85">
        <div className="max-w-3xl mx-auto px-6 h-14 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-7 h-7 rounded-md bg-accent-500 grid place-items-center text-ink-950 font-bold">A</div>
            <h1 className="font-bold tracking-tight">AltSignal · live feed</h1>
          </div>
          <Link href="/" className="text-sm text-white/60 hover:text-white">← home</Link>
        </div>
      </header>

      <div className="max-w-3xl mx-auto px-6 py-8">
        <div className="mb-6">
          <span className="text-xs text-accent-glow font-mono uppercase tracking-widest">Sample feed</span>
          <h2 className="text-3xl md:text-4xl font-extrabold mt-2 mb-3">
            What lands in your Telegram.
          </h2>
          <p className="text-white/60">
            Anonymized examples of alert types AltSignal sends. The real feed is exclusive to subscribers and routed straight to your Telegram with <span className="text-accent-glow font-mono">&lt;2s</span> latency.
          </p>
          <p className="text-white/40 text-xs mt-3">
            Not financial advice. Alerts are notifications only — AltSignal does not execute trades or hold funds.
          </p>
        </div>

        <div className="mb-8 p-4 rounded-xl bg-accent-500/10 border border-accent-500/30 flex items-center justify-between gap-4 flex-wrap">
          <div className="flex items-center gap-3">
            <span className="text-2xl">🔥</span>
            <div>
              <p className="font-semibold">5 early-user spots left today</p>
              <p className="text-sm text-white/60">$3.99/mo for 2 months · code <span className="font-mono text-accent-glow">EARLY10</span></p>
            </div>
          </div>
          <a href={PRO_CHECKOUT} className="bg-accent-500 hover:bg-accent-400 text-ink-950 font-semibold px-4 py-2 rounded-lg text-sm">
            Claim Pro →
          </a>
        </div>

        <div className="space-y-2 font-mono text-sm">
          {alerts.map((a) => {
            const cfg = KIND_CFG[a.kind] ?? { emoji: "•", color: "text-white/60 border-white/10 bg-white/5" };
            return (
              <div key={a.id} className={`rounded-lg p-3 border ${cfg.color} flex items-center gap-3`}>
                <span className="text-xl">{cfg.emoji}</span>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className="font-bold">{a.kind}</span>
                    <span className="text-white/40">·</span>
                    <span className="font-bold text-white">{a.symbol}</span>
                    {a.amount !== undefined && (
                      <>
                        <span className="text-white/40">·</span>
                        <span className="text-white">{fmt(a.amount)}</span>
                      </>
                    )}
                    {a.side && (
                      <>
                        <span className="text-white/40">·</span>
                        <span className={a.side === "LONG" || a.side === "BUY" ? "text-emerald-400" : a.side === "SHORT" || a.side === "SELL" ? "text-red-400" : "text-amber-400"}>
                          {a.side}
                        </span>
                      </>
                    )}
                    {a.wallet && (
                      <>
                        <span className="text-white/40">·</span>
                        <span className="text-white/50 text-xs">{a.wallet}</span>
                      </>
                    )}
                  </div>
                </div>
                <span className="text-xs text-white/40 whitespace-nowrap">{timeAgo(a.ts)}</span>
              </div>
            );
          })}
        </div>

        <div className="mt-12 grid md:grid-cols-2 gap-3">
          <div className="bg-ink-800/50 border border-white/10 rounded-xl p-5">
            <h3 className="font-bold mb-2">Want it in your Telegram?</h3>
            <p className="text-sm text-white/60 mb-4">5 early-user spots today, $3.99/mo for 2 months.</p>
            <a href={PRO_CHECKOUT} className="block w-full text-center bg-accent-500 hover:bg-accent-400 text-ink-950 font-semibold py-2.5 rounded-lg">
              Subscribe — Pro
            </a>
          </div>
          <div className="bg-ink-800/50 border border-white/10 rounded-xl p-5">
            <h3 className="font-bold mb-2">Try free first</h3>
            <p className="text-sm text-white/60 mb-4">1 alert type, 6h delay, 1 wallet/token slot.</p>
            <Link href="/login" className="block w-full text-center bg-ink-700 hover:bg-ink-600 text-white font-semibold py-2.5 rounded-lg">
              Start free
            </Link>
          </div>
        </div>

        <footer className="mt-12 text-center text-xs text-white/30">
          AltSignal · part of{" "}
          <a href="https://mindie.dev" className="hover:text-white">Mindie</a>
        </footer>
      </div>
    </main>
  );
}