import { useEffect, useState } from 'react';
import type { VideoSummary } from '../../shared/types.ts';
import { navigate } from '../App.tsx';
import { api } from '../api.ts';
import { Icon } from '../components/Icon.tsx';
import { ConfirmDialog, Modal, type ConfirmRequest } from '../components/Modal.tsx';
import { fmtDate, fmtDuration } from '../lib/format.ts';

export function Library() {
  const [videos, setVideos] = useState<VideoSummary[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [filter, setFilter] = useState('');
  const [dragId, setDragId] = useState<string | null>(null);
  const [confirm, setConfirm] = useState<ConfirmRequest | null>(null);
  const [creating, setCreating] = useState(false);

  const load = () =>
    api
      .videos()
      .then(setVideos)
      .catch((e) => setError(e.message));

  useEffect(() => {
    document.title = 'Takes';
    load();
  }, []);

  const q = filter.trim().toLowerCase();
  const shown = (videos ?? []).filter((v) => !q || v.title.toLowerCase().includes(q) || v.description.toLowerCase().includes(q));

  const onDragOver = (overId: string) => {
    if (!dragId || dragId === overId || !videos) return;
    const from = videos.findIndex((v) => v.id === dragId);
    const to = videos.findIndex((v) => v.id === overId);
    const next = videos.slice();
    const [item] = next.splice(from, 1);
    next.splice(to, 0, item);
    setVideos(next);
  };

  const onDragEnd = () => {
    setDragId(null);
    if (videos) api.setOrder(videos.map((v) => v.id)).catch((e) => setError(e.message));
  };

  const askDelete = (v: VideoSummary) =>
    setConfirm({
      title: 'Delete video?',
      message: (
        <>
          “{v.title}” and all of its takes will be moved to the <code>.trash</code> folder in your library directory.
        </>
      ),
      confirmLabel: 'Delete',
      danger: true,
      onConfirm: async () => {
        try {
          await api.deleteVideo(v.id);
        } catch (e) {
          setError((e as Error).message);
        }
        load();
      },
    });

  return (
    <div className="page">
      <header className="topbar">
        <div className="brand">
          <span className="brand-dot" /> Takes
        </div>
        <input className="search" placeholder="Search videos" value={filter} onChange={(e) => setFilter(e.target.value)} />
        <div className="spacer" />
        <a className="btn ghost" href="#/settings">
          <Icon name="settings" /> Settings
        </a>
        <button className="btn primary" onClick={() => setCreating(true)}>
          <Icon name="plus" /> New video
        </button>
      </header>

      {error && (
        <div className="banner error" onClick={() => setError(null)}>
          {error}
        </div>
      )}

      <main className="library">
        {videos && videos.length === 0 && (
          <div className="empty">
            <h2>No videos yet</h2>
            <p className="muted">Create a video, then record yourself, your screen, or both.</p>
            <button className="btn primary big" onClick={() => setCreating(true)}>
              <Icon name="plus" /> New video
            </button>
          </div>
        )}
        <div className="grid">
          {shown.map((v) => (
            <div
              key={v.id}
              className={`card${dragId === v.id ? ' dragging' : ''}`}
              draggable={!q}
              onDragStart={(e) => {
                e.dataTransfer.effectAllowed = 'move';
                setDragId(v.id);
              }}
              onDragOver={(e) => {
                e.preventDefault();
                onDragOver(v.id);
              }}
              onDragEnd={onDragEnd}
              onClick={() => navigate(`video/${v.id}`)}
            >
              <div className="thumb">
                {v.thumbnailUrl ? <img src={v.thumbnailUrl} alt="" draggable={false} /> : <div className="thumb-empty"><Icon name="film" size={32} /></div>}
                {v.duration > 0 && <span className="duration">{fmtDuration(v.duration)}</span>}
                <span className="kinds">
                  {v.hasCamera && <Icon name="camera" size={14} />}
                  {v.hasScreen && <Icon name="screen" size={14} />}
                </span>
              </div>
              <div className="card-body">
                <div className="card-title">{v.title}</div>
                {v.description && <div className="card-desc">{v.description}</div>}
                <div className="card-meta">
                  <span>{fmtDate(v.createdAt)}</span>
                  <span>
                    {v.takeCount} take{v.takeCount === 1 ? '' : 's'}
                  </span>
                  {v.exportState === 'current' && <span className="tag ok">exported</span>}
                  {v.exportState === 'stale' && <span className="tag warn">export outdated</span>}
                </div>
              </div>
              <div className="card-actions" onClick={(e) => e.stopPropagation()}>
                <button className="icon-btn" title="Record a take" onClick={() => navigate(`video/${v.id}/record`)}>
                  <Icon name="record" />
                </button>
                <button className="icon-btn danger" title="Delete" onClick={() => askDelete(v)}>
                  <Icon name="trash" />
                </button>
              </div>
              {!q && (
                <div className="grip" title="Drag to reorder">
                  <Icon name="grip" />
                </div>
              )}
            </div>
          ))}
        </div>
      </main>

      {creating && <NewVideoDialog onClose={() => setCreating(false)} />}
      {confirm && <ConfirmDialog req={confirm} onClose={() => setConfirm(null)} />}
    </div>
  );
}

function NewVideoDialog({ onClose }: { onClose: () => void }) {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [notes, setNotes] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const create = async (record: boolean) => {
    setBusy(true);
    try {
      const v = await api.createVideo({ title, description, notes });
      navigate(record ? `video/${v.id}/record` : `video/${v.id}`);
    } catch (e) {
      setError((e as Error).message);
      setBusy(false);
    }
  };

  return (
    <Modal
      title="New video"
      onClose={onClose}
      wide
      footer={
        <>
          <button className="btn" onClick={onClose}>
            Cancel
          </button>
          <button className="btn" disabled={busy} onClick={() => create(false)}>
            Create
          </button>
          <button className="btn primary" disabled={busy} onClick={() => create(true)}>
            <Icon name="record" /> Create and record
          </button>
        </>
      }
    >
      <label className="field">
        <span>Title</span>
        <input autoFocus value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. How the solver handles boundary conditions" />
      </label>
      <label className="field">
        <span>Description</span>
        <textarea rows={3} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="What this video explains or demonstrates" />
      </label>
      <label className="field">
        <span>Notes (shown on the teleprompter while recording)</span>
        <textarea rows={8} value={notes} onChange={(e) => setNotes(e.target.value)} placeholder={'- Point one\n- Point two\n- Demo: ...'} />
      </label>
      {error && <div className="banner error">{error}</div>}
    </Modal>
  );
}