import React, { useMemo, useState } from "react";
import { z } from "zod";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Card as UICard, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Switch } from "@/components/ui/switch";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  ReferenceLine,
  BarChart,
  Bar,
  Legend,
  AreaChart,
  Area,
} from "recharts";
import {
  Activity,
  Pill as PillIcon,
  ClipboardList,
  Calendar,
  FileText,
  Search,
  FileUp,
  Users,
  Stethoscope,
  Shield,
  TriangleAlert,
  QrCode,
  Settings,
  Brain,
  DollarSign,
  ListCheck,
  Sparkles,
  Layers,
  Share2,
  RadioTower,
  FileCheck,
  FolderLock,
  MessageSquare,
  SlidersHorizontal,
  Globe,
  Clock,
  Landmark,
  LifeBuoy,
} from "lucide-react";

// ========= componentes base reutilizables =========

function Section({ title, children, actions }: any) {
  return (
    <UICard className="rounded-2xl">
      <CardHeader className="pb-2 flex flex-row items-center justify-between">
        <CardTitle className="text-base">{title}</CardTitle>
        {actions}
      </CardHeader>
      <CardContent className="grid gap-3">{children}</CardContent>
    </UICard>
  );
}

function FieldRow({ label, children, hint, id, required }: any) {
  return (
    <div className="grid gap-1">
      <div className="flex items-center gap-2">
        {label && (
          <Label htmlFor={id}>
            {label}
            {required && <span className="text-destructive ml-1">*</span>}
          </Label>
        )}
        {hint && <span className="text-xs opacity-70">{hint}</span>}
      </div>
      {children}
    </div>
  );
}

function Kpi({ title, value, hint }: any) {
  return (
    <UICard className="rounded-2xl bg-accent/20">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm opacity-70">{title}</CardTitle>
      </CardHeader>
      <CardContent className="pt-0">
        <div className="text-2xl font-semibold">{value}</div>
        {hint && <div className="text-xs opacity-70 mt-1">{hint}</div>}
      </CardContent>
    </UICard>
  );
}

function ChartCard({ title, children, height = 240 }: any) {
  return (
    <UICard className="rounded-2xl">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm opacity-70">{title}</CardTitle>
      </CardHeader>
      <CardContent className="pt-0" style={{ height }}>
        {children}
      </CardContent>
    </UICard>
  );
}

function EmptyState({ icon: Icon, title, desc, action }: any) {
  return (
    <div className="rounded-2xl border p-6 text-center grid gap-2">
      {Icon && <Icon className="h-8 w-8 mx-auto opacity-70" />}
      <div className="font-medium">{title}</div>
      <div className="text-sm opacity-70">{desc}</div>
      {action}
    </div>
  );
}

// ========= 01 Tablero =========

function Mod01Tablero() {
  const kpis = [
    { t: "Adherencia (7d)", v: "86%" },
    { t: "PA promedio", v: "132/84" },
    { t: "Síntomas hoy", v: "1" },
  ];
  return (
    <div className="grid gap-4">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        {kpis.map((k, i) => (
          <Kpi key={i} title={k.t} value={k.v} />
        ))}
      </div>
      <Section title="Bitácora del día">
        <div className="grid md:grid-cols-3 gap-3">
          <FieldRow label="Estado de ánimo">
            <Select defaultValue="bien">
              <SelectTrigger>
                <SelectValue placeholder="Selecciona" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="bien">🙂 Bien</SelectItem>
                <SelectItem value="neutral">😐 Neutro</SelectItem>
                <SelectItem value="mal">🙁 Mal</SelectItem>
              </SelectContent>
            </Select>
          </FieldRow>
          <FieldRow label="Síntoma">
            <Input placeholder="Dolor manos / pies" />
          </FieldRow>
          <div className="flex items-end">
            <Button>Registrar</Button>
          </div>
        </div>
      </Section>
      <Section title="Tomas de hoy (ejemplo)">
        {[
          { m: "Losartán 50mg", h: "08:00", done: true },
          { m: "Trazodona 100mg", h: "22:00", done: false },
        ].map((r, i) => (
          <div
            key={i}
            className="flex items-center justify-between rounded-xl border p-3 text-sm"
          >
            <div>
              <span className="opacity-70 mr-2">{r.h}</span>
              {r.m}
            </div>
            <Badge variant={r.done ? "secondary" : "destructive"}>
              {r.done ? "Tomado" : "Pendiente"}
            </Badge>
          </div>
        ))}
      </Section>
      <Section title="Signos recientes (demo)">
        <div className="grid md:grid-cols-3 gap-3">
          <Kpi title="PA" value="132/84" hint="Hoy 08:30" />
          <Kpi title="Glicemia" value="110" hint="mg/dL" />
          <Kpi title="SpO₂" value="97%" hint="reposo" />
        </div>
      </Section>
    </div>
  );
}

// ========= 02 Bitácora =========

const zSymptoms = z.object({
  mood: z.enum(["bien", "neutral", "mal"]),
  symptom: z.string().min(2),
  intensity: z.coerce.number().min(1).max(10),
});

