"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ClassLink } from "@/components/virtual-classes/ClassLink";
import { PageHeader } from "@/components/layout/PageHeader";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { ApiError, apiGet, apiPost } from "@/lib/api";
import {
  attendanceLabel,
  formatMinutes,
  formatWhen,
  memberRoleLabel,
  onlineClassMessage,
  personName,
  provisionLabel,
  sessionStatusLabel,
} from "@/lib/online-class-labels";

type Session = {
  id: number;
  title: string;
  status: string;
  provision_status: string;
  last_error?: string | null;
  join_url?: string | null;
  starts_at?: string;
  ends_at?: string;
  room_id?: number;
  room?: { id: number; title: string } | null;
  provider?: { title?: string; driver_key?: string; capabilities?: Record<string, boolean> } | null;
};

type Participant = {
  id: number;
  name?: string | null;
  role?: string;
  sync_status?: string;
};

type Attendance = {
  id: number;
  status?: string;
  first_joined_at?: string | null;
  last_left_at?: string | null;
  duration_seconds?: number;
  join_count?: number;
  user?: { name?: string; first_name?: string; last_name?: string } | null;
};

type Recording = { id?: string | number; title?: string; name?: string; url?: string; link?: string };

export default function VirtualClassSessionPage() {
  const { id } = useParams<{ id: string }>();
  const [session, setSession] = useState<Session | null>(null);
  const [participants, setParticipants] = useState<Participant[]>([]);
  const [attendance, setAttendance] = useState<Attendance[]>([]);
  const [recordings, setRecordings] = useState<Recording[]>([]);
  const [recordingNote, setRecordingNote] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [origin, setOrigin] = useState("");

  const load = useCallback(async () => {
    try {
      const [sessionRow, workspace, attendanceRows] = await Promise.all([
        apiGet<Session>(`/online-class/sessions/${id}`),
        apiGet<{ participants?: Participant[] }>(`/online-class/sessions/${id}/workspace`),
        apiGet<Attendance[]>(`/online-class/sessions/${id}/attendance`),
      ]);
      setSession(sessionRow);
      setParticipants(workspace.participants ?? []);
      setAttendance(Array.isArray(attendanceRows) ? attendanceRows : []);
      setError(null);
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "خطا در بارگذاری جلسه"));
    }
  }, [id]);

  useEffect(() => {
    setOrigin(window.location.origin);
    load();
  }, [load]);

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

  const join = async () => {
    setBusy(true);
    setError(null);
    try {
      const res = await apiPost<{ join_url?: string }>(`/online-class/sessions/${id}/join`, { role: "host" });
      if (res.join_url) window.open(res.join_url, "_blank", "noopener,noreferrer");
      setNotice("لینک ورود میزبان ساخته شد و کلاس در تب جدید باز می‌شود.");
      await load();
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "ورود انجام نشد."));
    } finally {
      setBusy(false);
    }
  };

  const loadRecordings = async () => {
    setBusy(true);
    setRecordingNote(null);
    try {
      const rows = await apiGet<Recording[]>(`/online-class/sessions/${id}/recordings`);
      setRecordings(Array.isArray(rows) ? rows : []);
    } catch (err) {
      setRecordings([]);
      setRecordingNote(onlineClassMessage(err instanceof ApiError ? err.message : "ضبط‌ها دریافت نشد."));
    } finally {
      setBusy(false);
    }
  };

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

  const cancel = async () => {
    setBusy(true);
    try {
      await apiPost(`/online-class/sessions/${id}/cancel`, {});
      await load();
    } catch (err) {
      setError(onlineClassMessage(err instanceof ApiError ? err.message : "لغو انجام نشد."));
    } finally {
      setBusy(false);
    }
  };

  const entered = attendance.filter((row) => (row.join_count ?? 0) > 0 || row.first_joined_at);
  const shareUrl = origin && session?.room_id ? `${origin}/join/${session.room_id}` : null;

  return (
    <AppShell title="جلسه کلاس آنلاین">
      <PageHeader
        title={session?.title || "جلسه"}
        subtitle={`${sessionStatusLabel(session?.status)} · ${provisionLabel(session?.provision_status)} · ${formatWhen(session?.starts_at)} تا ${formatWhen(session?.ends_at)}`}
        actions={
          session?.room_id ? (
            <Link href={`/virtual-classes/rooms/${session.room_id}`} className="text-sm text-[var(--primary)]">
              بازگشت به اتاق
            </Link>
          ) : null
        }
      />
      {error ? <Alert tone="error">{error}</Alert> : null}
      {notice ? <Alert tone="success">{notice}</Alert> : null}

      <section className="mb-4 rounded-2xl border bg-white p-4">
        <h2 className="mb-3 font-bold">ورود به کلاس</h2>
        {session?.provision_status === "failed" ? (
          <p className="mb-3 text-sm text-red-700">{onlineClassMessage(session.last_error)}</p>
        ) : null}
        <ClassLink
          url={shareUrl}
          showOpen={false}
          hint="لینک کپی‌شده لینک مهمان است. مهمان نام را در سامانه وارد می‌کند و ادوبی دوباره نام نمی‌پرسد. ورود شما با دکمه میزبان و با نام مدرسه است."
        />
        <div className="mt-3 flex flex-wrap gap-2">
          <Button type="button" onClick={join} disabled={busy || session?.status === "cancelled"}>
            ورود به‌عنوان میزبان
          </Button>
          <Button type="button" variant="secondary" onClick={finalize} disabled={busy}>
            نهایی‌سازی حضور
          </Button>
          <Button type="button" variant="secondary" onClick={cancel} disabled={busy || session?.status === "cancelled"}>
            لغو جلسه
          </Button>
          <Button type="button" variant="secondary" onClick={loadRecordings} disabled={busy}>
            دریافت ضبط‌ها
          </Button>
        </div>
      </section>

      <section className="mb-4 rounded-2xl border bg-white p-4">
        <h2 className="mb-3 font-bold">کسانی که وارد شده‌اند</h2>
        {entered.length === 0 ? (
          <p className="text-sm text-[var(--muted)]">هنوز کسی از داخل سامانه وارد این جلسه نشده است.</p>
        ) : (
          <ul className="divide-y rounded-xl border">
            {entered.map((row) => (
              <li key={row.id} className="grid gap-1 px-3 py-2 text-sm sm:grid-cols-4">
                <span className="font-medium">{personName(row.user)}</span>
                <span>{attendanceLabel(row.status)}</span>
                <span>ورود: {formatWhen(row.first_joined_at)}</span>
                <span>
                  {formatMinutes(row.duration_seconds)} · {row.join_count ?? 0} بار
                </span>
              </li>
            ))}
          </ul>
        )}
      </section>

      <section className="mb-4 rounded-2xl border bg-white p-4">
        <h2 className="mb-3 font-bold">اعضای جلسه</h2>
        {participants.length === 0 ? (
          <p className="text-sm text-[var(--muted)]">عضوی به این جلسه منتقل نشده است. از صفحهٔ اتاق عضو اضافه کنید.</p>
        ) : (
          <ul className="divide-y rounded-xl border">
            {participants.map((person) => (
              <li key={person.id} className="flex items-center justify-between px-3 py-2 text-sm">
                <span>{person.name || "—"}</span>
                <span className="text-xs text-[var(--muted)]">
                  {memberRoleLabel(person.role)}
                  {person.sync_status ? ` · ${person.sync_status === "synced" ? "همگام" : person.sync_status}` : ""}
                </span>
              </li>
            ))}
          </ul>
        )}
      </section>

      {recordings.length > 0 || recordingNote ? (
        <section className="rounded-2xl border bg-white p-4">
          <h2 className="mb-3 font-bold">ضبط‌ها</h2>
          {recordingNote ? <p className="text-sm text-[var(--muted)]">{recordingNote}</p> : null}
          <ul className="space-y-2">
            {recordings.map((item, index) => {
              const href = item.url || item.link;
              const label = item.title || item.name || `ضبط ${index + 1}`;
              return (
                <li key={String(item.id ?? index)} className="text-sm">
                  {href ? (
                    <a href={href} target="_blank" rel="noreferrer" className="text-[var(--primary)]">
                      {label}
                    </a>
                  ) : (
                    label
                  )}
                </li>
              );
            })}
          </ul>
        </section>
      ) : null}
    </AppShell>
  );
}