import { useEffect, useState } from "react";
import { api, formatBytes, SystemStatus } from "../api";
import { useDirty } from "../DirtyContext";

const SOURCE_COLORS: Record<string, string> = {
  samba:  "bg-emerald-500/20 text-emerald-300",
  nfs:     "bg-amber-500/20 text-amber-300",
  manual:  "bg-cyan-500/20 text-cyan-300",
};

const SOURCE_LABELS: Record<string, string> = {
  samba:  "SMB",
  nfs:    "NFS",
  manual: "Vigilado",
};

export default function Dashboard() {
  const [status, setStatus] = useState<SystemStatus | null>(null);
  const { modules } = useDirty();

  useEffect(() => {
    api.systemStatus().then(setStatus).catch(() => setStatus(null));
  }, []);

  const visibleDisks = status?.disks.filter(
    (d) => d.sources.includes("manual") || d.sources.includes("samba") || d.sources.includes("nfs")
  ) ?? [];

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-white">Dashboard</h1>

      <div className="grid gap-5 md:grid-cols-2">
        <div className="card">
          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-400">
            Uso de disco
          </h2>
          {visibleDisks.length ? (
            <div className="space-y-4">
              {visibleDisks.map((d) => (
                <div key={d.path}>
                  <div className="mb-1 flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-sm">
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="text-slate-300">{d.path}</span>
                      {d.sources.map((s) => (
                        <span
                          key={s}
                          className={`rounded-full px-2 py-0.5 text-xs ${SOURCE_COLORS[s] ?? "bg-slate-700 text-slate-300"}`}
                        >
                          {SOURCE_LABELS[s] ?? s}
                        </span>
                      ))}
                      {d.used_by && d.used_by.length > 0 && d.sources.length > 1 && (
                        <span className="text-xs text-slate-500">{d.used_by.join(", ")}</span>
                      )}
                    </div>
                    <span className="text-slate-400 text-xs">
                      {formatBytes(d.used_bytes)} / {formatBytes(d.total_bytes)}
                    </span>
                  </div>
                  <div className="h-2 overflow-hidden rounded bg-slate-800">
                    <div
                      className="h-full bg-brand-500"
                      style={{ width: `${Math.min(d.used_percent, 100)}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-slate-500">
              Sin puntos de montaje vigilados. Añádelos en Ajustes.
            </p>
          )}
        </div>

        <div className="card">
          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-400">
            Servicios
          </h2>
          {status?.services?.length ? (
            <ul className="space-y-2">
              {status.services.map((s) => (
                <li key={s.name} className="flex items-center justify-between text-sm">
                  <span className="text-slate-300">{s.name}</span>
                  <span
                    className={`rounded-full px-2 py-0.5 text-xs ${
                      s.active ? "bg-emerald-500/20 text-emerald-300" : "bg-slate-700 text-slate-300"
                    }`}
                  >
                    {s.state}
                  </span>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-sm text-slate-500">Sin datos de servicios.</p>
          )}
        </div>
      </div>

      <div className="card">
        <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-400">
          Cambios pendientes
        </h2>
        {modules.length > 0 ? (
          <p className="text-sm text-amber-300">
            Módulos con cambios sin aplicar: {modules.map((m) => m.module).join(", ")}
          </p>
        ) : (
          <p className="text-sm text-emerald-300">Todo aplicado. No hay cambios pendientes.</p>
        )}
      </div>
    </div>
  );
}