import { useState, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { ChevronLeft, Info, Brain, Baby, User } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
import { Button } from "../components/ui/button";

interface Option {
  val: number;
  label: string;
}

const GlasgowCalculator = () => {
  const [isPediatric, setIsPediatric] = useState(false);
  const [eye, setEye] = useState<number>(0);
  const [verbal, setVerbal] = useState<number>(0);
  const [motor, setMotor] = useState<number>(0);

  const eyeOptions: Option[] = [
    { val: 4, label: 'Espontánea' },
    { val: 3, label: 'A la orden/voz' },
    { val: 2, label: 'Al dolor' },
    { val: 1, label: 'Ninguna' },
  ];

  const verbalOptionsAdult: Option[] = [
    { val: 5, label: 'Orientado' },
    { val: 4, label: 'Confuso' },
    { val: 3, label: 'Palabras inapropiadas' },
    { val: 2, label: 'Sonidos ininteligibles' },
    { val: 1, label: 'Ninguna' },
  ];

  const verbalOptionsPediatric: Option[] = [
    { val: 5, label: 'Gorjeo / balbuceo' },
    { val: 4, label: 'Llanto irritable' },
    { val: 3, label: 'Llanto al dolor' },
    { val: 2, label: 'Gemido al dolor' },
    { val: 1, label: 'Ninguna' },
  ];

  const motorOptionsAdult: Option[] = [
    { val: 6, label: 'Obedece órdenes' },
    { val: 5, label: 'Localiza el dolor' },
    { val: 4, label: 'Retirada al dolor' },
    { val: 3, label: 'Flexión anormal (descorticación)' },
    { val: 2, label: 'Extensión anormal (descerebración)' },
    { val: 1, label: 'Ninguna' },
  ];

  const motorOptionsPediatric: Option[] = [
    { val: 6, label: 'Movimientos normales' },
    { val: 5, label: 'Retirada al tocarlo' },
    { val: 4, label: 'Retirada al dolor' },
    { val: 3, label: 'Flexión anormal' },
    { val: 2, label: 'Extensión anormal' },
    { val: 1, label: 'Ninguna' },
  ];

  const score = eye + verbal + motor;

  const severity = useMemo(() => {
    if (eye === 0 || verbal === 0 || motor === 0) return null;
    if (score >= 13) return { label: 'Leve', color: 'text-green-500' };
    if (score >= 9) return { label: 'Moderado', color: 'text-yellow-500' };
    return { label: 'Grave', color: 'text-red-500' };
  }, [score, eye, verbal, motor]);

  return (
    <div className="space-y-6 pb-20">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link to="/herramientas" className="p-2 hover:bg-muted rounded-full">
          <ChevronLeft className="w-6 h-6" />
        </Link>
        <h1 className="text-2xl font-bold flex items-center gap-2">
          <Brain className="w-6 h-6 text-primary" />
          Escala de Glasgow (GCS)
        </h1>
      </div>

      {/* Mode Selector */}
      <div className="flex p-1 bg-muted rounded-xl">
        <button
          onClick={() => setIsPediatric(false)}
          className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-lg transition-all ${!isPediatric ? 'bg-background shadow-sm' : 'text-muted-foreground'}`}
        >
          <User className="w-4 h-4" /> Adulto
        </button>
        <button
          onClick={() => setIsPediatric(true)}
          className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-lg transition-all ${isPediatric ? 'bg-background shadow-sm' : 'text-muted-foreground'}`}
        >
          <Baby className="w-4 h-4" /> Lactante / Ped.
        </button>
      </div>

      <div className="grid gap-4">
        {/* Apertura Ocular */}
        <Card className="border-l-4 border-l-blue-500">
          <CardHeader className="py-3 px-4">
            <CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Ocular (E)</CardTitle>
          </CardHeader>
          <CardContent className="px-4 pb-4 flex flex-wrap gap-2">
            {eyeOptions.map((opt) => (
              <Button
                key={opt.val}
                variant={eye === opt.val ? 'default' : 'outline'}
                onClick={() => setEye(opt.val)}
                className="flex-1 min-w-[140px] justify-start h-auto py-3 px-4 text-left"
              >
                <span className="text-lg font-bold mr-3">{opt.val}</span>
                <span className="text-xs">{opt.label}</span>
              </Button>
            ))}
          </CardContent>
        </Card>

        {/* Respuesta Verbal */}
        <Card className="border-l-4 border-l-green-500">
          <CardHeader className="py-3 px-4">
            <CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Verbal (V)</CardTitle>
          </CardHeader>
          <CardContent className="px-4 pb-4 flex flex-wrap gap-2">
            {(isPediatric ? verbalOptionsPediatric : verbalOptionsAdult).map((opt) => (
              <Button
                key={opt.val}
                variant={verbal === opt.val ? 'default' : 'outline'}
                onClick={() => setVerbal(opt.val)}
                className="flex-1 min-w-[140px] justify-start h-auto py-3 px-4 text-left"
              >
                <span className="text-lg font-bold mr-3">{opt.val}</span>
                <span className="text-xs">{opt.label}</span>
              </Button>
            ))}
          </CardContent>
        </Card>

        {/* Respuesta Motora */}
        <Card className="border-l-4 border-l-purple-500">
          <CardHeader className="py-3 px-4">
            <CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Motora (M)</CardTitle>
          </CardHeader>
          <CardContent className="px-4 pb-4 flex flex-wrap gap-2">
            {(isPediatric ? motorOptionsPediatric : motorOptionsAdult).map((opt) => (
              <Button
                key={opt.val}
                variant={motor === opt.val ? 'default' : 'outline'}
                onClick={() => setMotor(opt.val)}
                className="flex-1 min-w-[140px] justify-start h-auto py-3 px-4 text-left"
              >
                <span className="text-lg font-bold mr-3">{opt.val}</span>
                <span className="text-xs">{opt.label}</span>
              </Button>
            ))}
          </CardContent>
        </Card>
      </div>

      {/* Result Panel */}
      {eye > 0 && verbal > 0 && motor > 0 && (
        <div className="fixed bottom-20 left-4 right-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
          <div className="bg-card border-2 border-primary rounded-2xl p-6 shadow-2xl flex items-center justify-between">
            <div className="space-y-1">
              <div className="text-xs text-muted-foreground uppercase font-bold tracking-widest">Resultado GCS</div>
              <div className="text-4xl font-black text-foreground">
                {score} <span className="text-xl font-normal text-muted-foreground">/ 15</span>
              </div>
            </div>
            <div className="text-right space-y-1">
              <div className={`text-xl font-bold ${severity?.color}`}>{severity?.label}</div>
              <div className="text-xs text-muted-foreground italic">E{eye} V{verbal} M{motor}</div>
            </div>
          </div>
        </div>
      )}

      {/* Info Alert */}
      <div className="bg-muted/50 p-4 rounded-xl flex gap-3 text-sm text-muted-foreground">
        <Info className="w-5 h-5 flex-shrink-0 text-primary" />
        <p>Un GCS ≤ 8 suele requerir aseguramiento avanzado de la vía aérea e intubación orotraqueal (SVA).</p>
      </div>
    </div>
  );
};

export default GlasgowCalculator;
