import { thumbSrc } from "../api";
import type { LiveDownload } from "../hooks/useDownloads";
import type { FeedItem } from "../types";
import DownloadButton from "./DownloadButton";
import WatchBar from "./WatchBar";
import { clockDuration, compactViews, relativeTime } from "./format";
import { CHANNEL_LINK } from "./ui";

interface Props {
  item: FeedItem;
  live?: LiveDownload;
  online: boolean;
  onOpen: () => void;
  /** Jump to this video's channel. */
  onOpenChannel: () => void;
  onDownload: () => void;
  onCancel: () => void;
  onDelete: () => void;
}

export default function VideoRow({
  item, live, online, onOpen, onOpenChannel, onDownload, onCancel, onDelete,
}: Props) {
  const downloaded = (live?.state ?? item.state) === "done";
  const src = thumbSrc(item, online);

  return (
    <li
      className="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 p-2
                 hover:border-slate-300 dark:border-slate-800 dark:bg-slate-800/50
                 dark:hover:border-slate-700"
    >
      <button
        onClick={onOpen}
        className="relative aspect-video w-32 shrink-0 cursor-pointer overflow-hidden rounded
                   bg-slate-200 dark:bg-slate-800"
      >
        {src ? (
          <img src={src} alt="" loading="lazy" className="size-full object-cover" />
        ) : (
          <span className="grid size-full place-items-center px-1 text-center text-[10px] text-slate-400">
            No thumbnail
          </span>
        )}
        {item.is_short && (
          <span
            className="absolute left-1 top-1 rounded bg-slate-950/75 px-1 py-0.5 text-[9px]
                       font-bold uppercase tracking-widest leading-none text-white"
          >
            Short
          </span>
        )}
        {downloaded && (
          <span
            className="absolute bottom-1.5 left-1 rounded bg-sky-500 px-1 py-0.5 text-[9px]
                       font-bold uppercase tracking-widest leading-none text-white"
          >
            Offline
          </span>
        )}
        {clockDuration(item.duration) && (
          <span
            className="absolute bottom-1.5 right-1.5 rounded bg-slate-950/80 px-1 py-0.5
                       font-mono text-[10px] leading-none tabular-nums text-white"
          >
            {clockDuration(item.duration)}
          </span>
        )}
        <WatchBar item={item} />
      </button>

      <div className="min-w-0 flex-1">
        <button onClick={onOpen} className="w-full cursor-pointer text-left">
          <h3 className="line-clamp-2 text-[13px] font-medium leading-snug">{item.title}</h3>
        </button>
        <button
          onClick={onOpenChannel}
          title={`Show only ${item.channel_title}`}
          className={CHANNEL_LINK + " mt-1"}
        >
          {item.channel_title}
        </button>
        <div className="mt-0.5 text-[11px] text-slate-400 dark:text-slate-500">
          {[compactViews(item.views), relativeTime(item.published)].filter(Boolean).join(" · ")}
        </div>
        {(live?.error ?? item.error) && (live?.state ?? item.state) === "failed" && (
          <div className="mt-1 line-clamp-1 text-[11px] text-red-600 dark:text-red-400">
            {live?.error ?? item.error}
          </div>
        )}
      </div>

      <DownloadButton item={item} live={live} online={online}
        onDownload={onDownload} onCancel={onCancel} onDelete={onDelete} />
    </li>
  );
}