"use client";

import { FileText, Paperclip } from "lucide-react";
import { useState } from "react";
import { tr } from "@/i18n/tr";
import type { AttachmentInfo } from "../service";
import { AttachmentViewer } from "./attachment-viewer";

const t = tr.attachments;
const VISIBLE = 4;

/** Ayrıntıda küçük önizleme şeridi (en fazla 4 + "+N"); tıklayınca görüntüleyici açılır. */
export function AttachmentStrip({ items }: { items: AttachmentInfo[] }) {
  const [viewer, setViewer] = useState<number | null>(null);
  if (!items.length) return null;
  const shown = items.slice(0, VISIBLE);
  const rest = items.length - shown.length;

  return (
    <div className="flex items-center gap-2">
      <Paperclip className="size-4 shrink-0 text-muted-foreground" aria-hidden />
      <span className="sr-only">{t.count(items.length)}</span>
      <ul className="flex gap-1.5">
        {shown.map((item, i) => (
          <li key={item.id} className="relative">
            <AttachmentThumb item={item} onClick={() => setViewer(i)} />
            {rest > 0 && i === shown.length - 1 ? (
              <button
                type="button"
                onClick={() => setViewer(i + 1)}
                className="absolute inset-0 flex items-center justify-center rounded-md bg-black/55 text-sm font-medium text-white"
                aria-label={`${t.viewerTitle}: ${t.moreCount(rest)}`}
              >
                {t.moreCount(rest)}
              </button>
            ) : null}
          </li>
        ))}
      </ul>
      <AttachmentViewer
        items={items}
        startIndex={viewer ?? 0}
        open={viewer !== null}
        onOpenChange={(open) => !open && setViewer(null)}
      />
    </div>
  );
}

export function AttachmentThumb({
  item,
  onClick,
  className = "size-12",
}: {
  item: AttachmentInfo;
  onClick?: () => void;
  className?: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={item.name}
      aria-label={item.name}
      className={`${className} flex items-center justify-center overflow-hidden rounded-md border bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none`}
    >
      {item.thumbUrl ? (
        // eslint-disable-next-line @next/next/no-img-element -- yetkili özel dosya
        <img src={item.thumbUrl} alt="" className="size-full object-cover" loading="lazy" />
      ) : (
        <FileText className="size-5 text-muted-foreground" aria-hidden />
      )}
    </button>
  );
}