"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { PersianDatePicker } from "@/components/ui/PersianDatePicker";
import { ApiError, Paginated, apiGet, apiPost } from "@/lib/api";
import { onlineClassMessage } from "@/lib/online-class-labels";

type RoomOption = { id: number; title: string };

function localInput(date: Date): string {
  const pad = (value: number) => String(value).padStart(2, "0");
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
}

export function SessionCreateForm({ onCreated }: { onCreated: (session: { id: number }) => void }) {
  const [rooms, setRooms] = useState<RoomOption[]>([]);
  const [roomId, setRoomId] = useState("");
  const [title, setTitle] = useState("");
  const [startsAt, setStartsAt] = useState("");
  const [endsAt, setEndsAt] = useState("");
  const [busy, setBusy] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const start = new Date();
    start.setMinutes(0, 0, 0);
    start.setHours(start.getHours() + 1);
    const end = new Date(start.getTime() + 45 * 60 * 1000);
    setStartsAt(localInput(start));
    setEndsAt(localInput(end));
  }, []);

  useEffect(() => {
    apiGet<Paginated<RoomOption> | RoomOption[]>("/online-class/rooms?per_page=100")
      .then((rows) => {
        const list = Array.isArray(rows) ? rows : (rows.data ?? []);
        setRooms(list);
        if (list[0]) setRoomId(String(list[0].id));
      })
      .catch(() => setRooms([]))
      .finally(() => setLoaded(true));
  }, []);

  const submit = async () => {
    setBusy(true);
    setError(null);
    try {
      const session = await apiPost<{ id: number }>("/online-class/sessions", {
        room_id: Number(roomId),
        title: title.trim() || undefined,
        starts_at: startsAt.length === 16 ? `${startsAt}:00` : startsAt,
        ends_at: endsAt.length === 16 ? `${endsAt}:00` : endsAt,
      });
      onCreated(session);
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "جلسه ثبت نشد."));
    } finally {
      setBusy(false);
    }
  };

  if (!loaded) {
    return <p className="mb-4 text-sm text-[var(--muted)]">در حال بارگذاری اتاق‌ها…</p>;
  }

  if (rooms.length === 0) {
    return (
      <div className="mb-4 rounded-2xl border bg-white p-4">
        <p className="mb-3 text-sm text-[var(--muted)]">برای ثبت جلسه اول باید یک اتاق داشته باشید.</p>
        <Link href="/virtual-classes/rooms/new" className="text-sm font-medium text-[var(--primary)]">
          افزودن اتاق
        </Link>
      </div>
    );
  }

  return (
    <div className="mb-4 rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
      <h2 className="mb-3 text-base font-bold">جلسه جدید</h2>
      {error ? <p className="mb-3 text-sm text-red-700">{error}</p> : null}
      <div className="grid gap-3 sm:grid-cols-2">
        <Field label="اتاق">
          <Select value={roomId} onChange={(event) => setRoomId(event.target.value)}>
            {rooms.map((room) => (
              <option key={room.id} value={room.id}>
                {room.title}
              </option>
            ))}
          </Select>
        </Field>
        <Field label="عنوان">
          <Input value={title} onChange={(event) => setTitle(event.target.value)} placeholder="در صورت خالی بودن، عنوان اتاق استفاده می‌شود" />
        </Field>
        <Field label="شروع">
          <PersianDatePicker withTime value={startsAt} onChange={setStartsAt} />
        </Field>
        <Field label="پایان">
          <PersianDatePicker withTime value={endsAt} onChange={setEndsAt} />
        </Field>
      </div>
      <div className="mt-4">
        <Button type="button" onClick={submit} disabled={busy || !roomId || !startsAt || !endsAt}>
          {busy ? "در حال ثبت…" : "ثبت جلسه"}
        </Button>
      </div>
    </div>
  );
}