import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { TextInput } from '@/Components/Forms/TextInput';

type School = {
  id: number;
  nameFa: string;
  nameEn: string;
  schoolCode: string;
  province: string;
  city: string;
  address: string;
  phone: string;
  status: string;
};

type GradeOption = {
  id: number;
  label: string;
};

const STUDENT_FIELDS = [
  { key: 'mobile', label: 'موبایل دانش‌آموز' },
  { key: 'national_code', label: 'کد ملی' },
  { key: 'father_mobile', label: 'موبایل پدر' },
  { key: 'mother_mobile', label: 'موبایل مادر' },
  { key: 'home_phone', label: 'تلفن منزل' },
  { key: 'address', label: 'آدرس' },
  { key: 'birth_date', label: 'تاریخ تولد' },
  { key: 'gender', label: 'جنسیت' },
];

const SMS_MODES = [
  { value: 'disabled', label: 'غیرفعال' },
  { value: 'instant', label: 'ارسال فوری' },
  { value: 'approval_required', label: 'نیاز به تایید مدیر' },
];

type Props = {
  school: School | null;
  allGrades: GradeOption[];
  enabledGradeIds: number[];
  requiredStudentFields: string[];
  absenceSmsMode: string;
};

export default function SchoolSettings({ school, allGrades, enabledGradeIds, requiredStudentFields, absenceSmsMode }: Props) {
  const form = useForm<{
    name_fa: string;
    name_en: string;
    city: string;
    province: string;
    address: string;
    phone: string;
    grade_ids: number[];
    required_student_fields: string[];
    absence_sms_mode: string;
  }>({
    name_fa: school?.nameFa ?? '',
    name_en: school?.nameEn ?? '',
    city: school?.city ?? '',
    province: school?.province ?? '',
    address: school?.address ?? '',
    phone: school?.phone ?? '',
    grade_ids: enabledGradeIds,
    required_student_fields: requiredStudentFields,
    absence_sms_mode: absenceSmsMode,
  });

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    form.put('/school/settings', { preserveScroll: true });
  }

  function toggleGrade(id: number) {
    const current = form.data.grade_ids;
    if (current.includes(id)) {
      form.setData('grade_ids', current.filter((g) => g !== id));
    } else {
      form.setData('grade_ids', [...current, id]);
    }
  }

  function toggleStudentField(key: string) {
    const current = form.data.required_student_fields;
    if (current.includes(key)) {
      form.setData('required_student_fields', current.filter((f) => f !== key));
    } else {
      form.setData('required_student_fields', [...current, key]);
    }
  }

  if (!school) {
    return (
      <AppLayout title="تنظیمات مدرسه">
        <section className="panel-card"><h2>اطلاعات مدرسه پیدا نشد</h2></section>
      </AppLayout>
    );
  }

  return (
    <AppLayout title="تنظیمات مدرسه">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>تنظیمات مدرسه</h2>
            <p>کد مدرسه قابل تغییر نیست: <strong>{school.schoolCode}</strong></p>
          </div>
        </section>

        <form className="panel-card" onSubmit={handleSubmit}>
          <h2>اطلاعات مدرسه</h2>
          <div className="form-grid">
            <TextInput label="نام فارسی مدرسه" value={form.data.name_fa} onChange={(e) => form.setData('name_fa', e.target.value)} error={form.errors.name_fa} />
            <TextInput label="نام انگلیسی (اختیاری)" value={form.data.name_en} onChange={(e) => form.setData('name_en', e.target.value)} />
            <TextInput label="استان" value={form.data.province} onChange={(e) => form.setData('province', e.target.value)} />
            <TextInput label="شهر" value={form.data.city} onChange={(e) => form.setData('city', e.target.value)} />
            <TextInput label="تلفن مدرسه" value={form.data.phone} onChange={(e) => form.setData('phone', e.target.value)} />
          </div>
          <label className="form-field">
            <span>آدرس</span>
            <textarea
              className="form-textarea"
              rows={3}
              value={form.data.address}
              onChange={(e) => form.setData('address', e.target.value)}
            />
          </label>

          {allGrades.length > 0 && (
            <>
              <h3>پایه‌های تحصیلی فعال مدرسه</h3>
              <p style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem' }}>فقط پایه‌های انتخاب‌شده در کلاس‌ها و رأی‌گیری‌ها قابل استفاده هستند.</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '1.5rem' }}>
                {allGrades.map((grade) => (
                  <label key={grade.id} className="check-row" style={{ background: 'var(--color-bg-soft)', borderRadius: 'var(--radius-sm)', padding: '0.4rem 0.8rem', border: '1px solid var(--color-border)', cursor: 'pointer' }}>
                    <input
                      type="checkbox"
                      checked={form.data.grade_ids.includes(grade.id)}
                      onChange={() => toggleGrade(grade.id)}
                    />
                    <span style={{ fontWeight: 600 }}>{grade.label}</span>
                  </label>
                ))}
              </div>
            </>
          )}

          <h3>تنظیمات SMS غیبت</h3>
          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem', marginBottom: '0.75rem' }}>نحوه ارسال SMS اطلاع‌رسانی غیبت را تنظیم کنید.</p>
          <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
            {SMS_MODES.map((mode) => (
              <label key={mode.value} className="check-row" style={{ background: 'var(--color-bg-soft)', borderRadius: 'var(--radius-sm)', padding: '0.4rem 0.8rem', border: '1px solid var(--color-border)', cursor: 'pointer' }}>
                <input
                  type="radio"
                  name="absence_sms_mode"
                  value={mode.value}
                  checked={form.data.absence_sms_mode === mode.value}
                  onChange={() => form.setData('absence_sms_mode', mode.value)}
                />
                <span style={{ fontWeight: 600, marginRight: '0.4rem' }}>{mode.label}</span>
              </label>
            ))}
          </div>

          <h3>فیلدهای اجباری پروفایل دانش‌آموز</h3>
          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem', marginBottom: '0.75rem' }}>دانش‌آموز در اولین ورود باید این فیلدها را تکمیل کند.</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '1.5rem' }}>
            {STUDENT_FIELDS.map((field) => (
              <label key={field.key} className="check-row" style={{ background: 'var(--color-bg-soft)', borderRadius: 'var(--radius-sm)', padding: '0.4rem 0.8rem', border: '1px solid var(--color-border)', cursor: 'pointer' }}>
                <input
                  type="checkbox"
                  checked={form.data.required_student_fields.includes(field.key)}
                  onChange={() => toggleStudentField(field.key)}
                />
                <span style={{ fontWeight: 600 }}>{field.label}</span>
              </label>
            ))}
          </div>

          <button className="btn btn-primary" disabled={form.processing} type="submit">
            <i className="bi bi-check-circle" /> ذخیره تغییرات
          </button>
        </form>
      </div>
    </AppLayout>
  );
}
