"use client";

import { useRef, useState } from "react";
import { Button } from "@/components/ui/Button";
import { Field } from "@/components/ui/Field";
import { ApiError, apiDelete, apiDownloadFile, apiPostFormData } from "@/lib/api";

export interface CurriculumBookPdfItem {
  id: number;
  original_name: string;
  mime_type?: string | null;
  file_size_bytes: number;
  sort_order?: number;
}

const MAX_BYTES = 50 * 1024 * 1024;

function formatBytes(n: number): string {
  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} کیلوبایت`;
  return `${(n / (1024 * 1024)).toFixed(1)} مگابایت`;
}

export function CurriculumBookPdfsField({
  bookId,
  pdfs,
  pendingFiles,
  onPdfsChange,
  onPendingFilesChange,
  disabled,
}: {
  bookId?: number | null;
  pdfs: CurriculumBookPdfItem[];
  pendingFiles: File[];
  onPdfsChange: (next: CurriculumBookPdfItem[]) => void;
  onPendingFilesChange: (next: File[]) => void;
  disabled?: boolean;
}) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const addFiles = async (files: File[]) => {
    const pdfsOnly = files.filter((file) => {
      const isPdf =
        file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
      return isPdf && file.size <= MAX_BYTES;
    });

    if (pdfsOnly.length === 0) {
      setError("فقط فایل PDF تا سقف ۵۰ مگابایت پذیرفته می‌شود.");
      return;
    }

    if (pdfsOnly.length !== files.length) {
      setError("برخی فایل‌ها نادیده گرفته شد؛ فقط PDF تا ۵۰ مگابایت مجاز است.");
    } else {
      setError(null);
    }

    if (!bookId) {
      onPendingFilesChange([...pendingFiles, ...pdfsOnly]);
      return;
    }

    setBusy(true);
    try {
      const uploaded: CurriculumBookPdfItem[] = [];
      for (const file of pdfsOnly) {
        const form = new FormData();
        form.append("file", file);
        uploaded.push(
          await apiPostFormData<CurriculumBookPdfItem>(`/curriculum-books/${bookId}/pdfs`, form),
        );
      }
      onPdfsChange([...pdfs, ...uploaded]);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در آپلود فایل");
    } finally {
      setBusy(false);
    }
  };

  const removeSaved = async (pdf: CurriculumBookPdfItem) => {
    if (!bookId) return;
    setError(null);
    setBusy(true);
    try {
      await apiDelete(`/curriculum-book-pdfs/${pdf.id}`);
      onPdfsChange(pdfs.filter((item) => item.id !== pdf.id));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در حذف فایل");
    } finally {
      setBusy(false);
    }
  };

  const download = async (pdf: CurriculumBookPdfItem) => {
    try {
      await apiDownloadFile(`/curriculum-book-pdfs/${pdf.id}/download`, pdf.original_name);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در دانلود فایل");
    }
  };

  return (
    <Field label="فایل‌های PDF کتاب (اختیاری)">
      <div className="space-y-2">
        <p className="text-xs text-[var(--muted)]">
          می‌توانید چند فایل PDF برای یک کتاب انتخاب کنید. ورود فایل الزامی نیست.
        </p>
        <input
          ref={inputRef}
          type="file"
          accept="application/pdf,.pdf"
          multiple
          disabled={disabled || busy}
          className="block max-w-full text-sm text-slate-600 file:ml-2 file:rounded-lg file:border-0 file:bg-teal-50 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-teal-800"
          onChange={(e) => {
            const files = Array.from(e.target.files ?? []);
            if (files.length > 0) void addFiles(files);
            e.target.value = "";
          }}
        />
        {pdfs.length > 0 ? (
          <ul className="space-y-1">
            {pdfs.map((pdf) => (
              <li
                key={pdf.id}
                className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-[var(--border)] px-3 py-2 text-sm"
              >
                <span>
                  {pdf.original_name}
                  <span className="mr-2 text-xs text-[var(--muted)]">
                    {formatBytes(pdf.file_size_bytes)}
                  </span>
                </span>
                <span className="flex gap-2">
                  <Button
                    variant="secondary"
                    className="!px-3 !py-1 text-xs"
                    onClick={() => void download(pdf)}
                  >
                    دانلود
                  </Button>
                  {!disabled ? (
                    <button
                      type="button"
                      className="text-xs text-red-600"
                      onClick={() => void removeSaved(pdf)}
                      disabled={busy}
                    >
                      حذف
                    </button>
                  ) : null}
                </span>
              </li>
            ))}
          </ul>
        ) : null}
        {pendingFiles.length > 0 ? (
          <ul className="space-y-1">
            {pendingFiles.map((file, index) => (
              <li
                key={`${file.name}-${file.size}-${index}`}
                className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed border-[var(--border)] px-3 py-2 text-sm"
              >
                <span>
                  {file.name}
                  <span className="mr-2 text-xs text-[var(--muted)]">
                    {formatBytes(file.size)}
                  </span>
                </span>
                {!disabled ? (
                  <button
                    type="button"
                    className="text-xs text-red-600"
                    onClick={() =>
                      onPendingFilesChange(pendingFiles.filter((_, i) => i !== index))
                    }
                  >
                    حذف
                  </button>
                ) : null}
              </li>
            ))}
          </ul>
        ) : null}
        {error ? <p className="text-xs text-red-600">{error}</p> : null}
      </div>
    </Field>
  );
}