"use client";

import React, { useState } from "react";
import {
  AlertTriangle,
  RotateCcw,
  ChevronDown,
  ChevronUp,
  HelpCircle,
  WifiOff,
  ShieldAlert,
  Clock,
} from "lucide-react";
import { parseError, FormattedError } from "@/lib/error-utils";

export interface ErrorStateProps {
  title?: string;
  description?: string;
  error?: Error | unknown;
  /** Action called when clicking "Try Again" */
  onRetry?: () => void;
  /** Custom action slot */
  action?: React.ReactNode;
  /** Compact presentation for cards/widgets */
  compact?: boolean;
  /** Whether to show technical diagnostic details */
  showDiagnostics?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

/**
 * EasyUI-inspired ErrorState component for widgets, cards, and page sections.
 * Features Neo-Industrial dark aesthetics, spring-like pulse icon, and collapsible diagnostic trace.
 */
export function ErrorState({
  title: customTitle,
  description: customDescription,
  error,
  onRetry,
  action,
  compact = false,
  showDiagnostics = true,
  className = "",
  style,
}: ErrorStateProps) {
  const [showDetails, setShowDetails] = useState(false);

  const formatted: FormattedError = parseError(error);

  const displayTitle = customTitle || formatted.title;
  const displayDescription = customDescription || formatted.message;

  // Select contextual icon based on error category
  let IconComponent = AlertTriangle;
  let accentColor = "var(--color-error, #EF4444)";

  if (formatted.isNetworkError) {
    IconComponent = WifiOff;
    accentColor = "var(--color-warning, #F59E0B)";
  } else if (formatted.isAuthError || formatted.isForbidden) {
    IconComponent = ShieldAlert;
    accentColor = "var(--color-secondary, #8B5CF6)";
  } else if (formatted.isRateLimit) {
    IconComponent = Clock;
    accentColor = "var(--color-warning, #F59E0B)";
  }

  if (compact) {
    return (
      <div
        role="alert"
        className={`error-state-compact ${className}`}
        style={{
          display: "flex",
          alignItems: "center",
          gap: "var(--space-2, 0.5rem)",
          padding: "var(--space-2, 0.5rem) var(--space-3, 0.75rem)",
          background: "rgba(239, 68, 68, 0.06)",
          border: "1px solid rgba(239, 68, 68, 0.2)",
          borderRadius: "var(--radius-sm, 2px)",
          fontSize: "var(--text-xs, 0.75rem)",
          color: "var(--text-secondary, #A7A3B4)",
          ...style,
        }}
      >
        <IconComponent size={14} color={accentColor} style={{ flexShrink: 0 }} />
        <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {displayDescription}
        </span>
        {onRetry && (
          <button
            type="button"
            onClick={onRetry}
            style={{
              background: "transparent",
              border: "none",
              color: accentColor,
              fontWeight: 600,
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: 3,
              padding: 0,
            }}
          >
            <RotateCcw size={11} /> Retry
          </button>
        )}
      </div>
    );
  }

  return (
    <div
      role="alert"
      className={`error-state-container ${className}`}
      style={{
        position: "relative",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        textAlign: "center",
        padding: "var(--space-8, 2rem) var(--space-6, 1.5rem)",
        background: "var(--bg-elevated, #17151F)",
        border: "1px solid var(--border-color, #272430)",
        borderRadius: "var(--radius-md, 4px)",
        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.35)",
        overflow: "hidden",
        ...style,
      }}
    >
      {/* Top accent glow line */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: 2,
          background: `linear-gradient(90deg, transparent, ${accentColor}, transparent)`,
          opacity: 0.8,
        }}
      />

      {/* Pulsing Icon Badge */}
      <div
        style={{
          position: "relative",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          width: 52,
          height: 52,
          borderRadius: "var(--radius-md, 4px)",
          background: `color-mix(in srgb, ${accentColor} 12%, transparent)`,
          border: `1px solid color-mix(in srgb, ${accentColor} 30%, transparent)`,
          color: accentColor,
          marginBottom: "var(--space-4, 1rem)",
        }}
      >
        <IconComponent size={26} strokeWidth={2.2} />
      </div>

