import type { LiveDownload } from "../hooks/useDownloads";
import type { FeedItem } from "../types";
import { humanEta } from "./format";
import { CONTROL_H } from "./ui";

interface Props {
  item: FeedItem;
  live?: LiveDownload;
  online: boolean;
  onDownload: () => void;
  onCancel: () => void;
  onDelete: () => void;
}

const CHIP =
  `inline-flex ${CONTROL_H} shrink-0 cursor-pointer items-center justify-center rounded-lg ` +
  "px-2.5 text-[12px] font-medium";

export default function DownloadButton({
  item, live, online, onDownload, onCancel, onDelete,
}: Props) {
  const state = live?.state ?? item.state ?? null;
  const pct = live?.pct ?? item.pct ?? null;
  const error = live?.error ?? item.error ?? null;

  if (state === "done") {
    // Neutral until hovered, then reveals red — destruction is never
    // pre-coloured on a control that is not currently destructive.
    return (
      <button onClick={onDelete} title="Delete the downloaded file"
        className={`${CHIP} group border border-slate-300 text-slate-500
                    hover:border-red-500 hover:text-red-600
                    dark:border-slate-700 dark:text-slate-400 dark:hover:border-red-500 dark:hover:text-red-400`}>
        <span className="group-hover:hidden">Saved</span>
        <span className="hidden group-hover:inline">Delete</span>
      </button>
    );
  }

  if (state === "running" || state === "queued") {
    const known = state === "running" && pct != null;
    return (
      <button onClick={onCancel} title={humanEta(live?.eta ?? null) || "Cancel download"}
        className={`${CHIP} group relative w-[104px] overflow-hidden border border-slate-300
                    text-slate-500 hover:border-red-500 hover:text-red-600
                    dark:border-slate-700 dark:text-slate-400 dark:hover:border-red-500
                    dark:hover:text-red-400`}>
        {/* Progress fills the chip itself, so the control stays one line tall. */}
        <span
          className="absolute inset-y-0 left-0 bg-sky-500/15 transition-[width] duration-100"
          style={{ width: known ? `${pct}%` : "35%" }}
        />
        <span className="relative hidden group-hover:inline">Cancel</span>
        <span className="relative inline font-mono tabular-nums group-hover:hidden">
          {known ? `${pct!.toFixed(0)}%` : state === "queued" ? "Queued" : "Starting"}
        </span>
      </button>
    );
  }

  const failed = state === "failed";
  return (
    <button onClick={onDownload} disabled={!online}
      title={
        !online
          ? "You are offline — downloading needs a connection"
          : failed && error
            ? error
            : "Download for offline viewing"
      }
      className={`${CHIP} border disabled:cursor-not-allowed disabled:opacity-40 ${
        failed
          ? "border-red-500/60 text-red-600 hover:bg-red-500/5 dark:text-red-400"
          : "border-slate-300 hover:border-sky-500 hover:text-sky-600 dark:border-slate-700 dark:hover:border-sky-500 dark:hover:text-sky-400"
      }`}>
      {failed ? "Retry" : "Download"}
    </button>
  );
}