"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 { TeacherModal } from "@/components/teacher/ui/TeacherModal";
import { ResourceClassPickerModal } from "@/components/teacher/ResourceClassPickerModal";
import { ApiError, apiDelete, apiGet, apiPut } from "@/lib/api";

interface AccessClass {
  id: number;
  label: string;
  granted_at?: string | null;
}

interface AccessHistory {
  id: number;
  action: string;
  class_label?: string | null;
  message: string;
  created_at?: string | null;
}

interface AccessPayload {
  classes: AccessClass[];
  history: AccessHistory[];
}

export function ResourceAccessModal({
  open,
  onClose,
  resourceId,
  resourceTitle,
  currentClassId,
  canManage,
  onChanged,
}: {
  open: boolean;
  onClose: () => void;
  resourceId: number | null;
  resourceTitle: string;
  currentClassId: number;
  canManage: boolean;
  onChanged: () => void;
}) {
  const [data, setData] = useState<AccessPayload | null>(null);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [pickerOpen, setPickerOpen] = useState(false);
  const [revokeTarget, setRevokeTarget] = useState<AccessClass | null>(null);

  const load = useCallback(async () => {
    if (!resourceId) return;
    setLoading(true);
    setError(null);
    try {
      setData(await apiGet<AccessPayload>(`/teacher/resources/${resourceId}/access`));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری دسترسی‌ها");
    } finally {
      setLoading(false);
    }
  }, [resourceId]);

  useEffect(() => {
    if (open) void load();
  }, [load, open]);

  const selectedIds = data?.classes.map((row) => row.id) ?? [currentClassId];

  const saveIds = async (ids: number[]) => {
    if (!resourceId) return;
    setSaving(true);
    setError(null);
    try {
      const payload = await apiPut<AccessPayload>(`/teacher/resources/${resourceId}/access`, {
        class_ids: ids,
      });
      setData(payload);
      onChanged();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره دسترسی");
    } finally {
      setSaving(false);
    }
  };

  const confirmRevoke = async () => {
    if (!resourceId || !revokeTarget) return;
    setSaving(true);
    setError(null);
    try {
      const payload = await apiDelete<AccessPayload>(
        `/teacher/resources/${resourceId}/access/${revokeTarget.id}`,
      );
      setData(payload);
      setRevokeTarget(null);
      onChanged();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در حذف دسترسی");
    } finally {
      setSaving(false);
    }
  };

  return (
    <>
      <TeacherModal
        open={open && !pickerOpen}
        onClose={onClose}
        title="مدیریت دسترسی"
        subtitle={resourceTitle}
        size="lg"
        footer={
          <div className="flex justify-end">
            <Button variant="secondary" onClick={onClose}>
              بستن
            </Button>
          </div>
        }
      >
        <div className="space-y-5">
          {error ? <Alert tone="error">{error}</Alert> : null}
          {loading ? <p className="text-sm text-slate-500">در حال بارگذاری…</p> : null}

          <section>
            <div className="mb-2 flex items-center justify-between gap-2">
              <h4 className="text-sm font-bold text-slate-800">کلاس‌های دارای دسترسی</h4>
              {canManage ? (
                <Button
                  variant="secondary"
                  className="px-3 py-1 text-xs"
                  onClick={() => setPickerOpen(true)}
                  disabled={saving}
                >
                  + افزودن کلاس
                </Button>
              ) : null}
            </div>
            <ul className="divide-y divide-slate-100 rounded-xl border border-slate-200">
              {(data?.classes ?? []).map((row) => (
                <li key={row.id} className="flex items-center justify-between gap-2 px-3 py-2">
                  <span className="text-sm text-slate-800">{row.label}</span>
                  {canManage ? (
                    <Button
                      variant="ghost"
                      className="px-2 py-1 text-xs text-red-600"
                      onClick={() => setRevokeTarget(row)}
                      disabled={saving || (data?.classes.length ?? 0) <= 1}
                    >
                      حذف دسترسی
                    </Button>
                  ) : null}
                </li>
              ))}
            </ul>
          </section>

          <section>
            <h4 className="mb-2 text-sm font-bold text-slate-800">سابقه اشتراک‌گذاری</h4>
            {(data?.history ?? []).length === 0 ? (
              <p className="text-sm text-slate-500">هنوز تغییری ثبت نشده است.</p>
            ) : (
              <ul className="space-y-2">
                {(data?.history ?? []).map((item) => (
                  <li key={item.id} className="rounded-lg bg-slate-50 px-3 py-2 text-sm text-slate-700">
                    <div>{item.message}</div>
                    {item.created_at ? (
                      <div className="mt-0.5 text-xs text-slate-400">
                        {new Date(item.created_at).toLocaleString("fa-IR")}
                      </div>
                    ) : null}
                  </li>
                ))}
              </ul>
            )}
          </section>
        </div>
      </TeacherModal>

      <ResourceClassPickerModal
        open={pickerOpen}
        onClose={() => setPickerOpen(false)}
        selectedIds={selectedIds}
        onConfirm={(ids) => void saveIds(ids)}
      />

      <ConfirmDialog
        open={revokeTarget != null}
        title="حذف دسترسی کلاس"
        message="با حذف دسترسی، دانش‌آموزان این کلاس دیگر نمی‌توانند این منبع را مشاهده یا دانلود کنند."
        confirmLabel="حذف دسترسی"
        loading={saving}
        onCancel={() => setRevokeTarget(null)}
        onConfirm={() => void confirmRevoke()}
      />
    </>
  );
}