// Shared UI components for Naffco dashboard

// ── Section Header ──────────────────────────────────────────────────────────

function SectionHeader({ title, subtitle, action }) {
  return (
    <div className="flex items-start justify-between gap-4 flex-wrap">
      <div>
        <h1 className="text-lg font-semibold text-ink-100 tracking-tight">{title}</h1>
        {subtitle && <p className="text-xs text-ink-400 mt-0.5">{subtitle}</p>}
      </div>
      {action}
    </div>
  );
}

// ── KPI Card ────────────────────────────────────────────────────────────────

function KpiCard({ label, value, sub, icon, tone }) {
  const colors = {
    rose: "text-rose-300",
    amber: "text-amber-300",
    emerald: "text-emerald-300",
    sky: "text-sky-300",
  };
  const accent = colors[tone] || "text-amber-300";

  return (
    <div className="card rounded-xl p-4 card-hover">
      <div className="flex items-center gap-2 mb-2">
        <span className={`${accent} opacity-70`}>{icon}</span>
        <span className="text-[11px] text-ink-400 uppercase tracking-wider font-medium">{label}</span>
      </div>
      <div className={`text-2xl font-bold tabular-nums ${accent}`}>{value}</div>
      {sub && <div className="text-[11px] text-ink-500 mt-1">{sub}</div>}
    </div>
  );
}

// ── Badge ───────────────────────────────────────────────────────────────────

function Badge({ tone = "default", children, icon }) {
  const styles = {
    default: "bg-white/5 text-ink-300 border-white/10",
    amber: "bg-amber-500/10 text-amber-300 border-amber-500/30",
    rose: "bg-rose-500/10 text-rose-300 border-rose-500/30",
    emerald: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
    sky: "bg-sky-500/10 text-sky-300 border-sky-500/30",
    violet: "bg-violet-500/10 text-violet-300 border-violet-500/30",
    orange: "bg-orange-500/10 text-orange-300 border-orange-500/30",
    red: "bg-red-500/10 text-red-300 border-red-500/30",
  };
  return (
    <span className={`badge ${styles[tone] || styles.default}`}>
      {icon}{children}
    </span>
  );
}

// ── CrmssStatusBadge ────────────────────────────────────────────────────────

function CrmssStatusBadge({ status }) {
  const meta = crmssStatusMeta(status);
  return (
    <span className={`badge ${meta.bg} ${meta.color} ring-1 ${meta.ring}`}>
      {meta.label}
    </span>
  );
}

// ── AlarmTypeBadge ──────────────────────────────────────────────────────────

function AlarmTypeBadge({ type }) {
  const meta = alarmTypeMeta(type);
  const Icn = I[meta.icon];
  return (
    <span className={`badge ${meta.bg} ${meta.color} ring-1 ${meta.ring}`}>
      <Icn size={11} /> {meta.label}
    </span>
  );
}

// ── AlarmStatusBadge ────────────────────────────────────────────────────────

function AlarmStatusBadge({ status }) {
  const meta = alarmStatusMeta(status);
  return (
    <span className={`badge ${meta.bg} ${meta.color}`}>
      {meta.label}
    </span>
  );
}

// ── Language Badge ──────────────────────────────────────────────────────────

function LangBadge({ lang }) {
  const l = langLabel(lang);
  const isAr = l === "AR";
  return (
    <span className={`badge ${isAr ? "bg-violet-500/10 text-violet-300" : "bg-white/5 text-ink-300"}`}>
      <I.Globe size={10} /> {l}
    </span>
  );
}

// ── Button ──────────────────────────────────────────────────────────────────

function Btn({ children, onClick, tone = "default", size = "md", icon, disabled, className = "" }) {
  const base = "inline-flex items-center gap-1.5 rounded-lg font-medium transition-colors whitespace-nowrap";
  const sizes = {
    sm: "px-2.5 py-1 text-xs",
    md: "px-3 py-1.5 text-sm",
  };
  const tones = {
    default: "bg-white/5 text-ink-200 hover:bg-white/10 border border-white/10",
    primary: "bg-amber-500/15 text-amber-200 hover:bg-amber-500/25 border border-amber-500/30",
    danger: "bg-rose-500/10 text-rose-300 hover:bg-rose-500/20 border border-rose-500/30",
  };
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${base} ${sizes[size]} ${tones[tone]} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className}`}
    >
      {icon}{children}
    </button>
  );
}

// ── CallButton ──────────────────────────────────────────────────────────────

function CallButton({ alarm, onCall }) {
  const [calling, setCalling] = React.useState(false);

  const handleClick = async (e) => {
    e.stopPropagation();
    setCalling(true);
    await onCall(alarm);
    setTimeout(() => setCalling(false), 3000);
  };

  return (
    <button
      onClick={handleClick}
      disabled={calling}
      className={`inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all ${
        calling
          ? "bg-amber-500/20 text-amber-200 calling cursor-wait"
          : "bg-amber-500/10 text-amber-300 hover:bg-amber-500/20 border border-amber-500/30"
      }`}
    >
      <I.Phone size={12} />
      {calling ? "Calling…" : "Call"}
    </button>
  );
}

// ── Select ──────────────────────────────────────────────────────────────────

function Select({ children, className = "", ...props }) {
  return (
    <select
      className={`bg-ink-900 border border-white/10 rounded-lg px-3 py-2 text-sm text-ink-100 ring-focus appearance-none ${className}`}
      {...props}
    >
      {children}
    </select>
  );
}

// ── Empty state ─────────────────────────────────────────────────────────────

function Empty({ children }) {
  return (
    <div className="flex items-center justify-center py-12 text-ink-500 text-sm">
      {children}
    </div>
  );
}

// ── Toast ───────────────────────────────────────────────────────────────────

function ToastHost({ toasts, onDismiss }) {
  return (
    <div className="fixed bottom-4 right-4 z-[80] flex flex-col gap-2 max-w-sm">
      {toasts.map((t) => (
        <div
          key={t.id}
          className="card rounded-xl p-3 border border-white/10 shadow-lg fade-in cursor-pointer"
          onClick={() => onDismiss(t.id)}
        >
          <div className="flex items-center gap-2">
            {t.tone === "success" && <I.Check size={14} className="text-emerald-300" />}
            {t.tone === "error" && <I.AlertTriangle size={14} className="text-rose-300" />}
            {t.tone === "info" && <I.Zap size={14} className="text-amber-300" />}
            <span className="text-sm font-medium text-ink-100">{t.title}</span>
          </div>
          {t.body && <div className="text-xs text-ink-400 mt-1 whitespace-pre-wrap">{t.body}</div>}
        </div>
      ))}
    </div>
  );
}