function Mod02Bitacora() {
  const form = useForm({ resolver: zodResolver(zSymptoms), defaultValues: { intensity: 5 } });
  const [saved, setSaved] = useState<string | undefined>();
  return (
    <div className="grid gap-4">
      <Section title="Registrar síntoma">
        <form
          onSubmit={form.handleSubmit((v) => {
            setSaved(`${v.symptom} · registrado`);
            setTimeout(() => setSaved(undefined), 1800);
          })}
          className="grid md:grid-cols-3 gap-3"
        >
          <FieldRow label="Estado de ánimo">
            <Select onValueChange={(v) => form.setValue("mood", v as any)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="bien">🙂 Bien</SelectItem>
                <SelectItem value="neutral">😐 Neutro</SelectItem>
                <SelectItem value="mal">🙁 Mal</SelectItem>
              </SelectContent>
            </Select>
          </FieldRow>
          <FieldRow label="Síntoma" required>
            <Input {...form.register("symptom")} placeholder="Rigidez matinal" />
          </FieldRow>
          <FieldRow label="Intensidad (1–10)">
            <Controller
              control={form.control}
              name="intensity"
              render={({ field }) => (
                <input type="range" min={1} max={10} {...field} className="w-full" />
              )}
            />
          </FieldRow>
          <div className="md:col-span-3">
            <Button type="submit">Registrar</Button>
          </div>
        </form>
      </Section>
      {saved && (
        <Alert>
          <AlertDescription>{saved}</AlertDescription>
        </Alert>
      )}
    </div>
  );
}

// ========= 03 Medicación =========

const zMed = z.object({
  name: z.string().min(2),
  dose: z.string().min(1),
  hour: z.string().regex(/^\d{2}:\d{2}$/),
});

function Mod03Medicamentos() {
  const form = useForm({ resolver: zodResolver(zMed) });
  const [rows, setRows] = useState<any[]>([
    { name: "Trazodona", dose: "100mg", hour: "22:00" },
    { name: "Armodafinilo", dose: "150mg", hour: "08:00" },
  ]);
  return (
    <div className="grid gap-4">
      <Section title="Tratamientos activos (demo)">
        <div className="w-full overflow-x-auto rounded-2xl border">
          <table className="w-full text-sm">
            <thead className="bg-accent/30">
              <tr>
                <th className="p-3 text-left">Medicamento</th>
                <th className="p-3 text-left">Dosis</th>
                <th className="p-3 text-left">Hora</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} className="border-t">
                  <td className="p-3">{r.name}</td>
                  <td className="p-3">{r.dose}</td>
                  <td className="p-3">{r.hour}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
      <Section title="Agregar medicación">
        <form
          onSubmit={form.handleSubmit((v) => setRows((prev) => [...prev, v]))}
          className="grid md:grid-cols-4 gap-3"
        >
          <FieldRow label="Nombre">
            <Input {...form.register("name")} placeholder="Nombre" />
          </FieldRow>
          <FieldRow label="Dosis">
            <Input {...form.register("dose")} placeholder="100mg" />
          </FieldRow>
          <FieldRow label="Hora">
            <Input {...form.register("hour")} placeholder="22:00" />
          </FieldRow>
          <div className="flex items-end">
            <Button type="submit">
              <PillIcon className="h-4 w-4 mr-2" />
              Agregar
            </Button>
          </div>
        </form>
      </Section>
    </div>
  );
}

// ========= 04 Signos =========

const zVitals = z
  .object({
    sys: z.coerce.number().min(80).max(220),
    dia: z.coerce.number().min(40).max(140),
    hr: z.coerce.number().min(30).max(200),
  })
  .refine((v) => v.dia < v.sys, { path: ["dia"], message: "Diastólica < Sistólica" });

function Mod04Signos() {
  const form = useForm({ resolver: zodResolver(zVitals) });
  const data = useMemo(
    () => [
      { d: "Lun", pa: 136 },
      { d: "Mar", pa: 134 },
      { d: "Mié", pa: 133 },
      { d: "Jue", pa: 135 },
      { d: "Vie", pa: 132 },
      { d: "Sáb", pa: 131 },
      { d: "Dom", pa: 130 },
    ],
    []
  );
  return (
    <div className="grid gap-4">
      <ChartCard title="PA sistólica (mmHg)">
        <ResponsiveContainer>
          <LineChart data={data}>
            <XAxis dataKey="d" />
            <YAxis width={36} />
            <Tooltip />
            <ReferenceLine y={140} strokeDasharray="3 3" />
            <Line
              type="monotone"
              dataKey="pa"
              dot={false}
              strokeWidth={2}
              stroke="var(--chart-1)"
            />
          </LineChart>
        </ResponsiveContainer>
      </ChartCard>
      <Section title="Registrar presión">
        <form onSubmit={form.handleSubmit(() => {})} className="grid md:grid-cols-4 gap-3">
          <FieldRow label="Sistólica">
            <Input type="number" {...form.register("sys", { valueAsNumber: true })} />
          </FieldRow>
          <FieldRow label="Diastólica">
            <Input type="number" {...form.register("dia", { valueAsNumber: true })} />
          </FieldRow>
          <FieldRow label="Frecuencia">
            <Input type="number" {...form.register("hr", { valueAsNumber: true })} />
          </FieldRow>
          <div className="flex items-end">
            <Button>
              <Activity className="h-4 w-4 mr-2" />
              Guardar
            </Button>
          </div>
        </form>
        {form.formState.errors.dia && (
          <Alert className="mt-2">
            <AlertDescription>{String(form.formState.errors.dia.message)}</AlertDescription>
          </Alert>
        )}
      </Section>
    </div>
  );
}

