// Reusable presentational components

const Badge = ({ tone = "default", children, icon = null, className = "" }) => {
  const tones = {
    default: "bg-white/5 text-ink-300 border-white/10",
    sky: "bg-sky-500/10 text-sky-300 border-sky-500/20",
    rose: "bg-rose-500/10 text-rose-300 border-rose-500/20",
    amber: "bg-amber-500/10 text-amber-300 border-amber-500/20",
    emerald: "bg-emerald-500/10 text-emerald-300 border-emerald-500/20",
    violet: "bg-violet-500/10 text-violet-300 border-violet-500/20",
    zinc: "bg-white/5 text-ink-300 border-white/10",
  };
  return (
    <span className={`badge ${tones[tone]} ${className}`}>
      {icon}{children}
    </span>
  );
};

const PriorityBadge = ({ priority }) => {
  const c = priorityClass(priority);
  return (
    <span className={`badge ${c.bg} ${c.text} border-transparent ring-1 ${c.ring}`}>
      <span className={`w-1.5 h-1.5 rounded-full ${c.dot}`}></span>
      {c.label}
    </span>
  );
};

const UrgencyBadge = ({ urgency }) => {
  const c = urgencyClass(urgency);
  return <span className={`badge ${c.bg} ${c.text} ring-1 ${c.ring} border-transparent uppercase tracking-wider text-[10px] font-semibold`}>{c.label}</span>;
};

const ChannelIcon = ({ channel, size = 14 }) => {
  const m = channelMeta(channel);
  const Comp = I[m.icon];
  return (
    <span className={`inline-flex items-center justify-center w-6 h-6 rounded-md ${m.bg} ${m.color}`}>
      <Comp size={size} />
    </span>
  );
};

const KpiCard = ({ label, value, sub, tone = "default", icon }) => {
  const accent = {
    default: "text-ink-100",
    rose: "text-rose-300",
    amber: "text-amber-300",
    sky: "text-sky-300",
    emerald: "text-emerald-300",
  }[tone];
  return (
    <div className="card rounded-xl p-4 flex flex-col gap-2 card-hover transition-colors">
      <div className="flex items-center justify-between text-ink-400">
        <span className="text-[11px] uppercase tracking-wider font-medium">{label}</span>
        {icon}
      </div>
      <div className={`text-3xl font-semibold tracking-tight ${accent}`}>{value}</div>
      {sub && <div className="text-xs text-ink-400">{sub}</div>}
    </div>
  );
};

const Btn = ({ children, onClick, tone = "default", size = "md", className = "", disabled, type = "button", icon = null }) => {
  const tones = {
    default: "bg-white/5 hover:bg-white/10 text-ink-100 border border-white/10",
    primary: "bg-sky-500 hover:bg-sky-400 text-ink-950 font-semibold border border-sky-400",
    ghost: "bg-transparent hover:bg-white/5 text-ink-200 border border-transparent",
    danger: "bg-rose-500/15 hover:bg-rose-500/25 text-rose-200 border border-rose-500/30",
  };
  const sizes = {
    sm: "text-xs px-2.5 py-1.5 gap-1.5",
    md: "text-sm px-3 py-2 gap-2",
    lg: "text-base px-4 py-2.5 gap-2",
  };
  return (
    <button
      type={type}
      disabled={disabled}
      onClick={onClick}
      className={`inline-flex items-center justify-center rounded-lg transition-colors ring-focus ${tones[tone]} ${sizes[size]} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className}`}
    >
      {icon}{children}
    </button>
  );
};

const Field = ({ label, children, hint, required }) => (
  <label className="flex flex-col gap-1.5">
    <span className="text-xs font-medium text-ink-300">
      {label}{required && <span className="text-rose-300 ml-1">*</span>}
    </span>
    {children}
    {hint && <span className="text-[11px] text-ink-500">{hint}</span>}
  </label>
);

const Input = React.forwardRef(({ className = "", ...props }, ref) => (
  <input
    ref={ref}
    {...props}
    className={`bg-ink-900 border border-white/10 rounded-lg px-3 py-2 text-sm text-ink-100 placeholder-ink-500 ring-focus hover:border-white/20 transition-colors ${className}`}
  />
));

const Select = ({ className = "", children, ...props }) => (
  <div className="relative">
    <select
      {...props}
      className={`appearance-none bg-ink-900 border border-white/10 rounded-lg pl-3 pr-9 py-2 text-sm text-ink-100 ring-focus hover:border-white/20 transition-colors w-full ${className}`}
    >
      {children}
    </select>
    <I.ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-ink-400 pointer-events-none" />
  </div>
);

const Textarea = ({ className = "", ...props }) => (
  <textarea
    {...props}
    className={`bg-ink-900 border border-white/10 rounded-lg px-3 py-2 text-sm text-ink-100 placeholder-ink-500 ring-focus hover:border-white/20 transition-colors resize-y min-h-[80px] ${className}`}
  />
);

const SectionHeader = ({ title, subtitle, action }) => (
  <div className="flex items-end justify-between gap-4 mb-5">
    <div>
      <h1 className="text-2xl font-semibold tracking-tight text-ink-100">{title}</h1>
      {subtitle && <p className="text-sm text-ink-400 mt-1">{subtitle}</p>}
    </div>
    {action}
  </div>
);

const Empty = ({ children }) => (
  <div className="text-center text-ink-500 text-sm py-12">{children}</div>
);

// Call button — handles its own "Llamando..." state
function CallButton({ patient, onCall, size = "sm" }) {
  const [calling, setCalling] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const handle = async (e) => {
    e.stopPropagation();
    if (calling) return;
    setCalling(true);
    setDone(false);
    try {
      await onCall(patient);
      setDone(true);
      setTimeout(() => setDone(false), 2200);
    } finally {
      setTimeout(() => setCalling(false), 1400);
    }
  };
  if (calling) {
    return (
      <Btn size={size} tone="primary" disabled className="calling">
        <span className="w-2 h-2 rounded-full bg-ink-950 pulse-dot inline-block"></span>
        Llamando…
      </Btn>
    );
  }
  if (done) {
    return (
      <Btn size={size} tone="primary" disabled icon={<I.Check size={14} />}>
        Enviado
      </Btn>
    );
  }
  return (
    <Btn size={size} tone="primary" onClick={handle} icon={<I.Phone size={14} />}>
      Llamar
    </Btn>
  );
}

// Toast — minimal, top-right
function ToastHost({ toasts, onDismiss }) {
  return (
    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 pointer-events-none">
      {toasts.map((t) => (
        <div
          key={t.id}
          className={`card rounded-xl p-3 fade-in pointer-events-auto flex gap-3 items-start ring-1 ${
            t.tone === "error" ? "ring-rose-500/30" : t.tone === "success" ? "ring-emerald-500/30" : "ring-sky-500/30"
          }`}
        >
          <div className="flex-1">
            <div className="text-sm font-medium text-ink-100">{t.title}</div>
            {t.body && <div className="text-xs text-ink-400 mt-0.5 whitespace-pre-wrap">{t.body}</div>}
          </div>
          <button onClick={() => onDismiss(t.id)} className="text-ink-500 hover:text-ink-200">
            <I.X size={14} />
          </button>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  Badge, PriorityBadge, UrgencyBadge, ChannelIcon,
  KpiCard, Btn, Field, Input, Select, Textarea,
  SectionHeader, Empty, CallButton, ToastHost,
});