import React from 'react';
import { Button, Card, CardBody } from '../ui';
import { PublicLayout } from '../layout';
import { AlertCircle, RefreshCw, Home, HelpCircle } from 'lucide-react';

interface Props {
  error: string;
  details?: Array<{ service: string; error_message: string }>;
  onRetry: () => void;
  isRetrying?: boolean;
}

export const DemoErrorScreen: React.FC<Props> = ({
  error,
  details,
  onRetry,
  isRetrying = false,
}) => {
  return (
    <PublicLayout
      variant="centered"
      headerProps={{
        showThemeToggle: true,
        showAuthButtons: false,
      }}
    >
      <div className="max-w-2xl mx-auto p-8">
        <Card className="shadow-xl">
          <CardBody className="p-8 text-center">
            <div className="flex justify-center mb-4">
              <AlertCircle className="w-20 h-20 text-[var(--color-error)]" />
            </div>

            <h1 className="text-3xl font-bold text-[var(--color-error)] mb-3">
              Error en la Configuración del Demo
            </h1>

            <p className="text-[var(--text-secondary)] mb-6 text-lg">
              {error}
            </p>

            {details && details.length > 0 && (
              <div className="mb-6 p-4 bg-[var(--color-error)]/10 border border-[var(--color-error)] rounded-lg text-left">
                <h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">
                  Detalles del error:
                </h3>
                <ul className="space-y-2">
                  {details.map((detail, idx) => (
                    <li key={idx} className="text-sm">
                      <span className="font-medium text-[var(--text-primary)]">
                        {detail.service}:
                      </span>{' '}
                      <span className="text-[var(--text-secondary)]">
                        {detail.error_message}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            <div className="flex flex-col gap-3 max-w-md mx-auto mt-6">
              <Button
                onClick={onRetry}
                disabled={isRetrying}
                variant="primary"
                size="lg"
                className="w-full"
              >
                <RefreshCw className={`w-5 h-5 mr-2 ${isRetrying ? 'animate-spin' : ''}`} />
                {isRetrying ? 'Reintentando...' : 'Reintentar Configuración'}
              </Button>

              <Button
                onClick={() => window.location.href = '/demo'}
                variant="secondary"
                size="lg"
                className="w-full"
              >
                <Home className="w-5 h-5 mr-2" />
                Volver a la Página Demo
              </Button>

              <Button
                onClick={() => window.location.href = '/contact'}
                variant="ghost"
                size="lg"
                className="w-full"
              >
                <HelpCircle className="w-5 h-5 mr-2" />
                Contactar Soporte
              </Button>
            </div>

            <div className="mt-6">
              <p className="text-xs text-[var(--text-tertiary)]">
                Si el problema persiste, por favor contacta a nuestro equipo de soporte.
              </p>
            </div>
          </CardBody>
        </Card>
      </div>
    </PublicLayout>
  );
};