// ========= 05 a 34 (demo rápido) =========

function Mod05Consultas() {
  const f = useForm();
  return (
    <div className="grid gap-4">
      <Section title="Agendar consulta">
        <form onSubmit={f.handleSubmit(() => {})} className="grid md:grid-cols-4 gap-3">
          <FieldRow label="Fecha/Hora">
            <Input type="datetime-local" />
          </FieldRow>
          <FieldRow label="Especialidad">
            <Input placeholder="Reumatología" />
          </FieldRow>
          <FieldRow label="Profesional">
            <Input placeholder="Dr./Dra." />
          </FieldRow>
          <div className="flex items-end">
            <Button>
              <Calendar className="h-4 w-4 mr-2" />
              Agendar
            </Button>
          </div>
        </form>
      </Section>
    </div>
  );
}

function Mod06Documentos() {
  return (
    <Section title="Tus documentos">
      <EmptyState
        icon={FileText}
        title="Sin documentos cargados en este demo"
        desc="Aquí podrás subir recetas, interconsultas e informes."
        action={
          <Button>
            <FileUp className="h-4 w-4 mr-2" />
            Subir
          </Button>
        }
      />
    </Section>
  );
}

function Mod07Costos() {
  const data = [
    { m: "Ene", v: 63200 },
    { m: "Feb", v: 80400 },
    { m: "Mar", v: 75400 },
    { m: "Abr", v: 91200 },
  ];
  return (
    <ChartCard title="Gasto mensual en salud (demo)">
      <ResponsiveContainer>
        <BarChart data={data}>
          <XAxis dataKey="m" />
          <YAxis width={40} />
          <Tooltip />
          <Legend />
          <Bar dataKey="v" fill="var(--chart-5)" />
        </BarChart>
      </ResponsiveContainer>
    </ChartCard>
  );
}

function Mod08Auditorias() {
  const logs = Array.from({ length: 12 }, (_, i) => ({
    t: `2025-11-${String(i + 1).padStart(2, "0")} 08:${String(i % 60).padStart(2, "0")}`,
    e: i % 2 ? "Lectura de historial" : "Actualización de registro",
    a: i % 3 ? "Titular" : "Cuidador",
  }));
  return (
    <Section title="Historial de actividades (demo)">
      <ScrollArea className="h-72 rounded-2xl border">
        {logs.map((l, i) => (
          <div key={i} className="grid grid-cols-12 gap-2 px-3 py-2 border-b text-sm">
            <div className="col-span-4">{l.t}</div>
            <div className="col-span-5">{l.e}</div>
            <div className="col-span-3">{l.a}</div>
          </div>
        ))}
      </ScrollArea>
    </Section>
  );
}

function Mod09Analisis() {
  return (
    <Section title="Recomendaciones automáticas (ejemplo)">
      <ul className="list-disc pl-6 text-sm">
        <li>Registrar PA dos veces al día por 7 días.</li>
        <li>Anotar rigidez matinal en bitácora si dura más de 30 minutos.</li>
      </ul>
    </Section>
  );
}

