Assist_Design/apps/portal/src/components/templates/PageLayout/PageLayout.tsx

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

export interface BreadcrumbItem {
  label: string;
  href?: string | undefined;
}

interface PageLayoutProps {
  icon?: ReactNode | undefined;
  title: string;
  description?: string | undefined;
  actions?: ReactNode | undefined;
  breadcrumbs?: BreadcrumbItem[] | undefined;
  loading?: boolean | undefined;
  loadingFallback?: ReactNode | undefined;
  error?: Error | string | null | undefined;
  onRetry?: (() => void) | undefined;
  children: ReactNode;
}

export function PageLayout({
  icon,
  title,
  description,
  actions,
  breadcrumbs,
  loading = false,
  loadingFallback,
  error = null,
  onRetry,
  children,
}: PageLayoutProps) {
  return (
    <div className="py-[var(--cp-space-lg)] sm:py-[var(--cp-space-xl)] md:py-[var(--cp-space-2xl)]">
      <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">
        {/* Breadcrumbs - scrollable on mobile */}
        {breadcrumbs && breadcrumbs.length > 0 && (
          <nav
            className="mb-[var(--cp-space-md)] sm:mb-[var(--cp-space-lg)] -mx-[var(--cp-space-md)] px-[var(--cp-space-md)] sm:mx-0 sm:px-0 overflow-x-auto scrollbar-none"
            aria-label="Breadcrumb"
          >
            <ol className="flex items-center space-x-1 sm:space-x-2 text-sm text-muted-foreground whitespace-nowrap">
              {breadcrumbs.map((item, index) => (
                <li key={index} className="flex items-center flex-shrink-0">
                  {index > 0 && (
                    <ChevronRightIcon className="h-4 w-4 mx-1 sm:mx-2 text-muted-foreground/50 flex-shrink-0" />
                  )}
                  {item.href ? (
                    <Link
                      href={item.href}
                      className="hover:text-foreground transition-colors duration-200 py-1 px-0.5 -mx-0.5 rounded"
                    >
                      {item.label}
                    </Link>
                  ) : (
                    <span className="text-foreground font-medium py-1" aria-current="page">
                      {item.label}
                    </span>
                  )}
                </li>
              ))}
            </ol>
          </nav>
        )}

        {/* Header */}
        <div className="mb-[var(--cp-space-lg)] sm:mb-[var(--cp-space-xl)] md:mb-[var(--cp-space-2xl)] pb-[var(--cp-space-lg)] sm:pb-[var(--cp-space-xl)] md:pb-[var(--cp-space-2xl)] border-b border-border">
          <div className="flex flex-col gap-[var(--cp-space-md)] sm:gap-[var(--cp-space-lg)]">
            {/* Title row */}
            <div className="flex items-start min-w-0 flex-1">
              {icon && (
                <div className="h-7 w-7 sm:h-8 sm:w-8 text-primary mr-[var(--cp-space-md)] sm:mr-[var(--cp-space-lg)] flex-shrink-0 mt-0.5">
                  {icon}
                </div>
              )}
              <div className="min-w-0 flex-1">
                <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-foreground leading-tight">
                  {title}
                </h1>
                {description && (
                  <p className="text-sm text-muted-foreground mt-1 leading-relaxed line-clamp-2 sm:line-clamp-none">
                    {description}
                  </p>
                )}
              </div>
            </div>

            {/* Actions - full width on mobile, stacks buttons */}
            {actions && (
              <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 w-full sm:w-auto [&>*]:w-full [&>*]:sm:w-auto">
                {actions}
              </div>
            )}
          </div>
        </div>

        {/* Content with loading and error states */}
        <div className="space-y-[var(--cp-space-xl)] sm:space-y-[var(--cp-space-2xl)]">
          {renderPageContent(loading, error ?? undefined, children, onRetry, loadingFallback)}
        </div>
      </div>
    </div>
  );
}

function renderPageContent(
  loading: boolean | undefined,
  error: Error | string | undefined,
  children: React.ReactNode,
  onRetry?: () => void,
  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>
  );
}