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;
  schoolType: string | null;
};

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

// موبایل پدر/مادر اینجا نیست — با «شماره تماس ولی» جداگانه تنظیم می‌شود.
const STUDENT_FIELDS = [
  { key: 'mobile', label: 'موبایل دانش‌آموز' },
  { key: 'national_code', label: 'کد ملی' },
  { key: 'home_phone', label: 'تلفن منزل' },
  { key: 'address', label: 'آدرس' },
  { key: 'birth_date', label: 'تاریخ تولد' },
  { key: 'gender', label: 'جنسیت' },
];

const PARENT_MODES = [
  { value: 'none', label: 'هیچ‌کدام', hint: 'شماره ولی اصلاً پرسیده نمی‌شود.' },
  { value: 'either', label: 'پدر یا مادر', hint: 'یک شماره کافی است؛ دانش‌آموز انتخاب می‌کند.' },
  { value: 'father', label: 'فقط پدر', hint: 'فقط موبایل پدر پرسیده می‌شود.' },
  { value: 'mother', label: 'فقط مادر', hint: 'فقط موبایل مادر پرسیده می‌شود.' },
  { value: 'both', label: 'هم پدر هم مادر', hint: 'هر دو شماره الزامی است.' },
];

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

type QualThreshold = { label: string; min: number; max: number };

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

