"use client";

import { useMemo, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { useModules, type ModuleCatalogItem } from "@/components/app/ModulesProvider";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { AdminUser, ApiError, apiPatch, getStoredUser } from "@/lib/api";
import { isDeveloper } from "@/lib/permissions";

export default function SettingsPage() {
  const user = useMemo(() => getStoredUser<AdminUser>(), []);
  const orgId = user?.organization_id;
  const canManage = isDeveloper() || Boolean(user?.roles?.includes("developer"));
  const { modules, refreshModules } = useModules();
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [draft, setDraft] = useState<string[] | null>(null);

  const licensed = draft ?? modules.filter((row) => row.licensed && row.platform_enabled).map((row) => row.key);

  const toggle = (row: ModuleCatalogItem) => {
    if (!row.platform_enabled) return;
    setMessage(null);
    setError(null);
    setDraft((current) => {
      const base = current ?? modules.filter((item) => item.licensed && item.platform_enabled).map((item) => item.key);
      return base.includes(row.key) ? base.filter((key) => key !== row.key) : [...base, row.key];
    });
  };

  const save = async () => {
    if (!orgId) return;
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      await apiPatch(`/organizations/${orgId}/licenses`, { licensed_modules: licensed });
      await refreshModules(true);
      setDraft(null);
      setMessage("ماژول‌های سامانه ذخیره شد.");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره ماژول‌ها");
    } finally {
      setSaving(false);
    }
  };

  return (
    <AppShell title="ماژول‌های سامانه" subtitle="فعال یا غیرفعال‌سازی قابلیت‌های هلدینگ">
      {error ? <Alert tone="error">{error}</Alert> : null}
      {message ? <Alert tone="success">{message}</Alert> : null}

      {!canManage ? (
        <Alert tone="warning">فقط نقش برنامه‌نویس می‌تواند ماژول‌های سامانه را تغییر دهد.</Alert>
      ) : (
        <div className="space-y-4 rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card sm:p-5">
          <p className="text-sm text-[var(--muted)]">
            ماژول خاموش از منو و داشبورد همه نقش‌ها حذف می‌شود. ماژول‌هایی که در سطح پلتفرم خاموش‌اند قابل فعال‌سازی نیستند.
          </p>
          <ul className="divide-y divide-slate-100">
            {modules.map((row) => {
              const on = licensed.includes(row.key) && row.platform_enabled;
              return (
                <li key={row.key} className="flex items-center justify-between gap-3 py-3">
                  <div>
                    <p className="text-sm font-semibold">{row.label}</p>
                    <p className="text-xs text-[var(--muted)]">{row.key}</p>
                    {!row.platform_enabled ? (
                      <p className="mt-1 text-xs text-amber-700">در پیکربندی سرور غیرفعال است</p>
                    ) : null}
                  </div>
                  <button
                    type="button"
                    disabled={!row.platform_enabled}
                    onClick={() => toggle(row)}
                    className={`rounded-full px-3 py-1.5 text-xs font-semibold ${
                      on ? "bg-primary text-white" : "bg-slate-100 text-slate-600"
                    } disabled:cursor-not-allowed disabled:opacity-60`}
                  >
                    {on ? "فعال" : "غیرفعال"}
                  </button>
                </li>
              );
            })}
          </ul>
          <Button loading={saving} disabled={modules.length === 0} onClick={() => void save()}>
            ذخیره ماژول‌ها
          </Button>
        </div>
      )}
    </AppShell>
  );
}