"use client";

import { Suspense } from "react";
import { BriefcaseBusiness, ShieldCheck, WalletCards } from "lucide-react";

import { LoginPageShell } from "@/components/auth/login-page-shell";
import { customerGuestAuthUrl, customerUrl } from "@/lib/tenant";

type CustomerLoginScreenProps = {
  tenant: string;
};

export function CustomerLoginScreen({ tenant }: CustomerLoginScreenProps) {
  return (
    <Suspense fallback={null}>
      <LoginPageShell
        brandIcon={WalletCards}
        brandTitle="Customer Portal"
        brandSubtitle="Portfolio access"
        badgeLabel="Secure customer access"
        headline="Review your holdings from a focused customer workspace."
        description="Sign in to view portfolio analytics, transactions, reports, and asset allocation insights."
        features={[
          { icon: BriefcaseBusiness, label: "Holdings" },
          { icon: WalletCards, label: "Transactions" },
          { icon: ShieldCheck, label: "Reports" },
        ]}
        cardTitle="Customer login"
        cardDescription="Login to continue to your customer dashboard."
        emailPlaceholder="customer@example.com"
        protectedText="Protected area for authorized customers only."
        redirectTo={customerUrl(tenant, "/dashboard")}
        authEndpoint={customerGuestAuthUrl(tenant)}
        forgotPasswordEndpoint={customerUrl(tenant, "/guest/forgot-password")}
        gridClassName="max-w-6xl lg:grid-cols-[1.05fr_0.95fr]"
        backgroundClassName="bg-[radial-gradient(circle_at_16%_18%,rgba(20,184,166,0.16),transparent_28%),radial-gradient(circle_at_84%_20%,rgba(15,23,42,0.10),transparent_30%),linear-gradient(135deg,rgba(255,255,255,0.92),rgba(241,245,249,0.8))]"
        emailId="customer-email"
        passwordId="customer-password"
      />
    </Suspense>
  );
}