"use client";

import { useEffect } from "react";
import { Icon } from "@/components/ui/Icon";
import { KIND_COLOR, KIND_ICON, formatBytes, kindOf } from "@/lib/cloud/format";
import type { FileDTO } from "@/lib/cloud/queries";

/**
 * Große Vorschau über der abgedunkelten, weichgezeichneten Seite.
 * Aktionen liegen oben in der Ecke — Vorschau, Herunterladen, Bearbeiten und
 * Freigeben sind bewusst getrennte Schritte.
 */
export function FileLightbox({
  file,
  canEdit,
  canShare,
  onEdit,
  onShare,
  onClose,
}: {
  file: FileDTO;
  canEdit: boolean;
  canShare: boolean;
  onEdit: () => void;
  onShare: () => void;
  onClose: () => void;
}) {
  const kind = kindOf(file.mime, file.name);
  const url = `/api/cloud/file/${file.id}`;

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div className="lb-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      {/* Kopfzeile */}
      <div className="lb-head">
        <div className="lb-title">
          <span
            className="lb-title-icon"
            style={{ color: KIND_COLOR[kind], background: `${KIND_COLOR[kind]}1a` }}
          >
            <Icon name={KIND_ICON[kind]} size={16} />
          </span>
          <span className="min-w-0">
            <span className="block truncate font-black">{file.name}</span>
            <span className="text-muted block text-xs">
              {formatBytes(file.size)}
              {file.width && file.height ? ` · ${file.width} × ${file.height}` : ""}
              {` · ${file.ownerName}`}
            </span>
          </span>
        </div>

        <div className="lb-actions">
          <a className="btn btn-ghost btn-sm" href={`${url}?download=1`} title="Herunterladen">
            <Icon name="download" size={15} />
            <span className="hidden sm:inline">Herunterladen</span>
          </a>
          {canEdit ? (
            <button className="btn btn-ghost btn-sm" onClick={onEdit} title="Bearbeiten">
              <Icon name="edit" size={15} />
              <span className="hidden sm:inline">Bearbeiten</span>
            </button>
          ) : null}
          {canShare ? (
            <button className="btn btn-ghost btn-sm" onClick={onShare} title="Freigeben">
              <Icon name="share" size={15} />
              <span className="hidden sm:inline">Freigeben</span>
            </button>
          ) : null}
          <button className="btn btn-ghost btn-sm" onClick={onClose} aria-label="Schließen">
            <Icon name="close" size={16} />
          </button>
        </div>
      </div>

      {/* Inhalt */}
      <div className="lb-content" onMouseDown={(e) => e.stopPropagation()}>
        {kind === "image" ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={url} alt={file.name} />
        ) : kind === "video" ? (
          <video src={url} controls autoPlay preload="metadata" />
        ) : kind === "audio" ? (
          <div className="lb-audio">
            <span
              className="vault-mark"
              style={{
                width: 64,
                height: 64,
                color: KIND_COLOR.audio,
                background: `${KIND_COLOR.audio}1a`,
              }}
            >
              <Icon name="music" size={28} />
            </span>
            <p className="mt-3 font-bold">{file.name}</p>
            <audio src={url} controls autoPlay className="mt-3 w-full" />
          </div>
        ) : kind === "pdf" ? (
          <iframe src={url} title={file.name} className="lb-pdf" />
        ) : (
          <div className="lb-none">
            <span
              className="vault-mark"
              style={{
                width: 64,
                height: 64,
                color: KIND_COLOR[kind],
                background: `${KIND_COLOR[kind]}1a`,
              }}
            >
              <Icon name={KIND_ICON[kind]} size={28} />
            </span>
            <p className="mt-3 font-bold">Keine Vorschau möglich</p>
            <p className="text-muted mt-1 text-sm">
              Dieser Dateityp lässt sich nicht im Browser anzeigen.
            </p>
            <a className="btn btn-primary btn-sm mt-4" href={`${url}?download=1`}>
              <Icon name="download" size={15} /> Herunterladen
            </a>
          </div>
        )}
      </div>
    </div>
  );
}