/**
 * DashboardStates
 *
 * Reusable empty and error state components for dashboard sections.
 * Provides consistent appearance for "no data" and error scenarios.
 *
 * @example
 * // Empty state
 * {!data.length && !loading && (
 *   <DashboardEmptyState
 *     icon={TrendingUp}
 *     title="No analytics data available"
 *     description="Try selecting a different time range"
 *   />
 * )}
 *
 * @example
 * // Error state with retry
 * {error && (
 *   <DashboardErrorState
 *     error={error}
 *     onRetry={() => refetch()}
 *   />
 * )}
 *
 * @example
 * // Error state as inline alert
 * <DashboardErrorState
 *   error="Failed to load data"
 *   variant="inline"
 * />
 */

import React from "react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { AlertCircle, RefreshCcw, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { TYPOGRAPHY } from "@/lib/dashboard/designTokens";

// =============================================================================
// EMPTY STATE
// =============================================================================

export interface DashboardEmptyStateProps {
  /** Icon to display (from lucide-react) */
  icon?: LucideIcon;
  /** Main message/title */
  title: string;
  /** Supporting description text */
  description?: string;
  /** Optional action button */
  action?: {
    label: string;
    onClick: () => void;
  };
  /** Height of the container */
  height?: "sm" | "md" | "default" | "lg";
  /** Additional className */
  className?: string;
}

const HEIGHT_MAP = {
  sm: "h-[200px]",
  md: "h-[300px]",
  default: "h-[400px]",
  lg: "h-[500px]",
};

export const DashboardEmptyState: React.FC<DashboardEmptyStateProps> = ({
  icon: Icon,
  title,
  description,
  action,
  height = "default",
  className,
}) => {
  return (
    <div
      className={cn(
        "flex items-center justify-center text-muted-foreground",
        HEIGHT_MAP[height],
        className
      )}
    >
      <div className="text-center max-w-sm px-4">
        {Icon && (
          <Icon className="h-12 w-12 mx-auto mb-4 opacity-50" />
        )}
        <div className="font-medium mb-2 text-foreground">{title}</div>
        {description && (
          <p className={cn(TYPOGRAPHY.cardDescription, "mb-4")}>
            {description}
          </p>
        )}
        {action && (
          <Button variant="outline" size="sm" onClick={action.onClick}>
            {action.label}
          </Button>
        )}
      </div>
    </div>
  );
};

// =============================================================================
// ERROR STATE
// =============================================================================

export interface DashboardErrorStateProps {
  /** Error message or Error object */
  error: string | Error;
  /** Title shown above the error message */
  title?: string;
  /** Callback for retry button */
  onRetry?: () => void;
  /** Retry button label */
  retryLabel?: string;
  /** Visual variant */
  variant?: "default" | "destructive" | "warning" | "inline";
  /** Additional className */
  className?: string;
}

export const DashboardErrorState: React.FC<DashboardErrorStateProps> = ({
  error,
  title = "Error",
  onRetry,
  retryLabel = "Try Again",
  variant = "destructive",
  className,
}) => {
  const errorMessage = error instanceof Error ? error.message : error;

  // Inline variant - simple text display
  if (variant === "inline") {
    return (
      <div
        className={cn(
          "flex items-center justify-center h-[200px] text-muted-foreground",
          className
        )}
      >
        <div className="text-center">
          <AlertCircle className="h-8 w-8 mx-auto mb-2 text-destructive" />
          <p className="text-sm text-destructive">{errorMessage}</p>
          {onRetry && (
            <Button
              variant="outline"
              size="sm"
              onClick={onRetry}
              className="mt-3"
            >
              <RefreshCcw className="h-3.5 w-3.5 mr-1.5" />
              {retryLabel}
            </Button>
          )}
        </div>
      </div>
    );
  }

  // Alert variant - only "default" and "destructive" are supported by shadcn/ui Alert
  // For "warning", we use custom styling
  const alertVariant = variant === "destructive" ? "destructive" : "default";
  const warningClass = variant === "warning"
    ? "border-amber-500/50 text-amber-700 dark:text-amber-400 [&>svg]:text-amber-600"
    : "";

  return (
    <Alert variant={alertVariant} className={cn("mx-4 my-4", warningClass, className)}>
      <AlertCircle className="h-4 w-4" />
      <AlertTitle>{title}</AlertTitle>
      <AlertDescription className="flex items-center justify-between">
        <span>{errorMessage}</span>
        {onRetry && (
          <Button
            variant="outline"
            size="sm"
            onClick={onRetry}
            className="ml-4 shrink-0"
          >
            <RefreshCcw className="h-3.5 w-3.5 mr-1.5" />
            {retryLabel}
          </Button>
        )}
      </AlertDescription>
    </Alert>
  );
};

// =============================================================================
// LOADING STATE (bonus - for consistency)
// =============================================================================

export interface DashboardLoadingStateProps {
  /** Message to display */
  message?: string;
  /** Height of the container */
  height?: "sm" | "md" | "default" | "lg";
  /** Additional className */
  className?: string;
}

export const DashboardLoadingState: React.FC<DashboardLoadingStateProps> = ({
  message = "Loading...",
  height = "default",
  className,
}) => {
  return (
    <div
      className={cn(
        "flex items-center justify-center",
        HEIGHT_MAP[height],
        className
      )}
    >
      <div className="text-center">
        <div className="h-8 w-8 mx-auto mb-3 border-2 border-primary border-t-transparent rounded-full animate-spin" />
        <p className="text-sm text-muted-foreground">{message}</p>
      </div>
    </div>
  );
};

// =============================================================================
// NO PERMISSION STATE (bonus - for protected content)
// =============================================================================

export interface DashboardNoPermissionStateProps {
  /** Feature name that requires permission */
  feature?: string;
  /** Additional className */
  className?: string;
}

export const DashboardNoPermissionState: React.FC<DashboardNoPermissionStateProps> = ({
  feature,
  className,
}) => {
  return (
    <div
      className={cn(
        "flex items-center justify-center h-[300px] text-muted-foreground",
        className
      )}
    >
      <div className="text-center">
        <div className="h-12 w-12 mx-auto mb-4 rounded-full bg-muted flex items-center justify-center">
          <AlertCircle className="h-6 w-6" />
        </div>
        <div className="font-medium mb-2 text-foreground">Access Restricted</div>
        <p className="text-sm text-muted-foreground max-w-xs">
          {feature
            ? `You don't have permission to view ${feature}.`
            : "You don't have permission to view this content."}
        </p>
      </div>
    </div>
  );
};

export default {
  Empty: DashboardEmptyState,
  Error: DashboardErrorState,
  Loading: DashboardLoadingState,
  NoPermission: DashboardNoPermissionState,
};
