"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { AdvancedSearchToggle } from "@/components/layout/AdvancedSearchToggle";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { PageHeader } from "@/components/layout/PageHeader";
import { Pagination } from "@/components/layout/Pagination";
import { ProviderRowActions } from "@/components/virtual-classes/ProviderRowActions";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
import { ApiError, BranchItem, apiDelete, apiGet, apiPost } from "@/lib/api";
import { ONLINE_CLASS_DRIVERS, OnlineClassProvider, driverLabel } from "@/lib/online-class-drivers";

const PER_PAGE = 20;

const emptyFilters = {
  title: "",
  driver_key: "",
  status: "",
  branch_id: "",
};

export default function VirtualClassProvidersPage() {
  const router = useRouter();
  const [providers, setProviders] = useState<OnlineClassProvider[]>([]);
  const [branches, setBranches] = useState<BranchItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showSearch, setShowSearch] = useState(false);
  const [filters, setFilters] = useState(emptyFilters);
  const [applied, setApplied] = useState(emptyFilters);
  const [page, setPage] = useState(1);
  const [disableTarget, setDisableTarget] = useState<OnlineClassProvider | null>(null);
  const [disabling, setDisabling] = useState(false);
  const [testingId, setTestingId] = useState<number | null>(null);
  const [testMessage, setTestMessage] = useState<{ ok: boolean; text: string } | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [providerRows, branchRows] = await Promise.all([
        apiGet<OnlineClassProvider[]>("/online-class/providers"),
        apiGet<BranchItem[]>("/branches"),
      ]);
      setProviders(Array.isArray(providerRows) ? providerRows : []);
      setBranches(Array.isArray(branchRows) ? branchRows : []);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری سرورها");
    } finally {
      setLoading(false);
    }
  }, []);

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

  const filtered = useMemo(() => {
    return providers.filter((provider) => {
      if (applied.title && !provider.title.includes(applied.title.trim())) return false;
      if (applied.driver_key && provider.driver_key !== applied.driver_key) return false;
      if (applied.status === "active" && provider.is_active === false) return false;
      if (applied.status === "inactive" && provider.is_active !== false) return false;
      if (applied.branch_id) {
        const branchId = Number(applied.branch_id);
        const ids = provider.branch_ids ?? [];
        if (ids.length > 0 && !ids.includes(branchId)) return false;
      }
      return true;
    });
  }, [applied, providers]);

  const lastPage = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
  const pageRows = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);

  useEffect(() => {
    if (page > lastPage) setPage(lastPage);
  }, [lastPage, page]);

  const accessCount = (provider: OnlineClassProvider) => {
    const ids = provider.branch_ids ?? [];
    if (ids.length === 0) return branches.length;
    return ids.length;
  };

  const testConnection = async (providerId: number) => {
    setTestingId(providerId);
    setTestMessage(null);
    setError(null);
    try {
      const result = await apiPost<{ ok: boolean; message: string }>(
        `/online-class/providers/${providerId}/test-connection`,
        {},
      );
      setTestMessage({ ok: result.ok, text: result.message });
    } catch (err) {
      setTestMessage({
        ok: false,
        text: err instanceof ApiError ? err.message : "اتصال برقرار نشد.",
      });
    } finally {
      setTestingId(null);
    }
  };

  const disable = async () => {
    if (!disableTarget) return;
    setDisabling(true);
    setError(null);
    try {
      await apiDelete(`/online-class/providers/${disableTarget.id}`);
      setDisableTarget(null);
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در غیرفعال‌کردن سرور");
    } finally {
      setDisabling(false);
    }
  };

  return (
    <AppShell title="سرورهای کلاس آنلاین" subtitle="فهرست سرویس‌های کلاس آنلاین">
      {error ? <Alert tone="error">{error}</Alert> : null}
      {testMessage ? <Alert tone={testMessage.ok ? "success" : "error"}>{testMessage.text}</Alert> : null}

      <div className="mb-4 rounded-2xl border border-[var(--border)] bg-white shadow-card">
        <AdvancedSearchToggle open={showSearch} onToggle={() => setShowSearch(!showSearch)} />
        {showSearch ? (
          <div className="grid gap-3 border-t border-[var(--border)] p-4 sm:grid-cols-2 lg:grid-cols-4">
            <Field label="عنوان">
              <Input value={filters.title} onChange={(event) => setFilters({ ...filters, title: event.target.value })} />
            </Field>
            <Field label="سامانه">
              <Select
                value={filters.driver_key}
                onChange={(event) => setFilters({ ...filters, driver_key: event.target.value })}
              >
                <option value="">همه</option>
                {ONLINE_CLASS_DRIVERS.map((driver) => (
                  <option key={driver.key} value={driver.key}>
                    {driver.label}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="وضعیت">
              <Select value={filters.status} onChange={(event) => setFilters({ ...filters, status: event.target.value })}>
                <option value="">همه</option>
                <option value="active">فعال</option>
                <option value="inactive">غیرفعال</option>
              </Select>
            </Field>
            <Field label="مدرسه">
              <Select
                value={filters.branch_id}
                onChange={(event) => setFilters({ ...filters, branch_id: event.target.value })}
              >
                <option value="">همه</option>
                {branches.map((branch) => (
                  <option key={branch.id} value={branch.id}>
                    {branch.name}
                  </option>
                ))}
              </Select>
            </Field>
            <div className="flex flex-wrap items-end gap-2 sm:col-span-2 lg:col-span-4">
              <Button
                onClick={() => {
                  setPage(1);
                  setApplied(filters);
                }}
              >
                جستجو
              </Button>
              <Button
                variant="secondary"
                onClick={() => {
                  setFilters(emptyFilters);
                  setApplied(emptyFilters);
                  setPage(1);
                }}
              >
                پاک کردن فیلترها
              </Button>
            </div>
          </div>
        ) : null}
      </div>

      <PageHeader
        title="فهرست سرورها"
        actions={
          <>
            <span className="rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-800">
              تعداد سرورها: {filtered.length}
            </span>
            <Button variant="secondary" onClick={() => router.push("/virtual-classes/rooms/new")}>
              + افزودن اتاق
            </Button>
            <Button onClick={() => router.push("/virtual-classes/providers/new")}>+ سرور جدید</Button>
          </>
        }
      />

      <DataTable
        loading={loading}
        columns={[
          { key: "idx", label: "#" },
          { key: "title", label: "عنوان" },
          { key: "driver", label: "سامانه" },
          { key: "url", label: "آدرس" },
          { key: "status", label: "وضعیت" },
          { key: "rooms", label: "اتاق" },
          { key: "credentials", label: "اعتبارنامه" },
          { key: "access", label: "دسترسی" },
          { key: "school", label: "مدرسه" },
          { key: "creator", label: "ایجادکننده" },
          { key: "ops", label: "عملیات" },
        ]}
      >
        {pageRows.length === 0 ? (
          <DataTableEmpty colSpan={11} />
        ) : (
          pageRows.map((provider, index) => {
            const active = provider.is_active !== false;
            const maxRooms = provider.max_rooms ?? 0;
            return (
              <tr key={provider.id} className="hover:bg-slate-50">
                <td className="px-3 py-3">{(page - 1) * PER_PAGE + index + 1}</td>
                <td className="px-3 py-3 font-medium">{provider.title}</td>
                <td className="px-3 py-3">{driverLabel(provider.driver_key)}</td>
                <td className="px-3 py-3 text-xs" dir="ltr">
                  {provider.base_url || "—"}
                </td>
                <td className="px-3 py-3">
                  <span
                    className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
                      active ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                    }`}
                  >
                    {active ? "فعال" : "غیرفعال"}
                  </span>
                </td>
                <td className="px-3 py-3 text-xs">
                  {provider.active_rooms ?? 0} / {maxRooms === 0 ? "نامحدود" : maxRooms}
                </td>
                <td className="px-3 py-3 text-xs">{provider.has_credentials ? "ثبت شده" : "ندارد"}</td>
                <td className="px-3 py-3">
                  <Link
                    href={`/virtual-classes/providers/${provider.id}/access`}
                    className="inline-flex min-w-8 justify-center rounded-full bg-slate-100 px-2.5 py-0.5 text-sm font-semibold text-[var(--primary)] hover:bg-teal-50"
                  >
                    {accessCount(provider)}
                  </Link>
                </td>
                <td className="px-3 py-3 text-xs">{provider.branch?.name ?? "همه مدارس"}</td>
                <td className="px-3 py-3 text-xs">{provider.creator?.name || "—"}</td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-2">
                    <button
                      type="button"
                      className="rounded-lg border border-[var(--border)] px-2.5 py-1 text-xs font-medium hover:bg-slate-50 disabled:opacity-50"
                      disabled={testingId === provider.id || provider.can_manage === false}
                      onClick={() => testConnection(provider.id)}
                    >
                      {testingId === provider.id ? "در حال تست…" : "تست اتصال"}
                    </button>
                    <ProviderRowActions
                      providerId={provider.id}
                      active={active}
                      canManage={provider.can_manage !== false}
                      onDisable={() => setDisableTarget(provider)}
                    />
                  </div>
                </td>
              </tr>
            );
          })
        )}
      </DataTable>

      <Pagination page={page} lastPage={lastPage} onPageChange={setPage} />

      <ConfirmDialog
        open={Boolean(disableTarget)}
        title="غیرفعال کردن سرور"
        message={disableTarget ? `سرور «${disableTarget.title}» غیرفعال شود؟ جلسه‌های قبلی حذف نمی‌شوند.` : ""}
        confirmLabel="غیرفعال"
        loading={disabling}
        onConfirm={disable}
        onCancel={() => setDisableTarget(null)}
      />
    </AppShell>
  );
}