export default function SchoolSettings({ school, allGrades, enabledGradeIds, requiredStudentFields, parentMobileRequirement, absenceSmsMode, twoFactorAdminsEnabled, qualThresholds }: 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[];
    parent_mobile_requirement: string;
    absence_sms_mode: string;
    two_factor_admins_enabled: boolean;
    qual_thresholds: QualThreshold[];
  }>({
    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,
    parent_mobile_requirement: parentMobileRequirement,
    absence_sms_mode: absenceSmsMode,
    two_factor_admins_enabled: twoFactorAdminsEnabled,
    qual_thresholds: qualThresholds,
  });

  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>
              {school?.schoolType ? (
                <>
                  <div style={{ background: '#eff6ff', border: '1px solid #bfdbfe', borderRadius: 8, padding: '0.6rem 0.9rem', marginBottom: '0.75rem', color: '#1e40af', fontSize: '0.875rem' }}>
                    <i className="bi bi-shield-lock" /> پایه‌های مجاز این مدرسه توسط مدیر سامانه تعیین می‌شود و از اینجا قابل تغییر نیست.
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.6rem', marginBottom: '1.5rem' }}>
                    {allGrades.map((grade) => {
                      const purchased = enabledGradeIds.includes(grade.id);
                      return (
                        <div
                          key={grade.id}
                          title={!purchased ? 'برای دسترسی به پایه‌های بیشتر با مالک سامانه تماس بگیرید' : undefined}
                          style={{
                            padding: '0.4rem 0.8rem',
                            borderRadius: 8,
                            border: `2px solid ${purchased ? 'var(--color-primary)' : 'var(--color-border)'}`,
                            background: purchased ? 'var(--color-bg-soft)' : 'var(--color-surface)',
                            color: purchased ? 'var(--color-primary)' : 'var(--color-text-muted)',
                            fontWeight: 700,
                            fontSize: '0.85rem',
                            display: 'flex',
                            alignItems: 'center',
                            gap: 6,
                            cursor: !purchased ? 'help' : 'default',
                            opacity: !purchased ? 0.55 : 1,
                          }}
                        >
                          <i className={purchased ? 'bi bi-check-circle-fill' : 'bi bi-lock-fill'} />
                          {grade.label}
                          {!purchased && <span style={{ fontSize: '0.7rem', marginRight: 2 }}>— بسته ندارید</span>}
                        </div>
                      );
                    })}
                  </div>
                  <p style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem', marginBottom: '1.5rem' }}>
                    <i className="bi bi-telephone" /> برای افزودن پایه‌های بیشتر با مالک سامانه تماس بگیرید.
                  </p>
                </>
              ) : (
                <>
                  <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>تنظیمات پیامک غیبت</h3>
          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem', marginBottom: '0.75rem' }}>نحوه ارسال پیامک اطلاع‌رسانی غیبت را تنظیم کنید.</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>
          <label className="check-row" style={{ background: 'var(--color-bg-soft)', borderRadius: 'var(--radius-sm)', padding: '0.6rem 0.9rem', border: '1px solid var(--color-border)', cursor: 'pointer', marginBottom: '1.5rem' }}>
            <input
              type="checkbox"
              checked={form.data.two_factor_admins_enabled}
              onChange={(e) => form.setData('two_factor_admins_enabled', e.target.checked)}
            />
            <span style={{ fontWeight: 700 }}>ورود دومرحله‌ای پیامکی برای مدیران مدرسه فعال باشد</span>
          </label>

          <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>

          <h3>شماره تماس ولی</h3>
          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem', marginBottom: '0.75rem' }}>
            در اولین ورود، کدام شماره ولی از دانش‌آموز پرسیده شود؟ گزینه‌های غیرفعال اصلاً نمایش داده نمی‌شوند.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '0.6rem', marginBottom: '1.5rem' }}>
            {PARENT_MODES.map((mode) => {
              const selected = form.data.parent_mobile_requirement === mode.value;
              return (
                <label
                  key={mode.value}
                  style={{
                    display: 'flex',
                    alignItems: 'flex-start',
                    gap: '0.5rem',
                    padding: '0.7rem 0.85rem',
                    borderRadius: 'var(--radius-md)',
                    border: `1.5px solid ${selected ? 'var(--color-primary)' : 'var(--color-border)'}`,
                    background: selected ? 'var(--color-primary-soft)' : 'var(--color-bg-soft)',
                    cursor: 'pointer',
                    transition: 'border-color 0.15s, background 0.15s',
                  }}
                >
                  <input
                    type="radio"
                    name="parent_mobile_requirement"
                    value={mode.value}
                    checked={selected}
                    onChange={() => form.setData('parent_mobile_requirement', mode.value)}
                    style={{ marginTop: '0.2rem' }}
                  />
                  <span>
                    <span style={{ display: 'block', fontWeight: 700, fontSize: '0.9rem' }}>{mode.label}</span>
                    <span style={{ display: 'block', fontSize: '0.78rem', color: 'var(--color-text-muted)', marginTop: '0.15rem' }}>
                      {mode.hint}
                    </span>
                  </span>
                </label>
              );
            })}
          </div>

          {school?.schoolType === 'ebtedaee' && (
            <>
              <h3>بازه‌های نمرات کیفی</h3>
              <p style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem', marginBottom: '0.75rem' }}>
                هر بازه مشخص می‌کند چه نمره‌ای معادل کدام ارزیابی کیفی است. معلم می‌تواند نمره عددی وارد کند و سیستم برچسب را خودکار تعیین می‌کند.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '1.5rem' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '0.5rem', fontWeight: 700, fontSize: '0.8rem', color: 'var(--color-text-muted)', padding: '0 0.25rem' }}>
                  <span>ارزیابی کیفی</span><span>از نمره</span><span>تا نمره</span>
                </div>
                {form.data.qual_thresholds.map((t, i) => (
                  <div key={t.label} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '0.5rem', alignItems: 'center' }}>
                    <div style={{
                      padding: '0.4rem 0.75rem', borderRadius: 8,
                      background: 'var(--color-bg-soft)', border: '1px solid var(--color-border)',
                      fontWeight: 700, fontSize: '0.875rem',
                    }}>
                      {t.label}
                    </div>
                    <input
                      type="number"
                      className="field-input"
                      min="0"
                      max="100"
                      step="0.5"
                      value={t.min}
                      onChange={(e) => {
                        const updated = [...form.data.qual_thresholds];
                        updated[i] = { ...updated[i], min: parseFloat(e.target.value) || 0 };
                        form.setData('qual_thresholds', updated);
                      }}
                    />
                    <input
                      type="number"
                      className="field-input"
                      min="0"
                      max="100"
                      step="0.5"
                      value={t.max}
                      onChange={(e) => {
                        const updated = [...form.data.qual_thresholds];
                        updated[i] = { ...updated[i], max: parseFloat(e.target.value) || 0 };
                        form.setData('qual_thresholds', updated);
                      }}
                    />
                  </div>
                ))}
              </div>
            </>
          )}

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