"use client";

import { useCallback, useEffect, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
import { Field, Input } from "@/components/ui/Field";
import { TeacherModal } from "@/components/teacher/ui/TeacherModal";
import { ApiError, apiGet, apiPost } from "@/lib/api";

interface LibraryResource {
  id: number;
  title?: string | null;
  original_name: string;
  mime_type?: string | null;
  tags: string[];
  file_size_bytes: number;
  created_at: string;
  can_manage?: boolean;
  has_current_class_access?: boolean;
  class_labels?: string[];
}

interface LibrarySearchResponse {
  resources: LibraryResource[];
  tags: string[];
  classes: Array<{ id: number; label: string }>;
  file_types: Array<{ id: string; name: string }>;
}

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

function fileTypeLabel(mime?: string | null, name?: string): string {
  const lower = `${mime ?? ""} ${name ?? ""}`.toLowerCase();
  if (lower.includes("pdf")) return "PDF";
  if (lower.includes("word") || lower.endsWith(".doc") || lower.endsWith(".docx")) return "Word";
  if (lower.includes("sheet") || lower.endsWith(".xls") || lower.endsWith(".xlsx")) return "Excel";
  if (lower.includes("image")) return "تصویر";
  if (lower.includes("video")) return "ویدیو";
  if (lower.includes("audio")) return "صوت";
  if (lower.includes("zip") || lower.includes("rar")) return "فشرده";
  return mime?.split("/")[1]?.toUpperCase() || "فایل";
}

export function ResourceLibrarySearchModal({
  open,
  onClose,
  classRoomId,
  classLabel,
  onGranted,
}: {
  open: boolean;
  onClose: () => void;
  classRoomId: number;
  classLabel: string;
  onGranted: () => void;
}) {
  const [q, setQ] = useState("");
  const [tag, setTag] = useState("");
  const [fileType, setFileType] = useState("");
  const [classId, setClassId] = useState("");
  const [data, setData] = useState<LibrarySearchResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [granting, setGranting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [grantTarget, setGrantTarget] = useState<LibraryResource | null>(null);

  const search = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams();
      params.set("current_class_id", String(classRoomId));
      if (q.trim()) params.set("q", q.trim());
      if (tag) params.set("tag", tag);
      if (fileType) params.set("file_type", fileType);
      if (classId) params.set("class_id", classId);
      setData(await apiGet<LibrarySearchResponse>(`/teacher/resources/search?${params.toString()}`));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در جستجو");
    } finally {
      setLoading(false);
    }
  }, [classId, classRoomId, fileType, q, tag]);

  useEffect(() => {
    if (!open) return;
    setQ("");
    setTag("");
    setFileType("");
    setClassId("");
    setGrantTarget(null);
    setError(null);
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const timer = window.setTimeout(() => {
      void search();
    }, 300);
    return () => window.clearTimeout(timer);
  }, [open, search]);

  const confirmGrant = async () => {
    if (!grantTarget) return;
    setGranting(true);
    setError(null);
    try {
      await apiPost(`/teacher/resources/${grantTarget.id}/access/${classRoomId}`, {});
      setGrantTarget(null);
      await search();
      onGranted();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در دادن دسترسی");
    } finally {
      setGranting(false);
    }
  };

  const selectClass = "h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm";

  return (
    <>
      <TeacherModal
        open={open}
        onClose={onClose}
        title="استفاده از منابع قبلی"
        subtitle={`از بین فایل‌های قبلی، برای «${classLabel}» دسترسی بدهید`}
        size="xl"
        footer={
          <div className="flex justify-end">
            <Button variant="secondary" onClick={onClose}>
              بستن
            </Button>
          </div>
        }
      >
        <div className="space-y-4">
          {error ? <Alert tone="error">{error}</Alert> : null}

          <div className="grid gap-3 sm:grid-cols-2">
            <Field label="عنوان فایل">
              <Input
                value={q}
                onChange={(e) => setQ(e.target.value)}
                placeholder="مثال: خلاصه درس چهارم"
                onKeyDown={(e) => {
                  if (e.key === "Enter") void search();
                }}
              />
            </Field>
            <Field label="تگ">
              <select className={selectClass} value={tag} onChange={(e) => setTag(e.target.value)}>
                <option value="">همه تگ‌ها</option>
                {(data?.tags ?? []).map((item) => (
                  <option key={item} value={item}>
                    {item}
                  </option>
                ))}
              </select>
            </Field>
            <Field label="نوع فایل">
              <select className={selectClass} value={fileType} onChange={(e) => setFileType(e.target.value)}>
                <option value="">همه انواع</option>
                {(data?.file_types ?? []).map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
            </Field>
            <Field label="کلاس">
              <select className={selectClass} value={classId} onChange={(e) => setClassId(e.target.value)}>
                <option value="">همه کلاس‌ها</option>
                {(data?.classes ?? []).map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.label}
                  </option>
                ))}
              </select>
            </Field>
          </div>

          {loading ? (
            <p className="py-6 text-center text-sm text-slate-500">در حال جستجو…</p>
          ) : (data?.resources ?? []).length === 0 ? (
            <p className="rounded-xl bg-slate-50 px-3 py-8 text-center text-sm text-slate-500">
              منبعی با این مشخصات یافت نشد.
            </p>
          ) : (
            <ul className="max-h-[22rem] space-y-2 overflow-y-auto">
              {(data?.resources ?? []).map((resource) => (
                <li
                  key={resource.id}
                  className="rounded-xl border border-slate-200 bg-white p-3"
                >
                  <div className="flex flex-wrap items-start justify-between gap-2">
                    <div>
                      <div className="font-medium text-slate-800">
                        {resource.title || resource.original_name}
                      </div>
                      <div className="mt-0.5 text-xs text-slate-400">{resource.original_name}</div>
                      <div className="mt-1 flex flex-wrap gap-2 text-xs text-slate-500">
                        <span>{fileTypeLabel(resource.mime_type, resource.original_name)}</span>
                        <span>{formatBytes(resource.file_size_bytes)}</span>
                        {resource.tags?.length ? <span>#{resource.tags.join(" #")}</span> : null}
                      </div>
                      {resource.class_labels?.length ? (
                        <p className="mt-1 text-xs text-slate-500">
                          کلاس‌های دارای دسترسی: {resource.class_labels.join("، ")}
                        </p>
                      ) : null}
                    </div>
                    {resource.has_current_class_access ? (
                      <span className="rounded-full bg-teal-50 px-2 py-1 text-xs font-medium text-teal-800">
                        در این کلاس هست
                      </span>
                    ) : resource.can_manage ? (
                      <Button
                        className="px-3 py-1 text-xs"
                        onClick={() => setGrantTarget(resource)}
                      >
                        افزودن به این کلاس
                      </Button>
                    ) : (
                      <span className="text-xs text-slate-400">اجازه افزودن ندارید</span>
                    )}
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
      </TeacherModal>

      <ConfirmDialog
        open={grantTarget != null}
        title="افزودن به کلاس فعلی"
        message={`با تأیید، دانش‌آموزان «${classLabel}» می‌توانند «${grantTarget?.title || grantTarget?.original_name || "این منبع"}» را مشاهده و دانلود کنند.`}
        confirmLabel="دادن دسترسی"
        cancelLabel="انصراف"
        confirmVariant="primary"
        loading={granting}
        onCancel={() => setGrantTarget(null)}
        onConfirm={() => void confirmGrant()}
      />
    </>
  );
}