"use client";

import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import { formatMoney, formatDate } from "@/lib/utils";

interface AdminUser {
  id: string;
  first_name: string | null;
  email: string;
  preferred_language: string;
  subscription_plan: string;
  subscription_status: string;
  created_at: string;
}

interface Stats {
  totalUsers: number;
  newUsers: number;
  premiumUsers: number;
  mrr: number;
  activeSubscriptions: number;
  canceledSubscriptions: number;
}

const STATUS_TONE: Record<string, "success" | "warning" | "danger" | "neutral"> = {
  active: "success",
  past_due: "warning",
  canceled: "danger",
  free: "neutral"
};

export function AdminView({ stats, users }: { stats: Stats; users: AdminUser[] }) {
  const t = useTranslations();
  const locale = useLocale();

  const cards = [
    { label: t("admin.totalUsers"), value: stats.totalUsers },
    { label: t("admin.newUsers"), value: stats.newUsers },
    { label: t("admin.premiumUsers"), value: stats.premiumUsers },
    { label: t("admin.mrr"), value: formatMoney(stats.mrr, "EUR", locale) },
    { label: t("admin.activeSubscriptions"), value: stats.activeSubscriptions },
    { label: t("admin.canceledSubscriptions"), value: stats.canceledSubscriptions }
  ];

  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map((c) => (
          <Card key={c.label}>
            <p className="text-xs text-ink-400">{c.label}</p>
            <p className="mt-1 text-2xl font-semibold text-ink-950">{c.value}</p>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <CardTitle>{t("admin.users")}</CardTitle>
        </CardHeader>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-ink-100 text-left text-xs text-ink-400">
                <th className="pb-2 font-medium">{t("admin.table.name")}</th>
                <th className="pb-2 font-medium">{t("admin.table.email")}</th>
                <th className="pb-2 font-medium">{t("admin.table.language")}</th>
                <th className="pb-2 font-medium">{t("admin.table.plan")}</th>
                <th className="pb-2 font-medium">{t("admin.table.registered")}</th>
                <th className="pb-2 font-medium">{t("admin.table.status")}</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-ink-100">
              {users.map((u) => (
                <tr key={u.id}>
                  <td className="py-3 text-ink-800">{u.first_name || "—"}</td>
                  <td className="py-3 text-ink-600">{u.email}</td>
                  <td className="py-3 uppercase text-ink-500">{u.preferred_language}</td>
                  <td className="py-3 capitalize text-ink-600">{u.subscription_plan}</td>
                  <td className="py-3 text-ink-500">{formatDate(u.created_at, locale)}</td>
                  <td className="py-3">
                    <Badge tone={STATUS_TONE[u.subscription_status] ?? "neutral"}>
                      {t(`billing.status.${u.subscription_status}`)}
                    </Badge>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}