import type { ReactNode } from "react";
import Link from "next/link";
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import { Skeleton } from "@/components/atoms/loading-skeleton";
import { ErrorState } from "@/components/atoms/error-state";

interface PageLayoutProps {
  /** @deprecated Icons no longer rendered in page headers */
  icon?: ReactNode | undefined;
  title: string;
  description?: string | undefined;
  actions?: ReactNode | undefined;
  backLink?: { label: string; href: string } | undefined;
  statusPill?: ReactNode | undefined;
  loading?: boolean | undefined;
  loadingFallback?: ReactNode | undefined;
  error?: Error | string | null | undefined;
  onRetry?: (() => void) | undefined;
  children: ReactNode;
}

export function PageLayout({
  title,
  description,
  actions,
  backLink,
  statusPill,
  loading = false,
  loadingFallback,
  error = null,
  onRetry,
  children,
}: PageLayoutProps) {
  return (
    <div>
      {/* Page header — h-16 matches sidebar logo area */}
      <div className="bg-muted/40 border-b border-border/40">
        <div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-space-md)] sm:px-[var(--cp-space-lg)] md:px-8 h-16 flex items-center">
          <div className="flex items-center justify-between gap-4 min-w-0 w-full">
            <div className="flex items-center min-w-0 flex-1">
              {backLink && (
                <Link
                  href={backLink.href}
                  className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors duration-200 mr-3 flex-shrink-0"
                >
                  <ArrowLeftIcon className="h-4 w-4" />
                  {backLink.label}
                </Link>
              )}
              <h1 className="text-xl font-bold text-foreground leading-tight truncate">{title}</h1>
              {statusPill && <div className="ml-2.5 flex-shrink-0">{statusPill}</div>}
              {description && (
                <p className="hidden sm:block text-sm text-muted-foreground ml-3 truncate">
                  {description}
                </p>
              )}
            </div>
            {actions && (
              <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">{actions}</div>
            )}
            {/* NotificationBell is rendered by AppShell via #page-header-end portal */}
            <div id="page-header-end" />
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-space-md)] sm:px-[var(--cp-space-lg)] md:px-8 py-[var(--cp-space-lg)] sm:py-[var(--cp-space-xl)] md:py-[var(--cp-space-2xl)]">
        <div className="space-y-[var(--cp-space-xl)] sm:space-y-[var(--cp-space-2xl)]">
          {renderPageContent({
            loading,
            error: error ?? undefined,
            children,
            onRetry,
            loadingFallback,
          })}
        </div>
      </div>
    </div>
  );
}

function renderPageContent({
  loading,
  error,
  children,
  onRetry,
  loadingFallback,
}: {
  loading: boolean | undefined;
  error: Error | string | undefined;
  children: React.ReactNode;
  onRetry: (() => void) | undefined;
  loadingFallback: React.ReactNode;
}): React.ReactNode {
  if (loading) {
    return loadingFallback ?? <PageLoadingState />;
  }
  if (error) {
    return <PageErrorState error={error} onRetry={onRetry} />;
  }
  return children;
}

function PageLoadingState() {
  return (
    <div className="py-[var(--cp-space-xl)] sm:py-[var(--cp-space-3xl)]">
      <div className="space-y-4 sm:space-y-6">
        <div className="flex items-center gap-3">
          <Skeleton className="h-8 w-8 rounded-full" />
          <div className="space-y-2">
            <Skeleton className="h-6 w-36 sm:w-48" />
            <Skeleton className="h-4 w-48 sm:w-64" />
          </div>
        </div>
        <div className="space-y-3 sm:space-y-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div
              key={i}
              className="bg-card border border-border rounded-lg p-3 sm:p-4 shadow-[var(--cp-shadow-1)]"
            >
              <Skeleton className="h-4 w-1/2 mb-2" />
              <Skeleton className="h-3 w-3/4" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

interface PageErrorStateProps {
  error: Error | string;
  onRetry?: (() => void) | undefined;
}

function PageErrorState({ error, onRetry }: PageErrorStateProps) {
  const errorMessage = typeof error === "string" ? error : error.message;

  return (
    <div className="py-[var(--cp-space-xl)] sm:py-[var(--cp-space-3xl)]">
      <ErrorState
        title="Unable to load page"
        message={errorMessage}
        onRetry={onRetry}
        variant="page"
      />
    </div>
  );
}
