import Link from 'next/link';
import { cn } from '../_lib/utils';
import { PORTAL_THEMES, type PortalTheme } from './portal-theme';
import { Check, ArrowLeft } from 'lucide-react';

interface PortalLoginShellProps {
  title: string;
  subtitle: string;
  theme: PortalTheme;
  /** Short value-prop bullets shown on the branding panel */
  highlights?: string[];
  children: React.ReactNode;
  footer?: React.ReactNode;
}

export function PortalLoginShell({ title, subtitle, theme, highlights = [], children, footer }: PortalLoginShellProps) {
  const t = PORTAL_THEMES[theme];

  return (
    <div className="min-h-screen grid lg:grid-cols-2">
      {/* Branding panel */}
      <div className={cn('relative hidden lg:flex flex-col justify-between p-12 text-white overflow-hidden', t.gradient)}>
        {/* decorative pattern */}
        <div
          className="absolute inset-0 opacity-10"
          style={{
            backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
            backgroundSize: '24px 24px',
          }}
        />
        <div className="relative flex items-center gap-3">
          <div className="size-9 rounded-xl bg-white/15 backdrop-blur flex items-center justify-center font-bold">T</div>
          <span className="font-semibold text-lg tracking-tight">TOWER</span>
        </div>

        <div className="relative space-y-6">
          <h2 className="text-3xl font-bold leading-tight max-w-sm">{title}</h2>
          {highlights.length > 0 && (
            <ul className="space-y-3">
              {highlights.map((h) => (
                <li key={h} className="flex items-center gap-3 text-sm text-white/90">
                  <span className="size-5 rounded-full bg-white/15 flex items-center justify-center shrink-0">
                    <Check className="size-3" />
                  </span>
                  {h}
                </li>
              ))}
            </ul>
          )}
        </div>

        <p className="relative text-sm text-white/60">Community Knowledge Infrastructure Platform</p>
      </div>

      {/* Form panel */}
      <div className="flex items-center justify-center p-6 sm:p-8 bg-background">
        <div className="w-full max-w-sm space-y-8">
          {/* Mobile logo */}
          <div className="flex items-center gap-2 lg:hidden">
            <div className={cn('size-8 rounded-lg flex items-center justify-center text-white font-bold text-sm', t.gradient)}>T</div>
            <span className="font-semibold">TOWER</span>
          </div>

          <div className="space-y-2">
            <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
            <p className="text-sm text-muted-foreground">{subtitle}</p>
          </div>

          {children}

          <div className="space-y-3 text-center">
            {footer}
            <Link
              href="/"
              className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
            >
              <ArrowLeft className="size-3" />
              Back to portal selector
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}