import React from "react";
import { AlertTriangle, RefreshCw, Wifi, WifiOff } from "lucide-react";
import { useTranslation } from "react-i18next";
import "./ErrorDisplay.css";

interface ErrorDisplayProps {
  error: {
    type: "network" | "server" | "unknown";
    status?: number;
    message?: string;
  };
  onRetry?: () => void;
  title?: string;
  className?: string;
}

export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
  error,
  onRetry,
  title,
  className = "",
}) => {
  const { t } = useTranslation();

  const getErrorIcon = () => {
    switch (error.type) {
      case "network":
        return <WifiOff className="error-icon" />;
      case "server":
        return <AlertTriangle className="error-icon" />;
      default:
        return <AlertTriangle className="error-icon" />;
    }
  };

  const getErrorMessage = () => {
    switch (error.type) {
      case "network":
        return t(
          "errors.network",
          "No hay conexión a internet. Comprueba tu conexión y vuelve a intentarlo."
        );
      case "server":
        if (error.status === 404) {
          return t(
            "errors.not_found",
            "No se encontraron datos para esta parada."
          );
        }
        if (error.status === 500) {
          return t(
            "errors.server_error",
            "Error del servidor. Inténtalo de nuevo más tarde."
          );
        }
        if (error.status && error.status >= 400) {
          return t(
            "errors.client_error",
            "Error en la solicitud. Verifica que la parada existe."
          );
        }
        return t("errors.server_generic", "Error del servidor ({{status}})", {
          status: error.status || "desconocido",
        });
      default:
        return (
          error.message ||
          t("errors.unknown", "Ha ocurrido un error inesperado.")
        );
    }
  };

  const getErrorTitle = () => {
    if (title) return title;

    switch (error.type) {
      case "network":
        return t("errors.network_title", "Sin conexión");
      case "server":
        return t("errors.server_title", "Error del servidor");
      default:
        return t("errors.unknown_title", "Error");
    }
  };

  return (
    <div className={`error-display ${className}`}>
      <div className="error-content">
        {getErrorIcon()}
        <h3 className="error-title">{getErrorTitle()}</h3>
        <p className="error-message">{getErrorMessage()}</p>
        {onRetry && (
          <button className="error-retry-button" onClick={onRetry}>
            <RefreshCw className="retry-icon" />
            {t("errors.retry", "Reintentar")}
          </button>
        )}
      </div>
    </div>
  );
};