import { Link } from 'react-router-dom';
import { Clock, Trash2, ChevronRight, FileText, AlertCircle } from 'lucide-react';
import { useHistory } from '@/hooks/useHistory';

const Historial = () => {
  const { history, loading, removeFromHistory, clearHistory } = useHistory();

  const formatDate = (timestamp: number) => {
    const date = new Date(timestamp);
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);

    if (minutes < 1) return 'Ahora mismo';
    if (minutes < 60) return `Hace ${minutes} min`;
    if (hours < 24) return `Hace ${hours} h`;
    if (days < 7) return `Hace ${days} días`;
    return date.toLocaleDateString('es-ES');
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[50vh]">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground mb-1 flex items-center gap-2">
            <Clock className="w-6 h-6" />
            Historial
          </h1>
          <p className="text-muted-foreground text-sm">
            Tus últimas consultas
          </p>
        </div>
        {history.length > 0 && (
          <button
            onClick={clearHistory}
            className="text-sm text-muted-foreground hover:text-destructive"
          >
            Limpiar todo
          </button>
        )}
      </div>

      {history.length === 0 ? (
        <div className="text-center py-12">
          <Clock className="w-16 h-16 mx-auto text-muted-foreground/30 mb-4" />
          <h3 className="text-lg font-medium text-foreground mb-2">
            Sin historial
          </h3>
          <p className="text-muted-foreground text-sm mb-4">
            Los protocolos que veas aparecerán aquí
          </p>
          <Link
            to="/"
            className="inline-flex items-center gap-2 text-primary hover:underline"
          >
            Ver protocolos <ChevronRight className="w-4 h-4" />
          </Link>
        </div>
      ) : (
        <div className="space-y-2">
          {history.map((item) => (
            <div
              key={item.id + item.viewedAt}
              className="flex items-center justify-between p-4 bg-card rounded-lg border hover:bg-accent/50 transition-colors"
            >
              <Link to={item.path} className="flex items-center gap-3 flex-1">
                <FileText className="w-5 h-5 text-muted-foreground" />
                <div>
                  <h3 className="font-medium text-foreground">{item.title}</h3>
                  <p className="text-xs text-muted-foreground">
                    {item.category} · {formatDate(item.viewedAt)}
                  </p>
                </div>
              </Link>
              <button
                onClick={() => removeFromHistory(item.id)}
                className="p-2 text-muted-foreground hover:text-destructive transition-colors"
                title="Eliminar del historial"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>
      )}

      {history.length > 0 && (
        <div className="bg-muted/50 rounded-lg p-4 flex items-start gap-3">
          <AlertCircle className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
          <div className="text-sm text-muted-foreground">
            <p className="font-medium text-foreground mb-1">Nota</p>
            <p>El historial se guarda en este dispositivo. Se muestran los últimos 20 accesos.</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default Historial;
