import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
import { useEffect, useState } from 'react';

import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
import { supabase } from '../lib/supabase';
import { AlertIcon, SpinnerIcon } from './icons';

interface Props {
  handle: AttachmentHandle;
}

// Decrypt the blob, render a native <video controls>. Loads on demand —
// metadata-only preload so we don't burn bandwidth until the user hits play.
export function AttachmentVideo({ handle }: Props) {
  const [blobUrl, setBlobUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    let url: string | null = null;
    setError(null);
    setBlobUrl(null);

    void (async () => {
      const cached = await getCachedAttachment(handle.id);
      if (cached) {
        if (cancelled) return;
        url = URL.createObjectURL(cached);
        setBlobUrl(url);
        return;
      }
      try {
        const blob = await downloadAndDecryptAttachment({ client: supabase, handle });
        if (cancelled) return;
        url = URL.createObjectURL(blob);
        setBlobUrl(url);
        void putCachedAttachment(handle.id, blob);
      } catch (err: unknown) {
        if (!cancelled) {
          setError(err instanceof Error ? err.message : 'download failed');
        }
      }
    })();

    return () => {
      cancelled = true;
      if (url) URL.revokeObjectURL(url);
    };
  }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);

  if (error) {
    return (
      <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
        <AlertIcon className="h-4 w-4" />
        <span>{error}</span>
      </div>
    );
  }

  if (!blobUrl) {
    return (
      <div className="mt-2 flex h-32 w-[320px] items-center justify-center rounded-lg border border-line bg-surface-2 text-fg-muted">
        <SpinnerIcon className="h-5 w-5" />
      </div>
    );
  }

  return (
    <video
      controls
      preload="metadata"
      src={blobUrl}
      className="mt-2 block max-h-80 w-full max-w-[420px] rounded-lg border border-line bg-black"
    >
      <track kind="captions" />
    </video>
  );
}