import { useState } from 'react';
import { useForm, router, Link, usePage } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { TextInput } from '@/Components/Forms/TextInput';
import { SelectInput } from '@/Components/Forms/SelectInput';
import { JalaliDateTimePicker } from '@/Components/Forms/JalaliDateTimePicker';

type OnlineClass = {
  id: number;
  roomKey: string;
  title: string;
  meetingUrl: string | null;
  isInternal: boolean;
  status: 'scheduled' | 'live' | 'ended';
  startsAt: string;
  endsAt: string;
  classroom: string;
  subject: string;
  teacher: string;
  joinCount: number;
};

type Classroom = { id: number; name: string };
type Subject = { id: number; name: string };

type Props = {
  classes: OnlineClass[];
  classrooms: Classroom[];
  subjects: Subject[];
};

const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
  scheduled: { label: 'زمان‌بندی شده', cls: 'badge-muted' },
  live: { label: 'در حال برگزاری', cls: 'badge-success' },
  ended: { label: 'پایان یافته', cls: 'badge-muted' },
};

export default function OnlineClasses({ classes, classrooms, subjects }: Props) {
  const { auth } = usePage().props as unknown as { auth: { user: { roleKey?: string; role_key?: string } | null } };
  const canManage = (auth.user?.roleKey ?? auth.user?.role_key) !== 'teacher';
  const [showForm, setShowForm] = useState(false);
  const [classType, setClassType] = useState<'internal' | 'external'>('internal');

  const form = useForm({
    classroom_id: '',
    subject_id: '',
    title: '',
    meeting_url: '',
    starts_at: '',
    ends_at: '',
  });

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    form.transform((data) => ({
      ...data,
      meeting_url: classType === 'internal' ? '' : data.meeting_url,
    }));
    form.post('/school/online-classes', {
      onSuccess: () => {
        form.reset();
        setShowForm(false);
      },
    });
  }

  function handleDelete(id: number, title: string) {
    if (!confirm(`حذف کلاس آنلاین «${title}»؟`)) return;
    router.delete(`/school/online-classes/${id}`, { preserveScroll: true });
  }

  const classroomOptions = [
    { value: '', label: 'انتخاب کلاس...' },
    ...classrooms.map((c) => ({ value: String(c.id), label: c.name })),
  ];

  const subjectOptions = [
    { value: '', label: 'بدون درس' },
    ...subjects.map((s) => ({ value: String(s.id), label: s.name })),
  ];

  return (
    <AppLayout title="کلاس‌های آنلاین">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>کلاس‌های آنلاین</h2>
            <p>کلاس داخلی (اتاق کلاس سامانه با چت، تخته و فایل) یا لینک جلسه خارجی.</p>
          </div>
          {canManage && (
            <button className="btn btn-primary" type="button" onClick={() => setShowForm(!showForm)}>
              <i className="bi bi-camera-video" /> کلاس جدید
            </button>
          )}
        </section>

        {showForm && (
          <form className="panel-card" onSubmit={handleSubmit}>
            <h2>افزودن کلاس آنلاین</h2>
            <div className="form-grid">
              <label className="form-field">
                <span>نوع کلاس</span>
                <select value={classType} onChange={(e) => setClassType(e.target.value as 'internal' | 'external')}>
                  <option value="internal">کلاس داخلی سامانه (چت، تخته، فایل، حضور خودکار)</option>
                  <option value="external">لینک خارجی (اسکای‌روم، ادوبی و ...)</option>
                </select>
              </label>
              <SelectInput
                label="کلاس"
                options={classroomOptions}
                value={form.data.classroom_id}
                onChange={(e) => form.setData('classroom_id', e.target.value)}
              />
              <SelectInput
                label="درس (اختیاری)"
                options={subjectOptions}
                value={form.data.subject_id}
                onChange={(e) => form.setData('subject_id', e.target.value)}
              />
              <TextInput
                label="عنوان جلسه"
                value={form.data.title}
                onChange={(e) => form.setData('title', e.target.value)}
                error={form.errors.title}
              />
              {classType === 'external' && (
                <TextInput
                  label="لینک جلسه (URL)"
                  type="url"
                  value={form.data.meeting_url}
                  onChange={(e) => form.setData('meeting_url', e.target.value)}
                  error={form.errors.meeting_url}
                />
              )}
              <JalaliDateTimePicker
                label="شروع جلسه"
                value={form.data.starts_at}
                onChange={(value) => form.setData('starts_at', value)}
              />
              <JalaliDateTimePicker
                label="پایان جلسه"
                value={form.data.ends_at}
                onChange={(value) => form.setData('ends_at', value)}
              />
            </div>
            <div className="action-row">
              <button className="btn btn-primary" disabled={form.processing} type="submit">ثبت</button>
              <button className="btn btn-ghost" type="button" onClick={() => setShowForm(false)}>لغو</button>
            </div>
          </form>
        )}

        {classes.length > 0 ? (
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th>عنوان</th>
                  <th>وضعیت</th>
                  <th>کلاس</th>
                  <th>درس</th>
                  <th>شروع</th>
                  <th>ورودی‌ها</th>
                  <th>عملیات</th>
                </tr>
              </thead>
              <tbody>
                {classes.map((c) => {
                  const badge = STATUS_BADGE[c.status] ?? STATUS_BADGE.scheduled;
                  return (
                    <tr key={c.id}>
                      <td>
                        {c.isInternal ? (
                          <span><i className="bi bi-easel2" style={{ marginLeft: '0.35rem' }} />{c.title}</span>
                        ) : (
                          <a href={c.meetingUrl ?? '#'} target="_blank" rel="noreferrer" className="btn btn-ghost btn-sm">
                            <i className="bi bi-box-arrow-up-left" /> {c.title}
                          </a>
                        )}
                      </td>
                      <td>
                        {c.isInternal
                          ? <span className={`badge ${badge.cls}`}>{badge.label}</span>
                          : <span className="badge badge-muted">لینک خارجی</span>}
                      </td>
                      <td>{c.classroom}</td>
                      <td>{c.subject}</td>
                      <td>{c.startsAt}</td>
                      <td style={{ textAlign: 'center' }}>
                        <Link href={`/school/online-classes/${c.id}/logs`} className="badge badge-muted" style={{ textDecoration: 'none' }}>
                          {c.joinCount} نفر
                        </Link>
                      </td>
                      <td>
                        <div className="action-row" style={{ gap: '0.35rem' }}>
                          {c.isInternal && (
                            <>
                              <a href={`/class-room/${c.roomKey}`} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-sm">
                                <i className="bi bi-door-open" /> ورود به کلاس
                              </a>
                              <Link href={`/school/online-classes/${c.id}/logs`} className="btn btn-soft btn-sm">
                                <i className="bi bi-clock-history" /> حضور و ضبط‌ها
                              </Link>
                            </>
                          )}
                          {canManage && (
                            <button
                              className="btn btn-danger-ghost btn-sm"
                              type="button"
                              onClick={() => handleDelete(c.id, c.title)}
                            >
                              <i className="bi bi-trash" /> حذف
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        ) : (
          <section className="panel-card">
            <h2>هنوز کلاس آنلاینی ثبت نشده</h2>
            <p>از دکمه «کلاس جدید» اولین جلسه را ثبت کن.</p>
          </section>
        )}
      </div>
    </AppLayout>
  );
}