/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * ErrorState Component
 *
 * Displays user-friendly error feedback with recovery options.
 * Positioned contextually near the failed message.
 *
 * @requirements 6.1, 6.2, 6.3, 6.4, 6.5, 6.7
 */

import * as React from 'react';

/**
 * Props for the ErrorState component.
 */
export interface ErrorStateProps {
    /** The error that occurred */
    error: Error;
    /** Callback invoked when user clicks Retry */
    onRetry: () => void;
    /** Callback invoked when user clicks Dismiss */
    onDismiss: () => void;
}

/**
 * Maps technical error messages to user-friendly messages.
 * Avoids exposing technical jargon, HTTP codes, or stack traces.
 */
function getFriendlyErrorMessage(error: Error): string {
    const message = error.message.toLowerCase();

    if (message.includes('network') || message.includes('fetch') || message.includes('failed to fetch')) {
        return 'Connection issue. Please check your internet.';
    }
    if (message.includes('timeout') || message.includes('timed out')) {
        return 'Request took too long. Please try again.';
    }
    if (message.includes('500') || message.includes('server') || message.includes('internal')) {
        return 'Something went wrong on our end. Please try again.';
    }
    if (message.includes('401') || message.includes('unauthorized') || message.includes('authentication')) {
        return 'Session expired. Please refresh the page.';
    }
    if (message.includes('403') || message.includes('forbidden')) {
        return 'Access denied. Please try again later.';
    }
    if (message.includes('404') || message.includes('not found')) {
        return 'Service unavailable. Please try again later.';
    }
    if (message.includes('rate') || message.includes('limit') || message.includes('429')) {
        return 'Too many requests. Please wait a moment.';
    }

    return 'Something went wrong. Please try again.';
}

/**
 * ErrorState displays user-friendly error feedback with recovery options.
 *
 * Features:
 * - User-friendly error message mapping (no technical jargon)
 * - Retry button to resend the failed request
 * - Dismiss button to clear the error
 * - Warning colors from design system
 * - Smooth entrance animation
 * - Accessible with proper ARIA attributes
 *
 * Validates:
 * - Requirement 6.1: User-friendly message without technical jargon
 * - Requirement 6.2: Prominent Retry button
 * - Requirement 6.3: Preserve user's original message for retry
 * - Requirement 6.4: Warning colors from design system
 * - Requirement 6.5: Smooth animation and dismissible
 * - Requirement 6.7: Positioned contextually near failed message
 */
export const ErrorState: React.FC<ErrorStateProps> = ({ error, onRetry, onDismiss }) => {
    const friendlyMessage = getFriendlyErrorMessage(error);

    return (
        <div className="error-state" role="alert" data-testid="error-state">
            <div className="error-state__icon" aria-hidden="true">
                <WarningIcon />
            </div>

            <div className="error-state__content">
                <p className="error-state__message" data-testid="error-state-message">
                    {friendlyMessage}
                </p>
                <p className="error-state__hint">Your message has been saved. Try again?</p>
            </div>

            <div className="error-state__actions">
                <button
                    className="error-state__retry"
                    onClick={onRetry}
                    type="button"
                    data-testid="error-state-retry"
                >
                    Try again
                </button>
                <button
                    className="error-state__dismiss"
                    onClick={onDismiss}
                    aria-label="Dismiss error"
                    type="button"
                    data-testid="error-state-dismiss"
                >
                    <DismissIcon />
                </button>
            </div>
        </div>
    );
};

/**
 * Warning icon SVG component.
 */
const WarningIcon: React.FC = () => (
    <svg
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="currentColor"
        aria-hidden="true"
    >
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-4V7h2v6h-2z" />
    </svg>
);

/**
 * Dismiss icon SVG component.
 */
const DismissIcon: React.FC = () => (
    <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        aria-hidden="true"
    >
        <path d="M18 6L6 18M6 6l12 12" />
    </svg>
);
