"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { ApiError, BranchItem, Paginated, apiGet, apiPost } from "@/lib/api";
import { driverLabel } from "@/lib/online-class-drivers";
import { onlineClassMessage } from "@/lib/online-class-labels";
import { getActiveBranchId } from "@/lib/session-context";

type ClassOption = { id: number; name: string };
type ProviderOption = { id: number; title: string; driver_key: string; is_active?: boolean };

export type CreatedRoom = { id: number; title: string };

export function RoomCreateForm({
  onCreated,
  initialProviderId = "",
}: {
  onCreated: (room: CreatedRoom) => void;
  initialProviderId?: string;
}) {
  const [title, setTitle] = useState("");
  const [classRoomId, setClassRoomId] = useState("");
  const [providerId, setProviderId] = useState(initialProviderId);
  const [branchId, setBranchId] = useState("");
  const [classes, setClasses] = useState<ClassOption[]>([]);
  const [providers, setProviders] = useState<ProviderOption[]>([]);
  const [branches, setBranches] = useState<BranchItem[]>([]);
  const [needsBranch, setNeedsBranch] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const active = getActiveBranchId();
    if (active) {
      setBranchId(String(active));
      setNeedsBranch(false);
    } else {
      setNeedsBranch(true);
      apiGet<BranchItem[]>("/branches")
        .then((rows) => setBranches(Array.isArray(rows) ? rows : []))
        .catch(() => setBranches([]));
    }
  }, []);

  useEffect(() => {
    if (!branchId) {
      setClasses([]);
      return;
    }
    apiGet<ClassOption[] | Paginated<ClassOption>>(`/class-rooms?branch_id=${branchId}`)
      .then((rows) => {
        if (Array.isArray(rows)) setClasses(rows);
        else setClasses(rows.data ?? []);
      })
      .catch(() => setClasses([]));
  }, [branchId]);

  useEffect(() => {
    apiGet<ProviderOption[]>("/online-class/providers")
      .then((rows) => setProviders((Array.isArray(rows) ? rows : []).filter((row) => row.is_active !== false)))
      .catch(() => setProviders([]));
  }, []);

  const submit = async () => {
    setBusy(true);
    setError(null);
    try {
      const room = await apiPost<CreatedRoom>("/online-class/rooms", {
        branch_id: Number(branchId),
        title: title.trim(),
        class_room_id: classRoomId ? Number(classRoomId) : null,
        provider_id: providerId ? Number(providerId) : null,
        sync_members: Boolean(classRoomId),
      });
      setTitle("");
      setClassRoomId("");
      onCreated(room);
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "اتاق ساخته نشد."));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="mb-4 rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
      <h2 className="mb-1 text-base font-bold">اتاق جدید</h2>
      <p className="mb-4 text-sm text-[var(--muted)]">
        اتاق روی سرور انتخاب‌شده ساخته می‌شود. لینک کلاس همین‌جا می‌آید و لازم نیست وارد پنل آن سامانه شوید.
      </p>
      {error ? <p className="mb-3 text-sm text-red-700">{error}</p> : null}
      <div className="grid gap-3 sm:grid-cols-2">
        <Field label="عنوان اتاق">
          <Input value={title} onChange={(event) => setTitle(event.target.value)} placeholder="مثلاً ریاضی هفتم" />
        </Field>
        {needsBranch ? (
          <Field label="مدرسه">
            <Select value={branchId} onChange={(event) => setBranchId(event.target.value)}>
              <option value="">انتخاب کنید</option>
              {branches.map((branch) => (
                <option key={branch.id} value={branch.id}>
                  {branch.name}
                </option>
              ))}
            </Select>
          </Field>
        ) : null}
        <Field label="کلاس">
          <Select value={classRoomId} onChange={(event) => setClassRoomId(event.target.value)}>
            <option value="">بدون اتصال به کلاس</option>
            {classes.map((room) => (
              <option key={room.id} value={room.id}>
                {room.name}
              </option>
            ))}
          </Select>
        </Field>
        <Field label="سرور">
          <Select value={providerId} onChange={(event) => setProviderId(event.target.value)}>
            <option value="">انتخاب خودکار</option>
            {providers.map((provider) => (
              <option key={provider.id} value={provider.id}>
                {provider.title} ({driverLabel(provider.driver_key)})
              </option>
            ))}
          </Select>
        </Field>
      </div>
      <div className="mt-4">
        <Button type="button" onClick={submit} disabled={busy || !title.trim() || !branchId}>
          {busy ? "در حال ثبت…" : "ثبت اتاق"}
        </Button>
      </div>
    </div>
  );
}