'use client';

import type { LucideIcon } from 'lucide-react';
import Link from 'next/link';
import { Loader2 } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

export function PortalShell({
  children,
  className,
  width = 'default',
}: {
  children: React.ReactNode;
  className?: string;
  width?: 'default' | 'wide' | 'full';
}) {
  return (
    <div
      className={cn(
        'mx-auto space-y-6',
        width === 'default' && 'max-w-3xl',
        width === 'wide' && 'max-w-5xl',
        width === 'full' && 'max-w-none',
        className
      )}
    >
      {children}
    </div>
  );
}

export function SectionTitle({
  icon: Icon,
  title,
  description,
}: {
  icon: LucideIcon;
  title: string;
  description?: string;
}) {
  return (
    <div className="mb-5">
      <h3 className="flex items-center gap-2 text-base font-bold text-slate-900">
        <Icon className="h-5 w-5 shrink-0 text-primary" />
        {title}
      </h3>
      {description ? <p className="mt-1 text-sm text-muted">{description}</p> : null}
    </div>
  );
}

export function PortalSection({
  icon,
  title,
  description,
  children,
  className,
}: {
  icon: LucideIcon;
  title: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <Card className={className}>
      <CardContent className="p-6">
        <SectionTitle icon={icon} title={title} description={description} />
        {children}
      </CardContent>
    </Card>
  );
}

export function PortalLoading({ label = 'Loading…' }: { label?: string }) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 py-16 text-muted">
      <Loader2 className="h-8 w-8 animate-spin" />
      <p className="text-sm">{label}</p>
    </div>
  );
}

export function PortalEmpty({
  icon: Icon,
  title,
  description,
  action,
}: {
  icon: LucideIcon;
  title: string;
  description?: string;
  action?: React.ReactNode;
}) {
  return (
    <Card>
      <CardContent className="flex flex-col items-center px-6 py-12 text-center">
        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100">
          <Icon className="h-7 w-7 text-slate-400" />
        </div>
        <h3 className="text-base font-semibold text-slate-900">{title}</h3>
        {description ? <p className="mt-2 max-w-sm text-sm text-muted">{description}</p> : null}
        {action ? <div className="mt-5">{action}</div> : null}
      </CardContent>
    </Card>
  );
}

export function QuickLink({
  href,
  icon: Icon,
  label,
  description,
  onClick,
}: {
  href?: string;
  icon: LucideIcon;
  label: string;
  description?: string;
  onClick?: () => void;
}) {
  const className =
    'flex items-center gap-3 rounded-xl border border-border bg-surface p-4 transition-colors hover:border-primary/30 hover:bg-primary/5';

  const content = (
    <>
      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
        <Icon className="h-5 w-5" />
      </div>
      <div className="min-w-0 text-left">
        <p className="text-sm font-semibold text-slate-900">{label}</p>
        {description ? <p className="mt-0.5 text-xs text-muted">{description}</p> : null}
      </div>
    </>
  );

  if (href) {
    return (
      <Link href={href} className={className}>
        {content}
      </Link>
    );
  }

  return (
    <button type="button" onClick={onClick} className={cn(className, 'w-full')}>
      {content}
    </button>
  );
}