import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { cn } from "@/lib/utils";

// ─── Page Header ──────────────────────────────────────────────────────────────
interface PageHeaderProps {
  title: string;
  description?: string;
  action?: React.ReactNode;
  backLink?: { href: string; label: string };
}

export function PageHeader({ title, description, action, backLink }: PageHeaderProps) {
  return (
    <div className="space-y-2">
      {backLink && (
        <Link
          href={backLink.href}
          className="inline-flex items-center gap-1.5 text-xs font-semibold text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400 transition-colors"
        >
          <ArrowLeft className="h-3 w-3" />
          {backLink.label}
        </Link>
      )}
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h1 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">{title}</h1>
          {description && (
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{description}</p>
          )}
        </div>
        {action && <div className="shrink-0">{action}</div>}
      </div>
    </div>
  );
}

// ─── Empty State ──────────────────────────────────────────────────────────────
interface EmptyStateProps {
  icon?: React.ReactNode;
  title: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
}

export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
  return (
    <div className={cn("flex flex-col items-center justify-center py-12 md:py-16 text-center px-4", className)}>
      {icon && (
        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 mb-4">
          {icon}
        </div>
      )}
      <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{title}</p>
      {description && (
        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 max-w-xs">{description}</p>
      )}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}

// ─── Meeting Grid Skeleton ────────────────────────────────────────────────────
export function MeetingGridSkeleton({ count = 6 }: { count?: number }) {
  return (
    <div className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 md:p-5 space-y-4 animate-pulse">
          <div className="flex items-start justify-between gap-2">
            <div className="h-5 w-36 bg-gray-200 dark:bg-gray-700 rounded" />
            <div className="h-5 w-20 bg-gray-200 dark:bg-gray-700 rounded-full" />
          </div>
          <div className="space-y-2">
            <div className="h-3.5 w-full bg-gray-200 dark:bg-gray-700 rounded" />
            <div className="h-3.5 w-2/3 bg-gray-200 dark:bg-gray-700 rounded" />
          </div>
          <div className="flex gap-2">
            <div className="h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full" />
            <div className="h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full" />
          </div>
          <div className="h-9 w-full bg-gray-200 dark:bg-gray-700 rounded-lg" />
        </div>
      ))}
    </div>
  );
}

// ─── Stat Card ────────────────────────────────────────────────────────────────
interface StatCardProps {
  label: string;
  value: number | string;
  icon: React.ElementType;
  iconColor: string;
  iconBg: string;
  loading?: boolean;
}

export function StatCard({ label, value, icon: Icon, iconColor, iconBg, loading }: StatCardProps) {
  return (
    <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 md:p-5 flex items-center gap-3 md:gap-4">
      <div className={cn("flex h-10 w-10 md:h-11 md:w-11 shrink-0 items-center justify-center rounded-xl", iconBg)}>
        <Icon className={cn("h-4 w-4 md:h-5 md:w-5", iconColor)} />
      </div>
      <div className="min-w-0">
        <p className="text-xs font-medium text-gray-500 dark:text-gray-400 truncate">{label}</p>
        {loading ? (
          <div className="h-6 w-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mt-1" />
        ) : (
          <p className="text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 leading-tight">{value}</p>
        )}
      </div>
    </div>
  );
}

// ─── Error Banner ─────────────────────────────────────────────────────────────
interface ErrorBannerProps {
  message: string;
  onRetry?: () => void;
}

export function ErrorBanner({ message, onRetry }: ErrorBannerProps) {
  return (
    <div className="flex items-center justify-between rounded-xl border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-950/50 px-4 py-3 gap-4">
      <p className="text-sm text-red-700 dark:text-red-400 min-w-0">{message}</p>
      {onRetry && (
        <button
          onClick={onRetry}
          className="shrink-0 text-sm font-medium text-red-700 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 underline underline-offset-2"
        >
          Retry
        </button>
      )}
    </div>
  );
}