      {/* Title */}
      <h3
        style={{
          fontFamily: "var(--font-display, inherit)",
          fontSize: "var(--text-base, 1rem)",
          fontWeight: 700,
          color: "var(--text-primary, #F6F4F8)",
          marginBottom: "var(--space-1, 0.25rem)",
          letterSpacing: "-0.01em",
        }}
      >
        {displayTitle}
      </h3>

      {/* Description */}
      <p
        style={{
          fontSize: "var(--text-sm, 0.875rem)",
          color: "var(--text-secondary, #A7A3B4)",
          maxWidth: 460,
          lineHeight: 1.55,
          marginBottom: onRetry || action ? "var(--space-5, 1.25rem)" : 0,
        }}
      >
        {displayDescription}
      </p>

      {/* Status & Code Pill if available */}
      {formatted.code && (
        <div
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 6,
            padding: "2px 8px",
            background: "rgba(255, 255, 255, 0.04)",
            border: "1px solid var(--border-color-subtle, #1C1924)",
            borderRadius: "var(--radius-sm, 2px)",
            fontSize: "11px",
            fontFamily: "var(--font-mono, monospace)",
            color: "var(--text-tertiary, #6D697C)",
            marginBottom: "var(--space-4, 1rem)",
          }}
        >
          <span>CODE: {formatted.code}</span>
          {formatted.statusCode && <span>({formatted.statusCode})</span>}
        </div>
      )}

      {/* Actions */}
      {(onRetry || action) && (
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            alignItems: "center",
            justifyContent: "center",
            gap: "var(--space-3, 0.75rem)",
          }}
        >
          {onRetry && (
            <button
              type="button"
              onClick={onRetry}
              className="btn btn-primary"
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "var(--space-2, 0.5rem)",
                fontSize: "var(--text-sm, 0.875rem)",
                fontWeight: 600,
                padding: "var(--space-2, 0.5rem) var(--space-4, 1rem)",
              }}
            >
              <RotateCcw size={14} /> Try Again
            </button>
          )}
          {action}
        </div>
      )}

      {/* Diagnostics / Error details accordion */}
      {showDiagnostics && (error || formatted.requestId) && (
        <div style={{ marginTop: "var(--space-4, 1rem)", width: "100%", maxWidth: 500 }}>
          <button
            type="button"
            onClick={() => setShowDetails(!showDetails)}
            style={{
              background: "transparent",
              border: "none",
              color: "var(--text-tertiary, #6D697C)",
              fontSize: "var(--text-xs, 0.75rem)",
              cursor: "pointer",
              display: "inline-flex",
              alignItems: "center",
              gap: 4,
              padding: 4,
            }}
          >
            {showDetails ? (
              <>
                Hide diagnostics <ChevronUp size={12} />
              </>
            ) : (
              <>
                Show diagnostics <ChevronDown size={12} />
              </>
            )}
          </button>

          {showDetails && (
            <div
              style={{
                marginTop: "var(--space-2, 0.5rem)",
                padding: "var(--space-3, 0.75rem)",
                background: "rgba(0, 0, 0, 0.45)",
                border: "1px solid var(--border-color-subtle, #1C1924)",
                borderRadius: "var(--radius-sm, 2px)",
                fontFamily: "var(--font-mono, monospace)",
                fontSize: "11px",
                textAlign: "left",
                color: "var(--text-secondary, #A7A3B4)",
                maxHeight: 180,
                overflowY: "auto",
                whiteSpace: "pre-wrap",
                wordBreak: "break-all",
              }}
            >
              {formatted.requestId && (
                <div style={{ marginBottom: 4, color: "var(--color-primary, #FF9F0A)" }}>
                  Request ID: {formatted.requestId}
                </div>
              )}
              {error instanceof Error ? error.stack || error.message : JSON.stringify(error, null, 2)}
            </div>
          )}
        </div>
      )}
    </div>
  );
}