import { useState, type ReactNode } from "react";
import {
  ArrowUpRight,
  ChevronDown,
  LoaderCircle,
  Plus,
  RefreshCw,
} from "lucide-react";
import "./jobs.css";
import SubtaskViews from "./SubtaskViews";

export type Job = {
  id: string;
  name?: string;
  stage: string;
  created_at: string;
  owner: string;
  output?: string;
};
export type Progress = {
  model?: string;
  captioner?: string;
  status: string;
  expected: number;
  completed: number;
  exported?: number;
  export_pending?: number;
  failed: number;
  failed_recordings?: {
    source_episode_index: number;
    recording: string;
    hand: string;
    stage: string;
    error: string;
  }[];
  stopped?: number;
  pending?: number;
  usage: {
    measured_inference_usd?: number;
    successful_calls?: number;
    input_tokens?: number;
    output_tokens?: number;
    rate_limited_requests?: number;
    media_usd?: number;
    completed_media_requests?: number;
  };
  cost?: {
    inference_usd: number | null;
    cpu_usd: number | null;
    total_usd: number | null;
    uncertain_inference_usd: number;
    running_seconds: number | null;
    basis: string;
    billing_url: string;
  };
  annotation_url?: string | null;
  hand_visualizer_url?: string | null;
  output_mode?: string;
  subtask_views?: "primary" | "per-camera" | "per-hand";
  subtask_cameras?: string[];
  human_videos?: Record<string, number> | null;
};
type HumanVideo = {
  episode_index?: number | null;
  source_episode_index: number;
  segment_index?: number;
  subtask?: string;
  caption?: string | null;
  status: string;
  robot_frame?: string;
  first_frame?: string;
  video?: string;
};

function HumanVideos({ jobId }: { jobId: string }) {
  const [videos, setVideos] = useState<HumanVideo[] | null>(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  async function load() {
    setLoading(true);
    setError("");
    try {
      const response = await fetch(`/api/jobs/${jobId}/human-videos`, {
        credentials: "same-origin",
      });
      if (!response.ok) throw new Error("No human demo videos saved yet.");
      setVideos(await response.json());
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setLoading(false);
    }
  }
  if (!videos)
    return (
      <div className="human-videos">
        <button className="text-action" onClick={load} disabled={loading}>
          {loading ? "Loading videos…" : "Preview human demo videos"}
        </button>
        {error && <p className="job-cost-note">{error}</p>}
      </div>
    );
  const ready = videos.filter((v) => v.status === "completed" && v.video);
  return (
    <div className="human-videos">
      {ready.length === 0 && <p>No completed videos yet.</p>}
      <div className="human-video-grid">
        {ready.map((v) => (
          <figure key={`${v.source_episode_index}-${v.segment_index}`}>
            <div className="human-video-pair">
              {v.robot_frame && (
                <img src={v.robot_frame} alt="Robot view" loading="lazy" />
              )}
              <video
                src={v.video}
                poster={v.first_frame}
                controls
                muted
                loop
                playsInline
                preload="none"
              />
            </div>
            <figcaption>
              <strong>
                Episode {v.episode_index ?? v.source_episode_index}
              </strong>{" "}
              · {v.subtask}
            </figcaption>
          </figure>
        ))}
      </div>
    </div>
  );
}
const terminal = new Set(["COMPLETED", "ERROR", "CANCELED", "DELETED"]);
const usd = (value: number | null | undefined) =>
  value == null
    ? "—"
    : new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        minimumFractionDigits: value > 0 && value < 1 ? 4 : 2,
        maximumFractionDigits: 4,
      }).format(value);

function status(job: Job, progress?: Progress) {
  if (job.stage === "ERROR") return "Failed";
  if (job.stage === "COMPLETED")
    return progress?.status === "partial" ? "Partial" : "Completed";
  if (job.stage === "CANCELED") return "Canceled";
  if (["PENDING", "QUEUED"].includes(job.stage)) return "Queued";
  if (
    progress?.expected &&
    progress.completed === progress.expected &&
    progress.export_pending
  )
    return "Exporting";
  return job.stage[0] + job.stage.slice(1).toLowerCase();
}

