import Link from "next/link";
import { apiFetch } from "@/lib/api";

interface Me {
  email: string;
  tier: string;
  telegram: { username: string | null; linkedAt: string } | null;
}

interface AlertSub {
  id: string;
  kind: string;
  enabled: boolean;
  params: Record<string, unknown>;
  createdAt: string;
}

async function getData() {
  const [meRes, alertsRes] = await Promise.all([
    apiFetch("/v1/auth/me"),
    apiFetch("/v1/alerts"),
  ]);
  const me: Me = meRes.ok ? await meRes.json() : null;
  const alerts: AlertSub[] = alertsRes.ok ? await alertsRes.json() : [];
  return { me, alerts };
}

export default async function DashboardOverview() {
  const { me, alerts } = await getData();
  const enabled = alerts.filter((a) => a.enabled).length;
  const tgConnected = !!me?.telegram;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold mb-1">Welcome back</h1>
        <p className="text-white/50 text-sm">Here's where you are.</p>
      </div>

      <div className="grid md:grid-cols-3 gap-4">
        <StatCard
          icon="🔔"
          label="Active alerts"
          value={enabled.toString()}
          sub={`${alerts.length} total configured`}
          href="/dashboard/alerts"
        />
        <StatCard
          icon="💬"
          label="Telegram"
          value={tgConnected ? "Linked" : "Not linked"}
          sub={tgConnected ? me!.telegram!.username ?? "—" : "Connect to receive alerts"}
          href="/dashboard/telegram"
          danger={!tgConnected}
        />
        <StatCard
          icon="💳"
          label="Plan"
          value={me?.tier.toUpperCase() ?? "FREE"}
          sub={me?.tier === "free" ? "Upgrade to Pro for real-time" : "All features active"}
          href="/dashboard/billing"
        />
      </div>

      {!tgConnected && (
        <div className="bg-amber-500/10 border border-amber-500/30 rounded-xl p-5 flex items-start gap-3">
          <div className="text-2xl">⚠️</div>
          <div className="flex-1">
            <h3 className="font-bold mb-1">Telegram not linked</h3>
            <p className="text-sm text-white/60 mb-3">
              Alerts arrive via Telegram. Link your account in 30 seconds.
            </p>
            <Link
              href="/dashboard/telegram"
              className="inline-block bg-accent-500 hover:bg-accent-400 text-ink-950 font-semibold px-4 py-2 rounded-lg text-sm"
            >
              Link Telegram →
            </Link>
          </div>
        </div>
      )}

      <div>
        <div className="flex items-center justify-between mb-4">
          <h2 className="font-bold text-lg">Your alerts</h2>
          <Link
            href="/dashboard/alerts"
            className="text-sm text-accent-glow hover:text-accent-400"
          >
            Manage →
          </Link>
        </div>
        {alerts.length === 0 ? (
          <div className="bg-ink-800/50 border border-white/10 rounded-xl p-6 text-center text-white/50">
            No alerts yet.{" "}
            <Link href="/dashboard/alerts" className="text-accent-glow underline">
              Create your first
            </Link>
            .
          </div>
        ) : (
          <div className="space-y-2">
            {alerts.slice(0, 5).map((a) => (
              <div
                key={a.id}
                className="bg-ink-800/50 border border-white/10 rounded-lg p-4 flex justify-between items-center"
              >
                <div>
                  <span className="font-mono text-sm text-accent-glow mr-3">
                    {a.kind}
                  </span>
                  <span className="text-xs text-white/40">
                    {Object.entries(a.params).map(([k, v]) => `${k}=${v}`).join(", ") ||
                      "default params"}
                  </span>
                </div>
                <span
                  className={`text-xs px-2 py-1 rounded font-mono ${
                    a.enabled ? "bg-emerald-500/10 text-emerald-400" : "bg-white/5 text-white/40"
                  }`}
                >
                  {a.enabled ? "ON" : "OFF"}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function StatCard({
  icon,
  label,
  value,
  sub,
  href,
  danger,
}: {
  icon: string;
  label: string;
  value: string;
  sub: string;
  href: string;
  danger?: boolean;
}) {
  return (
    <Link
      href={href}
      className={`block bg-ink-800/50 border rounded-xl p-5 transition hover:bg-ink-800/80 ${
        danger ? "border-amber-500/40" : "border-white/10 hover:border-accent-500/30"
      }`}
    >
      <div className="flex items-center gap-3 mb-3">
        <span className="text-2xl">{icon}</span>
        <span className="text-xs uppercase text-white/40 font-mono">{label}</span>
      </div>
      <div className="text-2xl font-bold">{value}</div>
      <div className="text-xs text-white/40 mt-1">{sub}</div>
    </Link>
  );
}