import { apiFetch } from "@/lib/api";
import { AlertsManager } from "@/components/alerts-manager";

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

async function load() {
  const [alertsRes, statusRes] = await Promise.all([
    apiFetch("/v1/alerts"),
    apiFetch("/v1/billing/status"),
  ]);
  const alerts: AlertSub[] = alertsRes.ok ? await alertsRes.json() : [];
  const status: { tier: string } = statusRes.ok ? await statusRes.json() : { tier: "free" };
  return { alerts, tier: status.tier };
}

export default async function AlertsPage() {
  const { alerts, tier } = await load();

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-1">Alerts</h1>
        <p className="text-white/50 text-sm">
          Configure what you get pinged for. {tier === "free" ? "Free tier: 1 alert." : tier === "pro" ? "Pro: 10 alerts." : "Plus: 50 alerts."}
        </p>
      </div>
      <AlertsManager initial={alerts} tier={tier} />
    </div>
  );
}