// LoginCard composition — pairs email + password inputs with an
// optional OAuth row. The card is stylistically opinionated (max
// width, centred, raised) so apps don't reinvent the same shell.
//
// Submit handling stays with the consumer (form action / onSubmit).
// The component just renders the surface.

import type { FormHTMLAttributes, ReactNode } from 'react'
import { Button } from '../primitives/button'
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '../primitives/card'
import { Input } from '../primitives/input'
import { Label } from '../primitives/label'
import { cn } from '../cn'

interface OAuthProvider {
  readonly id: string
  readonly label: string
}

/** User-facing strings — pass catalog values to localize. Defaults are
 *  English so the card works unconfigured. */
export interface LoginCardLabels {
  /** Email field label. Default `'Email'`. */
  readonly email?: string
  /** Email input placeholder. Default `'you@company.com'`. */
  readonly emailPlaceholder?: string
  /** Password field label. Default `'Password'`. */
  readonly password?: string
  /** "Forgot password?" link text (shown when `forgotHref` is set).
   *  Default `'Forgot?'`. */
  readonly forgot?: string
  /** OAuth divider caption. Default `'or continue with'`. */
  readonly oauthDivider?: string
  /** Sign-up footer prompt (shown when `signUpHref` is set).
   *  Default `'New here?'`. */
  readonly signUpPrompt?: string
  /** Sign-up footer link text. Default `'Create an account'`. */
  readonly signUp?: string
}

const DEFAULT_LOGIN_LABELS: Required<LoginCardLabels> = {
  email: 'Email',
  emailPlaceholder: 'you@company.com',
  password: 'Password',
  forgot: 'Forgot?',
  oauthDivider: 'or continue with',
  signUpPrompt: 'New here?',
  signUp: 'Create an account',
}

interface LoginCardProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'children'> {
  readonly title?: string
  readonly description?: string
  readonly eyebrow?: string
  readonly submitLabel?: string
  readonly oauthProviders?: ReadonlyArray<OAuthProvider>
  readonly onOAuth?: (providerId: string) => void
  readonly signUpHref?: string
  readonly forgotHref?: string
  readonly className?: string
  /** Override the card's own chrome strings. Defaults are English. */
  readonly labels?: LoginCardLabels
}

export const LoginCard = ({
  title = 'Welcome back',
  description = 'Sign in to your account to continue.',
  eyebrow,
  submitLabel = 'Sign in',
  oauthProviders,
  onOAuth,
  signUpHref,
  forgotHref,
  className,
  labels,
  ...formProps
}: LoginCardProps): ReactNode => {
  const t = { ...DEFAULT_LOGIN_LABELS, ...labels }
  return (
  <div className={cn('w-full max-w-md mx-auto', className)}>
    <Card>
      <CardHeader>
        {eyebrow ? (
          <div className="text-xs uppercase tracking-wider text-muted-foreground font-medium">
            {eyebrow}
          </div>
        ) : null}
        <CardTitle className="text-2xl">{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <form className="space-y-4" {...formProps}>
          <div className="space-y-1.5">
            <Label htmlFor="email">{t.email}</Label>
            <Input id="email" name="email" type="email" autoComplete="email" placeholder={t.emailPlaceholder} />
          </div>
          <div className="space-y-1.5">
            <div className="flex items-center justify-between">
              <Label htmlFor="password">{t.password}</Label>
              {forgotHref ? (
                <a href={forgotHref} className="text-xs text-muted-foreground hover:text-foreground">{t.forgot}</a>
              ) : null}
            </div>
            <Input id="password" name="password" type="password" autoComplete="current-password" placeholder="••••••••" />
          </div>
          <Button type="submit" className="w-full">{submitLabel}</Button>
        </form>

        {oauthProviders && oauthProviders.length > 0 ? (
          <>
            <div className="my-5 flex items-center gap-3 text-xs text-muted-foreground">
              <div className="h-px flex-1 bg-border" />
              <span>{t.oauthDivider}</span>
              <div className="h-px flex-1 bg-border" />
            </div>
            <div className="grid gap-2" style={{ gridTemplateColumns: `repeat(${oauthProviders.length}, minmax(0, 1fr))` }}>
              {oauthProviders.map((p) => (
                <Button
                  key={p.id}
                  type="button"
                  variant="outline"
                  onClick={() => onOAuth?.(p.id)}
                >
                  {p.label}
                </Button>
              ))}
            </div>
          </>
        ) : null}
      </CardContent>
      {signUpHref ? (
        <CardFooter className="justify-center text-xs text-muted-foreground">
          {t.signUpPrompt} <a href={signUpHref} className="ml-1 text-foreground hover:underline">{t.signUp}</a>
        </CardFooter>
      ) : null}
    </Card>
  </div>
  )
}