import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
import { AlertCircle, Check } from "lucide-react";
import { CheckoutButton, PortalButton } from "@/components/dashboard/billing-buttons";
import { Badge, Card } from "@/components/ui";
import { authOptions } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { getDictionary, getLocale } from "@/lib/i18n";
import { getStripeConfiguration } from "@/lib/stripe";
import { formatDate } from "@/lib/utils";

export default async function BillingPage() {
  const session = await getServerSession(authOptions);
  if (!session?.user?.id) redirect("/login");

  const locale = await getLocale();
  const t = getDictionary(locale).billing;
  const config = getStripeConfiguration();
  const user = await prisma.user.findUnique({ where: { id: parseInt(session.user.id) } });
  const checkoutDisabled = !config.configured;
  const disabledReason = checkoutDisabled ? `${t.disabledCheckout} ${config.missing.join(", ")}` : undefined;

  return (
    <div className="space-y-6">
      <div className="flex flex-col justify-between gap-3 md:flex-row md:items-start">
        <div>
          <h1 className="text-3xl font-bold text-ink">{t.title}</h1>
          <p className="mt-1 text-slate-600">{t.subtitle}</p>
        </div>
        <Badge tone={config.configured ? "green" : "amber"}>{config.configured ? t.configured : t.notConfigured}</Badge>
      </div>

      {!config.configured ? (
        <Card className="border-amber-200 bg-amber-50">
          <div className="flex items-start gap-3 text-amber-900">
            <AlertCircle className="mt-0.5 shrink-0" size={18} />
            <div>
              <p className="font-semibold">{t.notConfigured}</p>
              <p className="mt-1 text-sm">
                {t.missing}: {config.missing.join(", ")}
              </p>
            </div>
          </div>
        </Card>
      ) : null}

      <Card>
        <h2 className="text-xl font-bold text-ink">{t.currentSubscription}</h2>
        <div className="mt-4 grid gap-4 md:grid-cols-3">
          <div>
            <p className="text-sm text-slate-500">{t.plan}</p>
            <p className="text-lg font-bold text-ink">{user?.subscription_tier || "FREE"}</p>
          </div>
          <div>
            <p className="text-sm text-slate-500">{t.status}</p>
            <p className="text-lg font-bold text-ink">{user?.email_verified ? "Active" : "Pending"}</p>
          </div>
          <div>
            <p className="text-sm text-slate-500">{t.renews}</p>
            <p className="text-lg font-bold text-ink">{formatDate(user?.subscription_expires_at, locale)}</p>
          </div>
        </div>
        <div className="mt-5">
          {user?.stripe_customer_id ? (
            <PortalButton disabled={checkoutDisabled} disabledReason={disabledReason} locale={locale} />
          ) : (
            <p className="text-sm text-slate-500">{t.noCustomer}</p>
          )}
        </div>
      </Card>

      <div className="grid gap-4 md:grid-cols-2">
        <Card className="border-brand">
          <h2 className="text-xl font-bold text-ink">Pro</h2>
          <p className="mt-2 text-sm text-slate-600">{t.proDescription}</p>
          <ul className="mt-4 space-y-2 text-sm text-slate-600">
            <li className="flex items-center gap-2">
              <Check size={16} className="text-mint" /> {t.featureSubdomain}
            </li>
            <li className="flex items-center gap-2">
              <Check size={16} className="text-mint" /> {t.featureActions}
            </li>
          </ul>
          <div className="mt-5">
            <CheckoutButton priceId={config.prices.PRO} disabled={checkoutDisabled} disabledReason={disabledReason} locale={locale}>
              {t.upgradeToPro}
            </CheckoutButton>
          </div>
        </Card>

        <Card>
          <h2 className="text-xl font-bold text-ink">Scale</h2>
          <p className="mt-2 text-sm text-slate-600">{t.scaleDescription}</p>
          <ul className="mt-4 space-y-2 text-sm text-slate-600">
            <li className="flex items-center gap-2">
              <Check size={16} className="text-mint" /> {t.featureMultiTenant}
            </li>
            <li className="flex items-center gap-2">
              <Check size={16} className="text-mint" /> {t.featureHigherLimits}
            </li>
          </ul>
          <div className="mt-5">
            <CheckoutButton priceId={config.prices.SCALE} disabled={checkoutDisabled} disabledReason={disabledReason} locale={locale}>
              {t.upgradeToScale}
            </CheckoutButton>
          </div>
        </Card>
      </div>
    </div>
  );
}