import { useState } from 'react';
import { Link } from 'react-router-dom';
import {
  Activity,
  AlertTriangle,
  Brain,
  ChevronRight,
  GraduationCap,
  Heart,
  Users,
  Wind,
  Zap,
} from 'lucide-react';

// Simplified components
const BackButton = ({ to, label }: { to: string; label: string }) => (
  <Link to={to} className="flex items-center gap-3 p-4 bg-card border border-border rounded-xl hover:border-primary/50 transition-colors">
    <AlertTriangle className="w-5 h-5" />
    <span>{label}</span>
  </Link>
);

// Mock data for Soporte Vital topics
const soporteVitalTopics = [
  { id: '1', title: 'Evaluación Inicial', icon: Activity, description: 'Valoración primaria y secundaria del paciente' },
  { id: '2', title: 'Vía Aérea y Respiración', icon: Wind, description: 'Manejo de obstrucciones y soporte ventilatorio' },
  { id: '3', title: 'Circulación y Shock', icon: Heart, description: 'Control de hemorragias y manejo de shock' },
  { id: '4', title: 'Neurológico', icon: Brain, description: 'Evaluación del estado neurológico y crisis convulsivas' },
  { id: '5', title: 'Trauma y Fracturas', icon: Users, description: 'Inmovilización y manejo de lesiones traumáticas' },
  { id: '6', title: 'Parto de Emergencia', icon: GraduationCap, description: 'Asistencia al parto y manejo de complicaciones obstétricas' },
];

const SoporteVital = () => {
  return (
    <div className="space-y-6">
      <BackButton to="/" label="Volver al inicio" />

      {/* Header */}
      <div className="space-y-4">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
            <Activity className="w-7 h-7 text-blue-500" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-foreground">Soporte Vital Básico</h1>
            <p className="text-muted-foreground">Fundamentos de la atención prehospitalaria</p>
          </div>
        </div>
      </div>

      {/* Content Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {soporteVitalTopics.map((topic) => (
          <Link
            key={topic.id}
            to="#" // In a real app, this would link to specific sections or pages
            className="bg-card border border-border rounded-lg p-6 flex flex-col items-center justify-center hover:border-primary/50 transition-colors"
          >
            <div className="w-14 h-14 rounded-lg bg-primary/20 flex items-center justify-center mb-4">
              {topic.icon}
            </div>
            <h3 className="font-semibold text-foreground mb-2">{topic.title}</h3>
            <p className="text-sm text-muted-foreground text-center">
              {topic.description}
            </p>
          </Link>
        ))}
      </div>

      {/* Additional Information Section */}
      <div className="bg-muted/50 border border-border rounded-lg p-6">
        <h2 className="text-xl font-semibold text-foreground mb-4">¿Qué es el Soporte Vital Básico?</h2>
        <p className="text-muted-foreground">
          El Soporte Vital Básico (SVB) es el conjunto de maniobras y procedimientos destinados a mantener
          las funciones vitales básicas (conciencia, vía aérea, respiración y circulación) en situaciones de
          emergencia hasta la llegada de ayuda médica especializada.
        </p>
        <div className="mt-4 pt-4 border-t border-border">
          <h3 className="font-semibold text-foreground mb-3">Principios clave:</h3>
          <ul className="space-y-2 list-disc list-inside">
            <li>Seguridad del rescatador y del entorno</li>
            <li>Evaluación rápida de la condición del paciente</li>
            <li>Mantenimiento de la vía aérea y la respiración</li>
            <li>Control de la circulación y prevención del shock</li>
            <li>Activación temprana del sistema de emergencias médicas</li>
          </ul>
        </div>
      </div>

      {/* Related Protocols */}
      <div className="bg-muted/50 border border-border rounded-lg p-6">
        <h2 className="text-xl font-semibold text-foreground mb-4">Protocolos Relacionados</h2>
        <div className="space-y-4">
          <Link
            to="/rcp"
            className="block p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
          >
            <div className="flex items-center justify-between">
              <span className="text-foreground">Reanimación Cardiopulmonar (RCP)</span>
              <ChevronRight className="w-5 h-5 text-muted-foreground" />
            </div>
          </Link>
          <Link
            to="/ictus"
            className="block p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
          >
            <div className="flex items-center justify-between">
              <span className="text-foreground">Código Ictus</span>
              <ChevronRight className="w-5 h-5 text-muted-foreground" />
            </div>
          </Link>
          <Link
            to="/shock"
            className="block p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
          >
            <div className="flex items-center justify-between">
              <span className="text-foreground">Shock Hemorrágico</span>
              <ChevronRight className="w-5 h-5 text-muted-foreground" />
            </div>
          </Link>
          <Link
            to="/via-aerea"
            className="block p-4 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors"
          >
            <div className="flex items-center justify-between">
              <span className="text-foreground">Vía Aérea / OVACE</span>
              <ChevronRight className="w-5 h-5 text-muted-foreground" />
            </div>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default SoporteVital;