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

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

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

  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>
          {status?.disks?.length ? (
            <div className="space-y-4">
              {status.disks.map((d) => (
                <div key={d.path}>
                  <div className="mb-1 flex justify-between text-sm">
                    <span className="text-slate-300">{d.path}</span>
                    <span className="text-slate-400">
                      {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 datos de disco.</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>
  );
}