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

type Props = {
  settings: {
    assetCdnUrl: string;
    enamadHtml: string;
    samandehiHtml: string;
    achievementsJson: string;
    demoEnabled: boolean;
    demoResetMinutes: number;
  };
};

const defaultAchievements = JSON.stringify([
  { title: 'مدارس فعال', subtitle: 'سامانه آماده اتصال مدارس جدید', icon: 'bi-buildings', url: '/features' },
  { title: 'امنیت داده', subtitle: 'نشست‌ها، لاگ‌ها و دسترسی‌های نقش‌محور', icon: 'bi-shield-check', url: '/privacy' },
], null, 2);

export default function LandingSettings({ settings }: Props) {
  const form = useForm({
    asset_cdn_url: settings.assetCdnUrl,
    landing_enamad_html: settings.enamadHtml,
    landing_samandehi_html: settings.samandehiHtml,
    landing_achievements_json: settings.achievementsJson || defaultAchievements,
    demo_school_enabled: settings.demoEnabled,
    demo_school_reset_minutes: settings.demoResetMinutes,
  });

  function submit(e: React.FormEvent) {
    e.preventDefault();
    form.put('/super-admin/landing-settings', { preserveScroll: true });
  }

  return (
    <AppLayout title="تنظیمات صفحه عمومی">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>تنظیمات صفحه عمومی</h2>
            <p>CDN، نمادها، افتخارات و مدرسه دمو</p>
          </div>
        </section>

        <form className="panel-card" onSubmit={submit}>
          <div className="form-grid">
            <label className="form-field">
              <span>CDN / Asset URL</span>
              <input className="form-input" value={form.data.asset_cdn_url} onChange={(e) => form.setData('asset_cdn_url', e.target.value)} placeholder="https://cdn.example.com" />
              {form.errors.asset_cdn_url && <small className="field-error">{form.errors.asset_cdn_url}</small>}
            </label>
            <label className="form-field">
              <span>Reset دمو (دقیقه)</span>
              <input className="form-input" type="number" min="10" max="1440" value={form.data.demo_school_reset_minutes} onChange={(e) => form.setData('demo_school_reset_minutes', Number(e.target.value))} />
            </label>
            <label className="check-row" style={{ alignSelf: 'end' }}>
              <input type="checkbox" checked={form.data.demo_school_enabled} onChange={(e) => form.setData('demo_school_enabled', e.target.checked)} />
              <span>مدرسه دمو فعال باشد</span>
            </label>
          </div>

          <label className="form-field">
            <span>کد eNAMAD</span>
            <textarea className="form-textarea" rows={4} value={form.data.landing_enamad_html} onChange={(e) => form.setData('landing_enamad_html', e.target.value)} />
          </label>

          <label className="form-field">
            <span>کد Samandehi</span>
            <textarea className="form-textarea" rows={4} value={form.data.landing_samandehi_html} onChange={(e) => form.setData('landing_samandehi_html', e.target.value)} />
          </label>

          <label className="form-field">
            <span>افتخارات / مدال‌ها JSON</span>
            <textarea className="form-textarea" dir="ltr" rows={8} value={form.data.landing_achievements_json} onChange={(e) => form.setData('landing_achievements_json', e.target.value)} />
            {form.errors.landing_achievements_json && <small className="field-error">{form.errors.landing_achievements_json}</small>}
          </label>

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