"use client";

import { useParams, useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { PageHeader } from "@/components/layout/PageHeader";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { ProviderServerForm } from "@/components/virtual-classes/ProviderServerForm";
import { ApiError, apiGet } from "@/lib/api";
import { OnlineClassProvider } from "@/lib/online-class-drivers";

export default function EditVirtualClassProviderPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [provider, setProvider] = useState<OnlineClassProvider | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      const rows = await apiGet<OnlineClassProvider[]>("/online-class/providers");
      const found = (Array.isArray(rows) ? rows : []).find((row) => String(row.id) === id) ?? null;
      setProvider(found);
      setError(found ? null : "سرور پیدا نشد.");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری سرور");
    }
  }, [id]);

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

  return (
    <AppShell title="ویرایش سرور" showBack={false}>
      <PageHeader
        title={provider ? `ویرایش ${provider.title}` : "ویرایش سرور"}
        actions={
          <Button variant="secondary" onClick={() => router.push("/virtual-classes/providers")}>
            بازگشت
          </Button>
        }
      />
      {error ? <Alert tone="error">{error}</Alert> : null}
      {!provider && !error ? <p className="text-sm text-[var(--muted)]">در حال بارگذاری…</p> : null}
      {provider ? (
        <ProviderServerForm
          provider={provider}
          onSaved={() => router.push("/virtual-classes/providers")}
          onCancel={() => router.push("/virtual-classes/providers")}
        />
      ) : null}
    </AppShell>
  );
}