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

const Favoritos = () => {
  const { favorites, loading, removeFavorite, clearAll } = useFavorites();

  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">
            <Heart className="w-6 h-6 text-red-500" />
            Favoritos
          </h1>
          <p className="text-muted-foreground text-sm">
            Tus protocolos y guías guardadas
          </p>
        </div>
        {favorites.length > 0 && (
          <button
            onClick={clearAll}
            className="text-sm text-muted-foreground hover:text-destructive"
          >
            Limpiar todo
          </button>
        )}
      </div>

      {favorites.length === 0 ? (
        <div className="text-center py-12">
          <Heart className="w-16 h-16 mx-auto text-muted-foreground/30 mb-4" />
          <h3 className="text-lg font-medium text-foreground mb-2">
            No tienes favoritos
          </h3>
          <p className="text-muted-foreground text-sm mb-4">
            Guarda protocolos para acceder rápidamente
          </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">
          {favorites.map((item) => (
            <div
              key={item.id}
              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 capitalize">
                    {item.category}
                  </p>
                </div>
              </Link>
              <button
                onClick={() => removeFavorite(item.id)}
                className="p-2 text-muted-foreground hover:text-destructive transition-colors"
                title="Eliminar de favoritos"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>
      )}

      {favorites.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>Los favoritos se guardan en este dispositivo. No se sincronizan entre dispositivos.</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default Favoritos;