export default function JobsView({
  jobs,
  progress,
  models,
  signedIn,
  loading,
  signIn,
  onRefresh,
  onNew,
  onCancel,
}: {
  jobs: Job[];
  progress: Record<string, Progress>;
  models: { route: string; name: string; provider_name: string }[];
  signedIn: boolean;
  loading: boolean;
  signIn: ReactNode;
  onRefresh: () => void;
  onNew: () => void;
  onCancel: (id: string) => void;
}) {
  return (
    <div className="jobs-page">
      <div className="page-heading">
        <h1>Jobs</h1>
        <div className="heading-actions">
          <button
            className="icon-button"
            onClick={onRefresh}
            disabled={!signedIn || loading}
            aria-label="Refresh jobs"
          >
            <RefreshCw size={17} className={loading ? "spin" : ""} />
          </button>
          <button className="button primary" onClick={onNew}>
            <Plus size={15} /> New job
          </button>
        </div>
      </div>
      {!signedIn ? (
        <div className="jobs-empty">
          <p>Sign in to see your jobs.</p>
          {signIn}
        </div>
      ) : jobs.length === 0 ? (
        <div className="jobs-empty">
          {loading ? (
            <>
              <LoaderCircle size={20} className="spin" />
              <p>Loading jobs…</p>
            </>
          ) : (
            <>
              <p>No jobs yet.</p>
              <button className="button secondary" onClick={onNew}>
                New annotation
              </button>
            </>
          )}
        </div>
      ) : (
        <div className="compact-jobs">
          <div className="jobs-columns" aria-hidden="true">
            <span>Job</span>
            <span>Status</span>
            <span>Episodes</span>
            <span>Usage cost</span>
            <span />
          </div>
          {jobs.map((job) => {
            const p = progress[job.id];
            const ended = terminal.has(job.stage);
            const state = status(job, p);
            const profile = models.find((m) => m.route === p?.model);
            const model =
              p?.captioner === "flora"
                ? "Flora · TempSeg + Captioner"
                : profile?.name || p?.model?.split(":")[0].split("/").pop();
            const provider =
              p?.captioner === "flora"
                ? "H200 GPU"
                : profile?.provider_name || p?.model?.split(":")[1];
            const name =
              job.output?.split("/")[1] || job.name || "Annotation job";
            const logs = `https://huggingface.co/jobs/${job.owner}/${job.id}`;
            const results =
              job.output && p?.completed
                ? `https://huggingface.co/datasets/${job.output}`
                : null;
            const annotations = p?.annotation_url;
            const hands = p?.hand_visualizer_url;
            const action = hands
              ? "View 3D hands"
              : annotations
                ? "Show annotations"
                : results
                  ? "Results"
                  : "Logs";
            const knownCost = p?.cost?.total_usd ?? p?.cost?.cpu_usd;
            const incompleteCost =
              p?.cost &&
              (p.cost.total_usd == null ||
                p.cost.uncertain_inference_usd > 0.000001);
            return (
              <details className="compact-job" key={job.id}>
                <summary className="compact-job-row">
                  <span className="job-identity">
                    <strong title={job.output || name}>{name}</strong>
                    <span>
                      <time dateTime={job.created_at}>
                        {new Date(job.created_at).toLocaleString(undefined, {
                          month: "short",
                          day: "numeric",
                          hour: "2-digit",
                          minute: "2-digit",
                        })}
                      </time>
                      {model && (
                        <>
                          <span className="job-meta-separator">·</span>
                          <span className="job-model">{model}</span>
                        </>
                      )}
                    </span>
                  </span>
                  <span className={`compact-status ${state.toLowerCase()}`}>
                    <i />
                    {state}
                  </span>
                  <span className="compact-progress">
                    <span>
                      {p?.expected
                        ? `${p.completed.toLocaleString()} / ${p.expected.toLocaleString()} labeled`
                        : "—"}
                    </span>
                    {p?.exported != null && (
                      <small className="export-progress">
                        {p.exported.toLocaleString()} ready to view
                      </small>
                    )}
                    {!ended && !!p?.expected && (
                      <progress
                        max={p.expected}
                        value={p.completed}
                        aria-label={`${name} episodes completed`}
                      />
                    )}
                  </span>
                  <span
                    className="compact-cost"
                    title={
                      incompleteCost
                        ? "Some usage is unconfirmed. Expand for details."
                        : "Usage-derived cost"
                    }
                  >
                    <span className="mobile-label">Cost </span>
                    {usd(knownCost)}
                    {incompleteCost && knownCost != null && <sup>*</sup>}
                  </span>
                  <span className="compact-job-action">
                    <a
                      href={hands || annotations || results || logs}
                      target="_blank"
                      rel="noreferrer"
                      onClick={(e) => e.stopPropagation()}
                    >
                      {action}
                      <ArrowUpRight size={13} />
                    </a>
                    <ChevronDown
                      size={15}
                      className="job-expand"
                      aria-hidden="true"
                    />
                  </span>
                </summary>
                <div className="compact-job-details">
                  <dl>
                    <div>
                      <dt>Model</dt>
                      <dd>
                        {model
                          ? `${model}${provider ? ` · ${provider}` : ""}`
                          : "—"}
                      </dd>
                    </div>
                    <div>
                      <dt>Episodes</dt>
                      <dd>
                        {p
                          ? `${p.completed} labeled · ${p.exported ?? 0} ready to view${p.failed ? ` · ${p.failed} failed` : ""}${p.pending ? ` · ${p.pending} pending` : ""}`
                          : "—"}
                      </dd>
                    </div>
                    <div>
                      <dt>Inference</dt>
                      <dd>{usd(p?.cost?.inference_usd)}</dd>
                    </div>
                    <div>
                      <dt>Compute</dt>
                      <dd>{usd(p?.cost?.cpu_usd)}</dd>
                    </div>
                    <div>
                      <dt>Model calls</dt>
                      <dd>
                        {p?.usage.successful_calls?.toLocaleString() ?? "—"}
                      </dd>
                    </div>
                    {p?.human_videos && (
                      <div>
                        <dt>Human videos</dt>
                        <dd>
                          {(p.human_videos.completed || 0).toLocaleString()}
                          {p.human_videos.failed
                            ? ` · ${p.human_videos.failed} failed`
                            : ""}
                          {p.usage.media_usd
                            ? ` · ${usd(p.usage.media_usd)}`
                            : ""}
                        </dd>
                      </div>
                    )}
                  </dl>
                  {p?.subtask_views === "per-camera" && !!p.completed && (
                    <SubtaskViews jobId={job.id} />
                  )}
                  {p?.subtask_views === "per-hand" && !!p.completed && (
                    <SubtaskViews jobId={job.id} actors />
                  )}
                  {!!p?.human_videos?.completed && (
                    <HumanVideos jobId={job.id} />
                  )}
                  {p &&
                    (p.failed > 0 ||
                      (p.stopped || 0) > 0 ||
                      (p.pending || 0) > 0) && (
                      <p className="job-outcomes">
                        {[
                          p.failed ? `${p.failed} failed` : "",
                          p.stopped ? `${p.stopped} stopped` : "",
                          p.pending ? `${p.pending} not processed` : "",
                        ]
                          .filter(Boolean)
                          .join(" · ")}
                      </p>
                    )}
                  {!!p?.failed_recordings?.length && (
                    <details className="job-recording-failures">
                      <summary>
                        Failed recordings ({p.failed_recordings.length})
                      </summary>
                      <ul>
                        {p.failed_recordings.map((r) => (
                          <li key={r.source_episode_index}>
                            <strong>
                              {r.recording}/{r.hand}
                            </strong>{" "}
                            · source episode {r.source_episode_index} ·{" "}
                            {r.stage.replace(/_/g, " ")}
                            <p>{r.error.split(": {")[0]}</p>
                          </li>
                        ))}
                      </ul>
                      {job.output && (
                        <a
                          href={`https://huggingface.co/datasets/${job.output}/blob/main/annotation_studio/failures.json`}
                          target="_blank"
                          rel="noreferrer"
                        >
                          Full failure report <ArrowUpRight size={12} />
                        </a>
                      )}
                    </details>
                  )}
                  {incompleteCost && (
                    <p className="job-cost-note">
                      {p.cost!.uncertain_inference_usd > 0.000001
                        ? `Unconfirmed inference: up to ${usd(p.cost!.uncertain_inference_usd)} extra.`
                        : "Some usage has not been reported yet."}
                    </p>
                  )}
                  <div className="job-detail-actions">
                    {hands && annotations && (
                      <a href={annotations} target="_blank" rel="noreferrer">
                        Language annotations <ArrowUpRight size={12} />
                      </a>
                    )}
                    <a href={logs} target="_blank" rel="noreferrer">
                      Logs <ArrowUpRight size={12} />
                    </a>
                    {results && (
                      <a href={results} target="_blank" rel="noreferrer">
                        Output files <ArrowUpRight size={12} />
                      </a>
                    )}
                    {p?.cost && (
                      <a
                        href={p.cost.billing_url}
                        target="_blank"
                        rel="noreferrer"
                      >
                        Billing <ArrowUpRight size={12} />
                      </a>
                    )}
                    {!ended && (
                      <button
                        className="text-danger"
                        onClick={() => onCancel(job.id)}
                      >
                        Cancel job
                      </button>
                    )}
                  </div>
                  <p className="job-billing-note">
                    Usage estimates; final billing may differ.
                  </p>
                </div>
              </details>
            );
          })}
        </div>
      )}
    </div>
  );
}