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

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

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

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

export function PageLayout({
  icon,
  title,
  description,
  actions,
  breadcrumbs,
  loading = false,
  error = null,
  onRetry,
  children,
}: PageLayoutProps) {
  return (
    <div className="py-[var(--cp-space-xl)] sm:py-[var(--cp-space-2xl)]">
      <div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-space-lg)] sm:px-[var(--cp-page-padding)] md:px-8">
        {/* Breadcrumbs */}
        {breadcrumbs && breadcrumbs.length > 0 && (
          <nav className="mb-[var(--cp-space-lg)]" aria-label="Breadcrumb">
            <ol className="flex items-center space-x-2 text-sm text-muted-foreground">
              {breadcrumbs.map((item, index) => (
                <li key={index} className="flex items-center">
                  {index > 0 && (
                    <ChevronRightIcon className="h-4 w-4 mx-2 text-muted-foreground/50" />
                  )}
                  {item.href ? (
                    <Link
                      href={item.href}
                      className="hover:text-foreground transition-colors duration-200 truncate"
                    >
                      {item.label}
                    </Link>
                  ) : (
                    <span className="text-foreground font-medium truncate" aria-current="page">
                      {item.label}
                    </span>
                  )}
                </li>
              ))}
            </ol>
          </nav>
        )}

        {/* Header */}
        <div className="mb-[var(--cp-space-2xl)] sm:mb-[var(--cp-space-3xl)]">
          <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-[var(--cp-space-lg)] sm:gap-[var(--cp-space-xl)]">
            <div className="flex items-start min-w-0 flex-1">
              {icon && (
                <div className="h-8 w-8 text-primary mr-[var(--cp-space-lg)] flex-shrink-0 mt-1">
                  {icon}
                </div>
              )}
              <div className="min-w-0 flex-1">
                <h1 className="text-2xl sm:text-3xl font-bold text-foreground leading-tight">
                  {title}
                </h1>
                {description && (
                  <p className="text-sm sm:text-base text-muted-foreground mt-1 leading-relaxed">
                    {description}
                  </p>
                )}
              </div>
            </div>
            {actions && <div className="flex-shrink-0 w-full sm:w-auto">{actions}</div>}
          </div>
        </div>

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

function PageLoadingState() {
  return (
    <div className="py-[var(--cp-space-3xl)]">
      <div className="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-48" />
            <Skeleton className="h-4 w-64" />
          </div>
        </div>
        <div className="space-y-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="bg-white border border-gray-200 rounded-lg p-4">
              <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;
}

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

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