import React, { useState } from 'react';
import { AlertCircle, ChevronDown, ChevronUp } from 'lucide-react';
import { Alert, AlertDescription } from './ui/alert';

export interface DetailedErrorProps {
  title: string;
  description: string;
  possibleCauses?: string[];
  suggestedActions?: string[];
  technicalDetails?: string;
}

/**
 * Component to display detailed error information with actionable steps
 * Provides users with context and guidance on how to resolve issues
 */
export const DetailedError: React.FC<DetailedErrorProps> = ({
  title,
  description,
  possibleCauses,
  suggestedActions,
  technicalDetails
}) => {
  const [showTechnical, setShowTechnical] = useState(false);

  return (
    <Alert variant="destructive" className="text-left">
      <AlertCircle className="h-5 w-5" />
      <AlertDescription>
        <div className="space-y-3">
          {/* Title and Description */}
          <div>
            <p className="font-semibold text-sm">{title}</p>
            <p className="text-sm mt-1">{description}</p>
          </div>

          {/* Possible Causes */}
          {possibleCauses && possibleCauses.length > 0 && (
            <div>
              <p className="font-medium text-sm mb-1">Possible causes:</p>
              <ul className="text-sm space-y-0.5 ml-4 list-disc">
                {possibleCauses.map((cause, i) => (
                  <li key={i}>{cause}</li>
                ))}
              </ul>
            </div>
          )}

          {/* Suggested Actions */}
          {suggestedActions && suggestedActions.length > 0 && (
            <div>
              <p className="font-medium text-sm mb-1">Try these steps:</p>
              <ol className="text-sm space-y-0.5 ml-4 list-decimal">
                {suggestedActions.map((action, i) => (
                  <li key={i}>{action}</li>
                ))}
              </ol>
            </div>
          )}

          {/* Technical Details (collapsible) */}
          {technicalDetails && (
            <div>
              <button
                onClick={() => setShowTechnical(!showTechnical)}
                className="flex items-center gap-1 text-sm hover:underline"
              >
                {showTechnical ? (
                  <>
                    <ChevronUp className="h-3.5 w-3.5" />
                    Hide technical details
                  </>
                ) : (
                  <>
                    <ChevronDown className="h-3.5 w-3.5" />
                    Show technical details
                  </>
                )}
              </button>
              {showTechnical && (
                <div className="mt-2 p-2 bg-black/20 rounded text-xs font-mono overflow-auto">
                  {technicalDetails}
                </div>
              )}
            </div>
          )}
        </div>
      </AlertDescription>
    </Alert>
  );
};

/**
 * Simple error alert for less critical errors
 */
export const SimpleError: React.FC<{ message: string }> = ({ message }) => (
  <Alert variant="destructive">
    <AlertCircle className="h-4 w-4" />
    <AlertDescription className="text-sm">{message}</AlertDescription>
  </Alert>
);
