"use client";

import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ClassLink } from "@/components/virtual-classes/ClassLink";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { PageHeader } from "@/components/layout/PageHeader";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { PersianDatePicker } from "@/components/ui/PersianDatePicker";
import { ApiError, Paginated, apiDelete, apiGet, apiPost } from "@/lib/api";
import { driverLabel } from "@/lib/online-class-drivers";
import {
  formatWhen,
  onlineClassMessage,
  personName,
  provisionLabel,
  sessionStatusLabel,
} from "@/lib/online-class-labels";

type Room = {
  id: number;
  title: string;
  join_url?: string | null;
  provision_status: string;
  last_error?: string | null;
  class_room_id?: number | null;
  provider?: { title?: string; driver_key?: string } | null;
};

type Member = {
  id: number;
  user_id: number;
  role: string;
  source?: string;
  is_active: boolean;
  user?: { name?: string; first_name?: string; last_name?: string } | null;
};

type SessionRow = {
  id: number;
  title: string;
  starts_at?: string;
  status: string;
  provision_status: string;
  join_url?: string | null;
};

type PersonHit = { id: number; label: 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 default function VirtualClassRoomDetailPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [room, setRoom] = useState<Room | null>(null);
  const [members, setMembers] = useState<Member[]>([]);
  const [sessions, setSessions] = useState<SessionRow[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [query, setQuery] = useState("");
  const [hits, setHits] = useState<PersonHit[]>([]);
  const [role, setRole] = useState("attendee");
  const [startsAt, setStartsAt] = useState("");
  const [endsAt, setEndsAt] = useState("");
  const [origin, setOrigin] = useState("");

  const load = useCallback(async () => {
    try {
      const [roomRow, memberRows, sessionPage] = await Promise.all([
        apiGet<Room>(`/online-class/rooms/${id}`),
        apiGet<Member[]>(`/online-class/rooms/${id}/members`),
        apiGet<Paginated<SessionRow>>(`/online-class/sessions?room_id=${id}&per_page=20`),
      ]);
      setRoom(roomRow);
      setMembers(Array.isArray(memberRows) ? memberRows : []);
      setSessions(sessionPage.data ?? []);
      setError(null);
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "خطا در بارگذاری اتاق"));
    }
  }, [id]);

  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(() => {
    setOrigin(window.location.origin);
    load();
  }, [load]);

  useEffect(() => {
    if (!room || (room.provision_status !== "pending" && room.provision_status !== "provisioning")) return;
    const timer = window.setInterval(load, 4000);
    return () => window.clearInterval(timer);
  }, [load, room]);

  const searchPeople = async () => {
    const q = query.trim();
    if (q.length < 2) {
      setHits([]);
      return;
    }
    try {
      const [students, staff] = await Promise.all([
        apiGet<Paginated<{ user_id?: number; full_name?: string }>>(`/students?q=${encodeURIComponent(q)}&per_page=8`).catch(
          () => ({ data: [] }) as Paginated<{ user_id?: number; full_name?: string }>,
        ),
        apiGet<Array<{ id: number; name?: string; first_name?: string; last_name?: string }>>(
          `/users/search?q=${encodeURIComponent(q)}`,
        ).catch(() => []),
      ]);
      const rows: PersonHit[] = [];
      for (const student of students.data ?? []) {
        if (student.user_id) rows.push({ id: student.user_id, label: student.full_name || `دانش‌آموز #${student.user_id}` });
      }
      for (const user of staff) {
        if (!rows.some((row) => row.id === user.id)) {
          rows.push({ id: user.id, label: personName(user) });
        }
      }
      setHits(rows);
    } catch {
      setHits([]);
    }
  };

  const addMember = async (userId: number) => {
    setBusy(true);
    setError(null);
    try {
      await apiPost(`/online-class/rooms/${id}/members`, { user_id: userId, role });
      setQuery("");
      setHits([]);
      setNotice("عضو اضافه شد.");
      await load();
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "عضو اضافه نشد."));
    } finally {
      setBusy(false);
    }
  };

  const changeRole = async (member: Member, nextRole: string) => {
    setBusy(true);
    try {
      await apiPost(`/online-class/rooms/${id}/members`, { user_id: member.user_id, role: nextRole });
      await load();
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "نقش تغییر نکرد."));
    } finally {
      setBusy(false);
    }
  };

  const removeMember = async (memberId: number) => {
    setBusy(true);
    try {
      await apiDelete(`/online-class/rooms/${id}/members/${memberId}`);
      await load();
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "عضو حذف نشد."));
    } finally {
      setBusy(false);
    }
  };

  const syncMembers = async () => {
    setBusy(true);
    setNotice(null);
    try {
      await apiPost(`/online-class/rooms/${id}/sync-members`, {});
      setNotice("همگام‌سازی اعضا در صف است. چند لحظه بعد فهرست را تازه کنید.");
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "همگام‌سازی انجام نشد."));
    } finally {
      setBusy(false);
    }
  };

  const reprovision = async () => {
    setBusy(true);
    try {
      await apiPost(`/online-class/rooms/${id}/reprovision`, {});
      await load();
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "آماده‌سازی دوباره انجام نشد."));
    } finally {
      setBusy(false);
    }
  };

  const createSession = async () => {
    setBusy(true);
    setError(null);
    try {
      const session = await apiPost<{ id: number }>("/online-class/sessions", {
        room_id: Number(id),
        title: room?.title,
        starts_at: startsAt.length === 16 ? `${startsAt}:00` : startsAt,
        ends_at: endsAt.length === 16 ? `${endsAt}:00` : endsAt,
      });
      router.push(`/virtual-classes/sessions/${session.id}`);
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "جلسه ساخته نشد."));
      setBusy(false);
    }
  };

  const activeMembers = members.filter((member) => member.is_active);

  return (
    <AppShell title="اتاق کلاس آنلاین">
      <PageHeader
        title={room?.title || "اتاق"}
        subtitle={
          room?.provider
            ? `${room.provider.title ?? ""} · ${driverLabel(room.provider.driver_key ?? "")}`
            : "کلاس از داخل همین پنل اداره می‌شود"
        }
        actions={
          <Link href="/virtual-classes/manage?tab=rooms" className="text-sm text-[var(--primary)]">
            بازگشت به اتاق‌ها
          </Link>
        }
      />
      {error ? <Alert tone="error">{error}</Alert> : null}
      {notice ? <Alert tone="success">{notice}</Alert> : null}

      <section className="mb-4 rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
          <h2 className="font-bold">لینک کلاس</h2>
          <span
            className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
              room?.provision_status === "ready"
                ? "bg-green-100 text-green-800"
                : room?.provision_status === "failed"
                  ? "bg-red-100 text-red-800"
                  : "bg-slate-100 text-slate-700"
            }`}
          >
            {provisionLabel(room?.provision_status)}
          </span>
        </div>
        {room?.provision_status === "failed" ? (
          <Alert tone="error">{onlineClassMessage(room.last_error)}</Alert>
        ) : null}
        <ClassLink
          url={room?.join_url && origin ? `${origin}/join/${id}` : null}
          entering={busy}
          enterLabel="ورود به‌عنوان میزبان"
          hint="ورود با نام ثبت‌شده شما در مدرسه انجام می‌شود و ادوبی نام نمی‌پرسد. لینک کپی‌شده لینک مهمان است؛ نام را همین سامانه می‌پرسد."
          onEnter={async () => {
            setBusy(true);
            setError(null);
            try {
              const res = await apiPost<{ join_url?: string }>(`/online-class/rooms/${id}/join`, {});
              if (res.join_url) window.open(res.join_url, "_blank", "noopener,noreferrer");
              setNotice("کلاس با دسترسی میزبان در تب جدید باز می‌شود.");
            } catch (err) {
              setError(onlineClassMessage(err instanceof ApiError ? err.message : "ورود انجام نشد."));
            } finally {
              setBusy(false);
            }
          }}
        />
        {room?.provision_status === "failed" ? (
          <div className="mt-3">
            <Button type="button" variant="secondary" onClick={reprovision} disabled={busy}>
              تلاش دوباره
            </Button>
          </div>
        ) : null}
      </section>

      <section className="mb-4 rounded-2xl border bg-white p-4">
        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
          <h2 className="font-bold">اعضا</h2>
          {room?.class_room_id ? (
            <Button type="button" variant="secondary" onClick={syncMembers} disabled={busy}>
              گرفتن دانش‌آموزان کلاس
            </Button>
          ) : null}
        </div>
        <div className="mb-4 grid gap-3 sm:grid-cols-[1fr_180px_auto] sm:items-end">
          <Field label="افزودن دانش‌آموز یا همکار">
            <Input
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              onKeyDown={(event) => {
                if (event.key === "Enter") {
                  event.preventDefault();
                  searchPeople();
                }
              }}
              placeholder="نام، کد ملی یا موبایل"
            />
          </Field>
          <Field label="نقش">
            <Select value={role} onChange={(event) => setRole(event.target.value)}>
              <option value="attendee">شرکت‌کننده</option>
              <option value="presenter">ارائه‌دهنده</option>
              <option value="host">میزبان</option>
            </Select>
          </Field>
          <Button type="button" variant="secondary" onClick={searchPeople} disabled={busy}>
            جستجو
          </Button>
        </div>
        {hits.length > 0 ? (
          <ul className="mb-4 divide-y rounded-xl border">
            {hits.map((hit) => (
              <li key={hit.id} className="flex items-center justify-between gap-3 px-3 py-2 text-sm">
                <span>{hit.label}</span>
                <Button type="button" onClick={() => addMember(hit.id)} disabled={busy}>
                  افزودن
                </Button>
              </li>
            ))}
          </ul>
        ) : null}
        <DataTable
          columns={[
            { key: "idx", label: "#" },
            { key: "name", label: "نام" },
            { key: "role", label: "نقش" },
            { key: "ops", label: "عملیات" },
          ]}
        >
          {activeMembers.length === 0 ? (
            <DataTableEmpty colSpan={4} message="هنوز عضوی ثبت نشده است." />
          ) : (
            activeMembers.map((member, index) => (
              <tr key={member.id} className="hover:bg-slate-50">
                <td className="px-3 py-3">{index + 1}</td>
                <td className="px-3 py-3 font-medium">{personName(member.user)}</td>
                <td className="px-3 py-3">
                  <Select value={member.role} onChange={(event) => changeRole(member, event.target.value)} disabled={busy}>
                    <option value="attendee">شرکت‌کننده</option>
                    <option value="presenter">ارائه‌دهنده</option>
                    <option value="host">میزبان</option>
                  </Select>
                </td>
                <td className="px-3 py-3">
                  <button
                    type="button"
                    className="rounded-lg border border-[var(--border)] px-2.5 py-1 text-xs font-medium text-red-700 hover:bg-red-50"
                    onClick={() => removeMember(member.id)}
                    disabled={busy}
                  >
                    حذف
                  </button>
                </td>
              </tr>
            ))
          )}
        </DataTable>
      </section>

      <section className="rounded-2xl border bg-white p-4">
        <h2 className="mb-3 font-bold">جلسات</h2>
        <div className="mb-4 grid gap-3 sm:grid-cols-[1fr_1fr_auto] sm:items-end">
          <Field label="شروع">
            <PersianDatePicker withTime value={startsAt} onChange={setStartsAt} />
          </Field>
          <Field label="پایان">
            <PersianDatePicker withTime value={endsAt} onChange={setEndsAt} />
          </Field>
          <Button type="button" onClick={createSession} disabled={busy || !startsAt || !endsAt}>
            ثبت جلسه
          </Button>
        </div>
        <DataTable
          columns={[
            { key: "idx", label: "#" },
            { key: "title", label: "عنوان" },
            { key: "when", label: "زمان" },
            { key: "status", label: "وضعیت" },
            { key: "ops", label: "عملیات" },
          ]}
        >
          {sessions.length === 0 ? (
            <DataTableEmpty colSpan={5} message="جلسه‌ای برای این اتاق نیست." />
          ) : (
            sessions.map((session, index) => (
              <tr key={session.id} className="hover:bg-slate-50">
                <td className="px-3 py-3">{index + 1}</td>
                <td className="px-3 py-3 font-medium">{session.title}</td>
                <td className="px-3 py-3 text-xs">{formatWhen(session.starts_at)}</td>
                <td className="px-3 py-3 text-xs">
                  {sessionStatusLabel(session.status)} · {provisionLabel(session.provision_status)}
                </td>
                <td className="px-3 py-3">
                  <Link href={`/virtual-classes/sessions/${session.id}`} className="text-xs font-medium text-[var(--primary)]">
                    مدیریت
                  </Link>
                </td>
              </tr>
            ))
          )}
        </DataTable>
      </section>
    </AppShell>
  );
}