function Mod10Cotizacion() {
  const items = [
    { f: "Farmacia A", p: 3990 },
    { f: "Farmacia B", p: 4290 },
    { f: "Farmacia C", p: 3890 },
  ];
  const best = items.reduce((a, b) => (a.p < b.p ? a : b));
  return (
    <Section title="Comparador de precios (demo)">
      <div className="rounded-2xl border overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="bg-accent/30">
            <tr>
              <th className="p-3 text-left">Farmacia</th>
              <th className="p-3 text-left">Precio</th>
            </tr>
          </thead>
          <tbody>
            {items.map((x, i) => (
              <tr key={i} className="border-t">
                <td className="p-3">
                  {x.f}
                  {x.f === best.f && <Badge className="ml-2">Mejor precio</Badge>}
                </td>
                <td className="p-3">${x.p}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Section>
  );
}

function Mod11Reportes() {
  const [gen, setGen] = useState(false);
  return (
    <Section title="Generar reporte PDF/Link (mock)">
      <div className="grid md:grid-cols-3 gap-3 text-sm">
        <FieldRow label="Periodo">
          <Select defaultValue="mensual">
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="semanal">Semanal</SelectItem>
              <SelectItem value="mensual">Mensual</SelectItem>
            </SelectContent>
          </Select>
        </FieldRow>
        <FieldRow label="Formato">
          <Select defaultValue="pdf">
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="pdf">PDF</SelectItem>
              <SelectItem value="link">Enlace</SelectItem>
            </SelectContent>
          </Select>
        </FieldRow>
        <FieldRow label="Idioma">
          <Select defaultValue="es">
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="es">Español</SelectItem>
              <SelectItem value="en">English</SelectItem>
            </SelectContent>
          </Select>
        </FieldRow>
      </div>
      <div className="pt-2">
        <Button
          onClick={() => {
            setGen(true);
            setTimeout(() => setGen(false), 1200);
          }}
        >
          {gen ? "Generando…" : "Generar"}
        </Button>
      </div>
    </Section>
  );
}

function Mod12Comunidad() {
  return (
    <Tabs defaultValue="muro">
      <TabsList>
        <TabsTrigger value="muro">Muro</TabsTrigger>
        <TabsTrigger value="grupos">Grupos</TabsTrigger>
      </TabsList>

      <TabsContent value="muro" className="grid gap-3">
        {["Hoy me sentí mejor", "Busco grupo de HTA"].map((p, i) => (
          <UICard key={i} className="rounded-2xl">
            <CardContent className="p-3 flex items-center justify-between">
              <div>{p}</div>
              <div className="flex gap-2">
                <Button size="sm" variant="outline">
                  Comentar
                </Button>
                <Button size="sm">Unirme</Button>
              </div>
            </CardContent>
          </UICard>
        ))}
      </TabsContent>

      <TabsContent value="grupos" className="grid gap-3">
        {["Diabetes", "Hipertensión", "Rehabilitación"].map((g) => (
          <div
            key={g}
            className="rounded-xl border p-3 flex items-center justify-between"
          >
            <div className="font-medium">{g}</div>
            <Button size="sm">Unirme</Button>
          </div>
        ))}
      </TabsContent>
    </Tabs>
  );
}

function Mod13Agenda() {
  const [items, setItems] = useState<any[]>([
    { t: "Tomar Trazodona 100mg", h: "22:00", done: false },
    { t: "Registrar PA", h: "08:00", done: true },
  ]);
  return (
    <div className="grid gap-4">
      <Section title="Hoy">
        {items.map((it, i) => (
          <div
            key={i}
            className="flex items-center justify-between rounded-xl border p-3"
          >
            <div className="text-sm">
              <span className="opacity-70 mr-2">{it.h}</span>
              {it.t}
            </div>
            <Switch
              checked={it.done}
              onCheckedChange={(v) =>
                setItems((prev) =>
                  prev.map((p, ix) => (ix === i ? { ...p, done: v } : p))
                )
              }
            />
          </div>
        ))}
      </Section>
    </div>
  );
}

function Mod14Profesional() {
  const pts = [
    { n: "Walter P.", p: "Alta", u: "hoy 08:10" },
    { n: "Paciente demo", p: "Media", u: "ayer 19:40" },
  ];
  return (
    <Section title="Pacientes asignados (demo profesional)">
      <div className="grid grid-cols-12 gap-2 text-sm font-medium opacity-70">
        <div className="col-span-5">Paciente</div>
        <div className="col-span-3">Prioridad</div>
        <div className="col-span-2">Última act.</div>
        <div className="col-span-2 text-right">Acciones</div>
      </div>
      {pts.map((p, i) => (
        <div key={i} className="grid grid-cols-12 items-center gap-2 py-2 border-t">
          <div className="col-span-5">{p.n}</div>
          <div className="col-span-3">
            <Badge variant={p.p === "Alta" ? "destructive" : "secondary"}>{p.p}</Badge>
          </div>
          <div className="col-span-2">{p.u}</div>
          <div className="col-span-2 flex justify-end">
            <Button size="sm">Ver</Button>
          </div>
        </div>
      ))}
    </Section>
  );
}

function Mod15Privacidad() {
  return (
    <div className="grid gap-4">
      <Section title="Accesos activos">
        <div className="rounded-2xl border overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-accent/30">
              <tr>
                <th className="p-3 text-left">Nombre</th>
                <th className="p-3 text-left">Relación</th>
                <th className="p-3 text-left">Alcance</th>
                <th className="p-3 text-left">Vence</th>
                <th className="p-3 text-left">Acción</th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-t">
                <td className="p-3">Cuidador demo</td>
                <td className="p-3">Familiar</td>
                <td className="p-3">Red de apoyo</td>
                <td className="p-3">2025-12-01</td>
                <td className="p-3">
                  <Button size="sm" variant="outline">
                    Revocar
                  </Button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </Section>
      <Section title="Nivel de privacidad">
        <Select defaultValue="apoyo">
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="privado">Privado total</SelectItem>
            <SelectItem value="prof">Personal + Profesional</SelectItem>
            <SelectItem value="apoyo">Red de apoyo</SelectItem>
          </SelectContent>
        </Select>
      </Section>
      <Section title="Portabilidad y eliminación">
        <div className="flex gap-2">
          <Button variant="outline">
            <FileText className="h-4 w-4 mr-2" />
            Descargar respaldo
          </Button>
          <Button variant="destructive">
            <TriangleAlert className="h-4 w-4 mr-2" />
            Eliminar datos
          </Button>
        </div>
      </Section>
    </div>
  );
}

function Mod16Ciclos() {
  return (
    <div className="grid gap-4">
      <Section title="Ciclo activo: Control HTA">
        <div className="grid gap-2">
          <div className="rounded-xl border p-3 flex items-center justify-between">
            <div>Fase: Inicio · Meta: TA &lt; 140/90</div>
            <Badge variant="secondary">Activa</Badge>
          </div>
          <div className="rounded-xl border p-3 flex items-center justify-between">
            <div>Fase: Mantenimiento · Meta: 130–139/80–89</div>
            <Badge>Próxima</Badge>
          </div>
        </div>
      </Section>
      <Section title="Eventos adversos">
        <EmptyState
          icon={TriangleAlert}
          title="Sin eventos registrados"
          desc="Registrar si ocurre un efecto adverso de medicamentos o síntomas importantes."
          action={<Button>Agregar evento</Button>}
        />
      </Section>
    </div>
  );
}

function Mod17Familiar() {
  const [list, setList] = useState<any[]>([
    { t: "Verificar toma de Trazodona", done: false },
    { t: "Registrar PA en la app", done: false },
  ]);
  return (
    <Section title="Checklist del día (familiar/cuidador)">
      {list.map((x, i) => (
        <div
          key={i}
          className="flex items-center justify-between rounded-xl border p-3"
        >
          <div className="text-sm">{x.t}</div>
          <Switch
            checked={x.done}
            onCheckedChange={(v) =>
              setList((prev) =>
                prev.map((p, ix) => (ix === i ? { ...p, done: v } : p))
              )
            }
          />
        </div>
      ))}
    </Section>
  );
}

function Mod18Psico() {
  return (
    <div className="grid gap-4">
      <Section title="PHQ-9 (corto)">
        <div className="grid md:grid-cols-3 gap-3">
          <FieldRow label="Ánimo bajo (0-3)">
            <Input type="number" placeholder="1" />
          </FieldRow>
          <FieldRow label="Anhedonia (0-3)">
            <Input type="number" placeholder="1" />
          </FieldRow>
          <FieldRow label="Sueño (0-3)">
            <Input type="number" placeholder="1" />
          </FieldRow>
        </div>
        <div className="pt-2">
          <Button>Calcular</Button>
        </div>
      </Section>
      <Section title="Plan de seguridad">
        <Textarea placeholder="Contactar a... Realizar..." />
      </Section>
    </div>
  );
}

function Mod19Economico() {
  const series = [
    { m: "Ene", g: 63200 },
    { m: "Feb", g: 80400 },
    { m: "Mar", g: 75400 },
    { m: "Abr", g: 91200 },
  ];
  return (
    <div className="grid gap-4">
      <div className="grid md:grid-cols-3 gap-3">
        <Kpi title="Gasto mes" value="$91.200" />
        <Kpi title="Presupuesto" value="$100.000" />
        <Kpi title="Ahorro" value="$8.800" />
      </div>
      <ChartCard title="Evolución de gasto (demo)">
        <ResponsiveContainer>
          <AreaChart data={series}>
            <XAxis dataKey="m" />
            <YAxis width={40} />
            <Tooltip />
            <Area
              dataKey="g"
              stroke="var(--chart-4)"
              fill="var(--chart-4)"
              fillOpacity={0.2}
            />
          </AreaChart>
        </ResponsiveContainer>
      </ChartCard>
    </div>
  );
}

function Mod20Rutinas() {
  return (
    <div className="grid gap-4">
      <Section title="Plan semanal (alimentación)">
        <div className="grid md:grid-cols-3 gap-2 text-sm">
          {["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"].map((d) => (
            <div key={d} className="rounded-xl border p-3">
              <div className="font-medium mb-1">{d}</div>
              <ul className="list-disc pl-4">
                <li>Desayuno: Avena + fruta</li>
                <li>Almuerzo: Proteína + ensalada</li>
                <li>Cena: Sopa de verduras</li>
              </ul>
            </div>
          ))}
        </div>
      </Section>
      <Section title="Rutina ejercicio (demo)">
        <div className="grid md:grid-cols-3 gap-3">
          <div className="rounded-xl border p-3">
            <div className="font-medium">Caminar 30′</div>
            <Button className="mt-2" size="sm">
              Marcar cumplido
            </Button>
          </div>
          <div className="rounded-xl border p-3">
            <div className="font-medium">Fuerza suave 15′</div>
            <Button className="mt-2" size="sm">
              Marcar cumplido
            </Button>
          </div>
        </div>
      </Section>
    </div>
  );
}

function Mod21Resumen() {
  return (
    <div className="grid gap-4">
      <div className="grid md:grid-cols-4 gap-3">
        <Kpi title="Adherencia (30d)" value="86%" />
        <Kpi title="PA fuera de meta" value="3 d" />
        <Kpi title="Síntomas relevantes" value="2" />
        <Kpi title="Gasto mes" value="$91.200" />
      </div>
      <Section title="Eventos clave (demo)">
        <ul className="list-disc pl-6 text-sm">
          <li>Ingreso a GES HTA · 2025-07-03</li>
          <li>Estudio tolerancia a la glucosa · 2025-07-15</li>
          <li>Consulta dolor manos/pies · 2025-11-10</li>
        </ul>
      </Section>
    </div>
  );
}

function Mod22Acces() {
  const [hc, setHc] = useState(false);
  const [font, setFont] = useState(16);
  return (
    <Section title="Accesibilidad (demo)">
      <div className="grid md:grid-cols-3 gap-3">
        <div className="flex items-center justify-between rounded-xl border p-3">
          <div>Alto contraste</div>
          <Switch checked={hc} onCheckedChange={setHc} />
        </div>
        <div className="rounded-xl border p-3">
          <div className="mb-2">Tamaño de fuente</div>
          <input
            type="range"
            min={14}
            max={22}
            value={font}
            onChange={(e) => setFont(parseInt(e.target.value))}
            className="w-full"
          />
        </div>
        <div className="rounded-xl border p-3">Navegación por teclado ✔</div>
      </div>
    </Section>
  );
}

function Mod23Profesional() {
  return (
    <Section title="Interfaz profesional (acciones rápidas)">
      <div className="grid md:grid-cols-3 gap-2">
        {["Ver ficha", "Firmar receta", "Solicitar exámenes"].map((a) => (
          <Button key={a} variant="outline">
            {a}
          </Button>
        ))}
      </div>
    </Section>
  );
}

function Mod24Multiprof() {
  const tasks = [
    { t: "Ajuste de dosis", own: "Médico", st: "pendiente" },
    { t: "Plan nutricional", own: "Nutrición", st: "en curso" },
  ];
  return (
    <Section title="Care Plan multiprofesional (demo)">
      <div className="rounded-2xl border overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-accent/30">
            <tr>
              <th className="p-3 text-left">Tarea</th>
              <th className="p-3 text-left">Responsable</th>
              <th className="p-3 text-left">Estado</th>
            </tr>
          </thead>
          <tbody>
            {tasks.map((x, i) => (
              <tr key={i} className="border-t">
                <td className="p-3">{x.t}</td>
                <td className="p-3">{x.own}</td>
                <td className="p-3">
                  <Badge variant={x.st === "pendiente" ? "destructive" : "secondary"}>
                    {x.st}
                  </Badge>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Section>
  );
}

function Mod25Permisos() {
  return (
    <div className="grid gap-4">
      <Section title="Plantillas de permisos">
        <div className="grid md:grid-cols-3 gap-3">
          {["Nutrición (lectura)", "Kinesiología (R/W)", "Psicología (lectura)"].map(
            (p) => (
              <div
                key={p}
                className="rounded-xl border p-3 flex items-center justify-between"
              >
                <div>{p}</div>
                <Button size="sm">Aplicar</Button>
              </div>
            )
          )}
        </div>
      </Section>
      <Section title="Delegaciones">
        <EmptyState
          icon={Share2}
          title="Sin delegaciones"
          desc="Crea una delegación temporal de acceso."
          action={<Button>Crear</Button>}
        />
      </Section>
    </div>
  );
}

function Mod26Integr() {
  return (
    <div className="grid gap-4">
      <Section title="Bandeja externa (mock)">
        <div className="rounded-xl border p-3 text-sm">
          FONASA · Atenciones: 0 · Licencias: 0 · Interconsultas: 0
        </div>
      </Section>
      <Section title="Sincronización">
        <Button variant="outline">
          <RadioTower className="h-4 w-4 mr-2" />
          Sincronizar ahora
        </Button>
      </Section>
    </div>
  );
}

function Mod27SOS() {
  return (
    <div className="grid gap-4">
      <Section title="Datos mínimos de emergencia">
        <ul className="list-disc pl-6 text-sm">
          <li>Alergias: Penicilina</li>
          <li>Dx relevante: HTA</li>
          <li>Meds: Losartán (ejemplo)</li>
          <li>Contacto: +56 9 1234 5678</li>
        </ul>
      </Section>
      <Section title="QR de emergencia (placeholder)">
        <div className="rounded-2xl border p-6 text-center">
          <QrCode className="h-16 w-16 mx-auto opacity-70" />
          <div className="mt-2 text-sm opacity-70">(QR demo)</div>
          <Button className="mt-3">Generar nuevo</Button>
        </div>
      </Section>
    </div>
  );
}

function Mod28Licencias() {
  const f = useForm();
  return (
    <div className="grid gap-4">
      <Section title="Expediente de reembolso / licencias (demo)">
        <form onSubmit={f.handleSubmit(() => {})} className="grid md:grid-cols-3 gap-3">
          <FieldRow label="Proveedor">
            <Input placeholder="Clínica / Centro" />
          </FieldRow>
          <FieldRow label="Monto">
            <Input placeholder="$" />
          </FieldRow>
          <FieldRow label="Adjuntos">
            <Button variant="outline">
              <FileUp className="h-4 w-4 mr-2" />
              Subir
            </Button>
          </FieldRow>
        </form>
        <div className="pt-2">
          <Button>Enviar</Button>
        </div>
      </Section>
    </div>
  );
}

function Mod29Comunidad() {
  return (
    <Section title="Comunidad y apoyo (atajos)">
      <div className="grid md:grid-cols-2 gap-3">
        <UICard className="rounded-2xl">
          <CardContent className="p-3 flex items-center justify-between">
            <div>Grupo HTA</div>
            <Button size="sm">Unirme</Button>
          </CardContent>
        </UICard>
        <UICard className="rounded-2xl">
          <CardContent className="p-3 flex items-center justify-between">
            <div>Rehabilitación</div>
            <Button size="sm">Unirme</Button>
          </CardContent>
        </UICard>
      </div>
    </Section>
  );
}

function Mod30IA() {
  const [thr, setThr] = useState(140);
  return (
    <div className="grid gap-4">
      <Section title="Umbrales de alerta (demo IA)">
        <div className="rounded-xl border p-3">
          <div className="mb-2">PA alerta: {thr} mmHg</div>
          <input
            type="range"
            min={120}
            max={180}
            value={thr}
            onChange={(e) => setThr(parseInt(e.target.value))}
            className="w-full"
          />
        </div>
      </Section>
      <Section title="Explicabilidad">
        <Textarea placeholder="Motivo de la alerta, factores de riesgo, etc." />
      </Section>
    </div>
  );
}

function Mod31Config() {
  return (
    <div className="grid gap-4">
      <Section title="Preferencias de la app">
        <div className="grid md:grid-cols-3 gap-3">
          <FieldRow label="Idioma">
            <Select defaultValue="es">
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="es">Español</SelectItem>
                <SelectItem value="en">English</SelectItem>
              </SelectContent>
            </Select>
          </FieldRow>
          <FieldRow label="Zona horaria">
            <Input placeholder="America/Santiago" />
          </FieldRow>
          <FieldRow label="Formato de hora">
            <Select defaultValue="24h">
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="24h">24 horas</SelectItem>
                <SelectItem value="12h">12 horas</SelectItem>
              </SelectContent>
            </Select>
          </FieldRow>
        </div>
      </Section>
    </div>
  );
}

function Mod32Timeline() {
  const events = [
    { t: "Ingreso GES HTA", d: "2025-07-03" },
    { t: "Estudio PTGO", d: "2025-07-15" },
    { t: "Consulta dolor manos/pies", d: "2025-11-10" },
  ];
  return (
    <Section title="Línea de tiempo (resumen demo)">
      <div className="grid gap-2">
        {events.map((e, i) => (
          <div
            key={i}
            className="rounded-xl border p-3 text-sm flex items-center justify-between"
          >
            <div>{e.d}</div>
            <div>{e.t}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Mod33Legado() {
  return (
    <div className="grid gap-4">
      <Section title="Voluntades anticipadas (borrador)">
        <Textarea placeholder="Indicar preferencias de tratamiento, contactos clave, etc." />
      </Section>
      <Section title="Donación de órganos">
        <Select defaultValue="no">
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="si">Sí</SelectItem>
            <SelectItem value="no">No</SelectItem>
          </SelectContent>
        </Select>
      </Section>
    </div>
  );
}

function Mod34Cuidador() {
  const [t, setT] = useState<any[]>([
    { t: "Dar Trazodona 100mg 22:00", done: false },
    { t: "Registrar PA 08:00", done: false },
  ]);
  return (
    <div className="grid gap-4">
      <Section title="Tareas del día (cuidador demo)">
        {t.map((x, i) => (
          <div
            key={i}
            className="flex items-center justify-between rounded-xl border p-3"
          >
            <div className="text-sm">{x.t}</div>
            <Switch
              checked={x.done}
              onCheckedChange={(v) =>
                setT((prev) =>
                  prev.map((p, ix) => (ix === i ? { ...p, done: v } : p))
                )
              }
            />
          </div>
        ))}
      </Section>
      <Section title="Instructivos rápidos">
        <div className="grid md:grid-cols-2 gap-3">
          <Button variant="outline">Medición PA</Button>
          <Button variant="outline">Administración de meds</Button>
        </div>
      </Section>
    </div>
  );
}

// ========= shell navegación =========

const NAV = [
  { id: 1, label: "01 · Tablero", icon: Activity },
  { id: 2, label: "02 · Bitácora", icon: ClipboardList },
  { id: 3, label: "03 · Medicamentos", icon: PillIcon },
  { id: 4, label: "04 · Signos", icon: Activity },
  { id: 5, label: "05 · Consultas", icon: Calendar },
  { id: 6, label: "06 · Documentos", icon: FileText },
  { id: 7, label: "07 · Costos", icon: DollarSign },
  { id: 8, label: "08 · Auditorías", icon: FileCheck },
  { id: 9, label: "09 · Análisis", icon: Sparkles },
  { id: 10, label: "10 · Cotización", icon: Search },
  { id: 11, label: "11 · Reportes", icon: FileText },
  { id: 12, label: "12 · Comunidad", icon: Users },
  { id: 13, label: "13 · Agenda", icon: Calendar },
  { id: 14, label: "14 · Profesional", icon: Stethoscope },
  { id: 15, label: "15 · Privacidad", icon: Shield },
  { id: 16, label: "16 · Ciclos", icon: Layers },
  { id: 17, label: "17 · Familiar", icon: Users },
  { id: 18, label: "18 · Psicología", icon: Brain },
  { id: 19, label: "19 · Económico", icon: DollarSign },
  { id: 20, label: "20 · Rutinas", icon: ListCheck },
  { id: 21, label: "21 · Resumen 360", icon: Activity },
  { id: 22, label: "22 · Accesibilidad", icon: SlidersHorizontal },
  { id: 23, label: "23 · Profesional tratante", icon: Stethoscope },
  { id: 24, label: "24 · Multiprofesional", icon: Users },
  { id: 25, label: "25 · Permisos", icon: FolderLock },
  { id: 26, label: "26 · Integraciones", icon: Landmark },
  { id: 27, label: "27 · SOS", icon: LifeBuoy },
  { id: 28, label: "28 · Licencias", icon: FileText },
  { id: 29, label: "29 · Comunidad+", icon: MessageSquare },
  { id: 30, label: "30 · IA", icon: Sparkles },
  { id: 31, label: "31 · Config", icon: Settings },
  { id: 32, label: "32 · Timeline", icon: Clock },
  { id: 33, label: "33 · Legado", icon: Globe },
  { id: 34, label: "34 · Cuidador", icon: Users },
];

const MODULES: Record<number, React.ComponentType<any>> = {
  1: Mod01Tablero,
  2: Mod02Bitacora,
  3: Mod03Medicamentos,
  4: Mod04Signos,
  5: Mod05Consultas,
  6: Mod06Documentos,
  7: Mod07Costos,
  8: Mod08Auditorias,
  9: Mod09Analisis,
  10: Mod10Cotizacion,
  11: Mod11Reportes,
  12: Mod12Comunidad,
  13: Mod13Agenda,
  14: Mod14Profesional,
  15: Mod15Privacidad,
  16: Mod16Ciclos,
  17: Mod17Familiar,
  18: Mod18Psico,
  19: Mod19Economico,
  20: Mod20Rutinas,
  21: Mod21Resumen,
  22: Mod22Acces,
  23: Mod23Profesional,
  24: Mod24Multiprof,
  25: Mod25Permisos,
  26: Mod26Integr,
  27: Mod27SOS,
  28: Mod28Licencias,
  29: Mod29Comunidad,
  30: Mod30IA,
  31: Mod31Config,
  32: Mod32Timeline,
  33: Mod33Legado,
  34: Mod34Cuidador,
};

function Header() {
  return (
    <header className="flex items-center justify-between gap-3 p-3 rounded-2xl border bg-card text-card-foreground">
      <div className="flex items-center gap-3">
        <span className="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-primary text-primary-foreground font-bold">
          TS
        </span>
        <div className="font-semibold text-sm md:text-base">
          TuSalud PRO · Demo Sistema Personal de Salud
        </div>
      </div>
      <div className="flex items-center gap-2">
        <Button size="sm" variant="ghost">
          Modo claro/oscuro
        </Button>
      </div>
    </header>
  );
}

function Sidebar({
  current,
  onSelect,
}: {
  current: number;
  onSelect: (id: number) => void;
}) {
  return (
    <aside className="hidden md:flex w-72 flex-col gap-2 p-3 rounded-2xl border bg-card text-card-foreground">
      <div className="px-2 py-1 text-sm opacity-70">Módulos 01–34</div>
      <ScrollArea className="h-[70vh] pr-2">
        <div className="flex flex-col gap-1">
          {NAV.map((m) => (
            <button
              key={m.id}
              onClick={() => onSelect(m.id)}
              className={`flex items-center gap-3 px-3 py-2 rounded-xl text-left transition border ${
                current === m.id
                  ? "bg-accent/60 border-border"
                  : "hover:bg-accent/40 border-transparent"
              }`}
            >
              <m.icon className="h-4 w-4" />
              <span className="text-sm font-medium">{m.label}</span>
            </button>
          ))}
        </div>
      </ScrollArea>
    </aside>
  );
}

export default function TsProVistaNavegable0134() {
  const [current, setCurrent] = useState<number>(1);
  const CurrentMod = useMemo(
    () => MODULES[current] ?? Mod01Tablero,
    [current]
  );

  return (
    <div className="grid gap-4">
      <Header />
      <div className="grid grid-cols-1 md:grid-cols-[18rem_1fr] gap-4">
        <Sidebar current={current} onSelect={setCurrent} />
        <main className="grid gap-4">
          <UICard className="rounded-2xl">
            <CardHeader>
              <CardTitle>{NAV.find((n) => n.id === current)?.label}</CardTitle>
            </CardHeader>
            <CardContent className="grid gap-4">
              <CurrentMod />
            </CardContent>
          </UICard>
        </main>
      </div>
    </div>
  );
}