import { Link, useForm, usePage } from '@inertiajs/react';
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout';
import { Save, Loader2 } from 'lucide-react';
import type { PageProps } from '@/types';
import { getLocalDateString } from '@/lib/utils';

interface Journal {
    id: number;
    date: string;
    material: string;
    notes: string | null;
    class_id: number | string;
    subject_id: number | string;
    attendance_session_id?: number | null;
}

interface AttendanceSession {
    id: number;
    date: string;
    session_start: number;
    session_end: number;
    class: { id: number; name: string };
    subject: { id: number; name: string };
}

interface Props extends PageProps {
    classes: { id: number; name: string }[];
    subjects: { id: number; name: string }[];
    attendanceSessions?: AttendanceSession[];
    journal: Journal | null;
    isRemote?: boolean;
}

export default function JournalForm() {
    const { classes, subjects, journal, attendanceSessions } = usePage<Props>().props;
    const isEdit = !!journal;

    const { data, setData, post, put, processing, errors } = useForm({
        date: journal?.date || getLocalDateString(),
        class_id: journal?.class_id || '',
        subject_id: journal?.subject_id || '',
        material: journal?.material || '',
        notes: journal?.notes || '',
        attendance_session_id: journal?.attendance_session_id || '',
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (isEdit) {
            put(`/journal/${journal.id}`);
        } else {
            post('/journal');
        }
    };

    return (
        <AuthenticatedLayout
            title={isEdit ? 'Edit Jurnal Mengajar' : 'Tambah Jurnal Baru'}
            backHref="/journal"
        >
            <div className="mx-auto max-w-2xl space-y-6">
                <div className="glass rounded-2xl p-6">
                    <form onSubmit={handleSubmit} className="space-y-6">
                        <div className="grid gap-6 sm:grid-cols-2">
                            <div className="space-y-2">
                                <label className="text-sm font-medium">Tanggal</label>
                                <input
                                    type="date"
                                    className="form-input w-full rounded-xl disabled:opacity-50"
                                    value={data.date}
                                    onChange={(e) => setData('date', e.target.value)}
                                    required
                                    disabled={isEdit}
                                />
                                {errors.date && <p className="text-sm text-rose-400">{errors.date}</p>}
                            </div>

                            <div className="space-y-2">
                                <label className="text-sm font-medium">Mata Pelajaran</label>
                                <select
                                    className="form-input w-full rounded-xl disabled:opacity-50"
                                    value={data.subject_id}
                                    onChange={(e) => setData('subject_id', e.target.value)}
                                    required
                                    disabled={isEdit}
                                >
                                    <option value="" disabled>Pilih Mapel</option>
                                    {subjects.map((sub) => (
                                        <option key={sub.id} value={sub.id}>{sub.name}</option>
                                    ))}
                                </select>
                                {errors.subject_id && <p className="text-sm text-rose-400">{errors.subject_id}</p>}
                            </div>

                            <div className="space-y-2 sm:col-span-2">
                                <label className="text-sm font-medium">Kelas</label>
                                <select
                                    className="form-input w-full rounded-xl disabled:opacity-50"
                                    value={data.class_id}
                                    onChange={(e) => setData('class_id', e.target.value)}
                                    required
                                    disabled={isEdit}
                                >
                                    <option value="" disabled>Pilih Kelas</option>
                                    {classes.map((cls) => (
                                        <option key={cls.id} value={cls.id}>{cls.name}</option>
                                    ))}
                                </select>
                                {errors.class_id && <p className="text-sm text-rose-400">{errors.class_id}</p>}
                            </div>

                            {!isEdit && (
                                <div className="space-y-2 sm:col-span-2">
                                    <label className="text-sm font-medium">Tautkan ke Sesi Absensi (Opsional)</label>
                                    <select
                                        className="form-input w-full rounded-xl"
                                        value={data.attendance_session_id}
                                        onChange={(e) => setData('attendance_session_id', e.target.value)}
                                    >
                                        <option value="">Tidak ditautkan</option>
                                        {(attendanceSessions || []).filter((s: AttendanceSession) => 
                                            (!data.class_id || s.class.id.toString() === data.class_id.toString()) && 
                                            (!data.subject_id || s.subject.id.toString() === data.subject_id.toString())
                                        ).map((session: AttendanceSession) => (
                                            <option key={session.id} value={session.id}>
                                                {session.class.name} - {session.subject.name} - JP {session.session_start}{session.session_start !== session.session_end ? `-${session.session_end}` : ''}
                                            </option>
                                        ))}
                                    </select>
                                    {errors.attendance_session_id && <p className="text-sm text-rose-400">{errors.attendance_session_id}</p>}
                                    <p className="text-xs text-emerald-400 font-medium mt-1">✨ Menautkan sesi absensi/booking akan meng-update catatan jurnal mengajar di sistem KALASI'U secara otomatis.</p>
                                </div>
                            )}
                        </div>

                        <div className="space-y-2">
                            <label className="text-sm font-medium">Materi Pelajaran</label>
                            <textarea
                                className="form-input w-full rounded-xl"
                                rows={4}
                                value={data.material}
                                onChange={(e) => setData('material', e.target.value)}
                                placeholder="Tuliskan materi yang diajarkan..."
                                required
                            ></textarea>
                            {errors.material && <p className="text-sm text-rose-400">{errors.material}</p>}
                        </div>

                        <div className="space-y-2">
                            <label className="text-sm font-medium">Catatan / Hambatan (Opsional)</label>
                            <textarea
                                className="form-input w-full rounded-xl"
                                rows={3}
                                value={data.notes}
                                onChange={(e) => setData('notes', e.target.value)}
                                placeholder="Misal: Proyektor rusak, atau banyak siswa izin..."
                            ></textarea>
                            {errors.notes && <p className="text-sm text-rose-400">{errors.notes}</p>}
                        </div>

                        <div className="flex justify-end gap-4 pt-4 border-t border-surface-hover">
                            <Link
                                href="/journal"
                                className="rounded-xl px-4 py-2 font-semibold text-text-muted hover:bg-surface transition-colors"
                            >
                                Batal
                            </Link>
                            <button
                                type="submit"
                                disabled={processing}
                                className="flex items-center gap-2 rounded-xl bg-primary-500 px-6 py-2 font-semibold text-white transition-colors hover:bg-primary-400 disabled:opacity-50 glow-primary"
                            >
                                {processing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                                Simpan Jurnal
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}