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

type CalendarItem = {
  id: number;
  kind: string;
  title: string;
  body: string | null;
  classroom: string;
  color: string;
  status: string;
  link: string | null;
  custom: boolean;
  startsAt: string;
};

type DayGroup = { day: string; dayLabel: string; items: CalendarItem[] };
type Classroom = { id: number; name: string };
type Props = { days: DayGroup[]; classes: Classroom[] };

const kindLabel: Record<string, string> = {
  homework: 'تکلیف',
  exam: 'امتحان',
  class: 'کلاس',
  todo: 'کار شخصی',
  note: 'یادداشت',
};

export default function TeacherCalendar({ days, classes }: Props) {
  const [showForm, setShowForm] = useState(false);
  const [form, setForm] = useState({
    title: '',
    body: '',
    kind: 'todo',
    classroom_id: '',
    starts_at: '',
    color: '#0EA678',
  });

  function submit(e: React.FormEvent) {
    e.preventDefault();
    router.post('/teacher/calendar', {
      ...form,
      classroom_id: form.classroom_id ? Number(form.classroom_id) : null,
    }, {
      preserveScroll: true,
      onSuccess: () => {
        setShowForm(false);
        setForm({ title: '', body: '', kind: 'todo', classroom_id: '', starts_at: '', color: '#0EA678' });
      },
    });
  }

  function destroy(id: number) {
    if (!confirm('آیتم حذف شود؟')) return;
    router.delete(`/teacher/calendar/${id}`, { preserveScroll: true });
  }

  return (
    <AppLayout title="تقویم کاری معلم">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-calendar-event" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />تقویم کاری</h2>
            <p>تکالیف، امتحان‌ها و یادداشت‌های شخصی شما در یک لیست روزانه.</p>
          </div>
          <button className="btn btn-primary" type="button" onClick={() => setShowForm((v) => !v)}>
            <i className="bi bi-plus-lg" /> آیتم جدید
          </button>
        </section>

        {showForm && (
          <section className="panel-card">
            <form onSubmit={submit} className="form-grid">
              <div className="form-group">
                <label className="form-label">عنوان *</label>
                <input className="form-input" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} required />
              </div>
              <div className="form-group">
                <label className="form-label">نوع</label>
                <select className="form-input" value={form.kind} onChange={(e) => setForm({ ...form, kind: e.target.value })}>
                  <option value="todo">کار شخصی</option>
                  <option value="exam">امتحان/یادآوری امتحان</option>
                  <option value="note">یادداشت</option>
                </select>
              </div>
              <div className="form-group">
                <label className="form-label">کلاس</label>
                <select className="form-input" value={form.classroom_id} onChange={(e) => setForm({ ...form, classroom_id: e.target.value })}>
                  <option value="">بدون کلاس</option>
                  {classes.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </div>
              <JalaliDateTimePicker label="تاریخ و ساعت" value={form.starts_at} onChange={(value) => setForm({ ...form, starts_at: value })} />
              <div className="form-group">
                <label className="form-label">رنگ</label>
                <input className="form-input" type="color" value={form.color} onChange={(e) => setForm({ ...form, color: e.target.value })} style={{ height: 42 }} />
              </div>
              <div className="form-group" style={{ gridColumn: '1 / -1' }}>
                <label className="form-label">توضیح</label>
                <textarea className="form-input" rows={3} value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })} />
              </div>
              <div style={{ gridColumn: '1 / -1', display: 'flex', gap: '0.6rem' }}>
                <button className="btn btn-primary" type="submit"><i className="bi bi-check2" /> ذخیره</button>
                <button className="btn btn-ghost" type="button" onClick={() => setShowForm(false)}>انصراف</button>
              </div>
            </form>
          </section>
        )}

        {days.length === 0 ? (
          <section className="panel-card">
            <p style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>برای بازه پیش رو آیتمی ثبت نشده است.</p>
          </section>
        ) : (
          days.map((day) => (
            <section key={day.day} className="panel-card">
              <h3 style={{ marginTop: 0, fontSize: '1rem' }}>{day.dayLabel}</h3>
              <div style={{ display: 'grid', gap: '0.55rem' }}>
                {day.items.map((item) => (
                  <div key={`${item.kind}-${item.id}-${item.title}`} style={{ border: `1px solid ${item.color}55`, borderRight: `5px solid ${item.color}`, borderRadius: 'var(--radius-sm)', padding: '0.7rem 0.85rem', display: 'flex', gap: '0.75rem', alignItems: 'center', background: `${item.color}10` }}>
                    <span className="badge" style={{ background: item.color, color: '#fff' }}>{kindLabel[item.kind] ?? item.kind}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <strong>{item.title}</strong>
                      <div style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>{item.startsAt} · {item.classroom}</div>
                      {item.body && <div style={{ color: 'var(--color-text-muted)', fontSize: '0.82rem', marginTop: 2 }}>{item.body}</div>}
                    </div>
                    {item.link && <Link href={item.link} className="btn btn-ghost btn-sm"><i className="bi bi-box-arrow-up-left" /></Link>}
                    {item.custom && <button className="btn btn-ghost btn-sm" type="button" onClick={() => destroy(item.id)}><i className="bi bi-trash" /></button>}
                  </div>
                ))}
              </div>
            </section>
          ))
        )}
      </div>
    </AppLayout>
  );
}