import { useNavigate } from "react-router-dom";
import { IncidentRow } from "./Issues.tsx";
import { useIncidents, useMe } from "./api.ts";
import { SetupTodos } from "./onboarding/SetupTodos.tsx";

const ACTIVE_INCIDENT_WINDOW_MS = 24 * 60 * 60 * 1000;
const ACTIVE_INCIDENT_LIMIT = 5;

export function Overview() {
  const me = useMe();

  if (me.isLoading) {
    return (
      <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted">loading…</div>
    );
  }
  if (me.error) {
    return <div className="font-mono text-[11px] text-danger">error: {String(me.error)}</div>;
  }
  if (!me.data || !me.data.project) return null;
  const projectId = me.data.project.id;

  return (
    <div className="flex flex-col gap-10">
      <SetupTodos projectId={projectId} />
      <ActiveIncidentsSection projectId={projectId} />
    </div>
  );
}

function ActiveIncidentsSection({ projectId }: { projectId: string }) {
  const navigate = useNavigate();
  const incidents = useIncidents(projectId, "open");

  const cutoff = Date.now() - ACTIVE_INCIDENT_WINDOW_MS;
  const important = (incidents.data ?? [])
    .filter(
      (row) =>
        (row.incident.severity === "SEV-1" || row.incident.severity === "SEV-2") &&
        new Date(row.incident.lastSeen).getTime() >= cutoff,
    )
    .slice(0, ACTIVE_INCIDENT_LIMIT);

  return (
    <section>
      <div className="mb-4 flex items-baseline justify-between">
        <span className="text-[11px] font-medium uppercase tracking-[0.08em] text-subtle">
          Active critical incidents
        </span>
        {incidents.isFetching && (
          <span className="text-[11px] uppercase tracking-[0.08em] text-subtle">refreshing…</span>
        )}
      </div>
      {incidents.isLoading ? (
        <div className="rounded-2xl border border-border bg-surface p-6 text-[13px] text-muted">
          Loading…
        </div>
      ) : incidents.error ? (
        <div className="rounded-2xl border border-border bg-surface p-6 text-[13px] text-danger">
          Failed to load: {String(incidents.error)}
        </div>
      ) : important.length === 0 ? (
        <div className="rounded-2xl border border-border bg-surface p-6 text-center">
          <p className="text-[13px] text-muted">
            All clear — no SEV-1 or SEV-2 incidents in the last 24h
          </p>
        </div>
      ) : (
        <div className="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-surface">
          {important.map((row) => (
            <IncidentRow
              key={row.incident.id}
              row={row}
              selected={false}
              onClick={() => navigate(`/incidents/${row.incident.id}`)}
            />
          ))}
        </div>
      )}
    </section>
  );
}