import React, { useEffect, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import { formatDateTime } from '../lib/utils';
import { Cog6ToothIcon, CheckCircleIcon } from '@heroicons/react/24/outline';

interface TaxHistoryRow {
  tax_percent: number;
  enabled: boolean;
  changed_by_name: string | null;
  changed_at: number;
}

// ── Schema ────────────────────────────────────────────────────────────────

const schema = z.object({
  site_name:                  z.string().min(1, 'نام سایت الزامی است'),
  support_phone:              z.string(),
  max_cancel_hours_before:    z.string(),
  appointment_reminder_hours: z.string(),
  // financial engine
  appointment_commission_enabled: z.string(),
  upgrade_commission_enabled:     z.string(),
  upgrade_commission_percent:     z.string(),
  tax_enabled:                    z.string(),
  tax_percent:                    z.string(),
  sms_panel_fee_rials:            z.string(),
  appointment_fee_rials:          z.string(),
  // payment gateways
  payment_test_mode:  z.string(),
  mellat_terminal_id: z.string(),
  mellat_username:    z.string(),
  mellat_password:    z.string(),
  sep_terminal_id:    z.string(),
  // sms
  sms_provider:       z.string(),
  kavenegar_api_key:  z.string(),
  kavenegar_sender:   z.string(),
  sms_price_rials:    z.string(),
});

type FormValues = z.infer<typeof schema>;

interface Settings {
  site_name: string;
  support_phone: string;
  max_cancel_hours_before: string;
  appointment_reminder_hours: string;
  appointment_commission_enabled: string;
  upgrade_commission_enabled: string;
  upgrade_commission_percent: string;
  tax_enabled: string;
  tax_percent: string;
  sms_panel_fee_rials: string;
  appointment_fee_rials: string;
  payment_test_mode: string;
  mellat_terminal_id: string;
  mellat_username: string;
  mellat_password: string;
  sep_terminal_id: string;
  sms_provider: string;
  kavenegar_api_key: string;
  kavenegar_sender: string;
  sms_price_rials: string;
}

// ── Component ─────────────────────────────────────────────────────────────

export default function SettingsPage() {
  const qc = useQueryClient();
  const [showMellatPassword, setShowMellatPassword] = useState(false);
  const [showKavenegarKey, setShowKavenegarKey] = useState(false);

  const { data, isLoading } = useQuery({
    queryKey: ['admin-settings'],
    queryFn: () => api.get<ApiResponse<Settings>>('/api/v1/admin/settings'),
    staleTime: 30_000,
  });

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const settings: Settings | undefined = (data?.data as any)?.data ?? data?.data;

  const taxHistoryQ = useQuery({
    queryKey: ['tax-history'],
    queryFn: () => api.get<ApiResponse<TaxHistoryRow[]>>('/api/v1/admin/settings/tax-history'),
    staleTime: 30_000,
  });
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const taxHistory: TaxHistoryRow[] = (taxHistoryQ.data?.data as any)?.data ?? taxHistoryQ.data?.data ?? [];

  const {
    register,
    handleSubmit,
    reset,
    watch,
    setValue,
    formState: { errors, isDirty },
  } = useForm<FormValues>({ resolver: zodResolver(schema) });

  useEffect(() => {
    if (settings) {
      reset({
        site_name:                  settings.site_name ?? 'ClinicPro',
        support_phone:              settings.support_phone ?? '',
        max_cancel_hours_before:    settings.max_cancel_hours_before ?? '24',
        appointment_reminder_hours: settings.appointment_reminder_hours ?? '2',
        appointment_commission_enabled: settings.appointment_commission_enabled ?? '0',
        upgrade_commission_enabled:     settings.upgrade_commission_enabled ?? '0',
        upgrade_commission_percent:     settings.upgrade_commission_percent ?? '20',
        tax_enabled:                    settings.tax_enabled ?? '0',
        tax_percent:                    settings.tax_percent ?? '10',
        sms_panel_fee_rials:            settings.sms_panel_fee_rials ?? '1500000',
        appointment_fee_rials:          settings.appointment_fee_rials ?? '150000',
        payment_test_mode:          settings.payment_test_mode ?? '0',
        mellat_terminal_id:         settings.mellat_terminal_id ?? '',
        mellat_username:            settings.mellat_username ?? '',
        mellat_password:            settings.mellat_password ?? '',
        sep_terminal_id:            settings.sep_terminal_id ?? '',
        sms_provider:               settings.sms_provider ?? 'kavenegar',
        kavenegar_api_key:          settings.kavenegar_api_key ?? '',
        kavenegar_sender:           settings.kavenegar_sender ?? '',
        sms_price_rials:            settings.sms_price_rials ?? '500',
      });
    }
  }, [settings, reset]);

  const mutation = useMutation({
    mutationFn: (values: FormValues) =>
      api.patch<ApiResponse<Settings>>('/api/v1/admin/settings', values),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['admin-settings'] });
      qc.invalidateQueries({ queryKey: ['tax-history'] });
    },
  });

  const paymentTestMode    = watch('payment_test_mode') === '1';
  const apptCommissionEnabled = watch('appointment_commission_enabled') === '1';
  const upgradeCommissionEnabled = watch('upgrade_commission_enabled') === '1';
  const taxEnabled = watch('tax_enabled') === '1';

  const onSubmit = (values: FormValues) => {
    mutation.mutate(values);
  };

  if (isLoading) {
    return (
      <div className="fade-in">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="card card-pad">
              <div className="skeleton" style={{ height: 200, borderRadius: 'var(--r)' }} />
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in">
      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
        <div>
          <h1 className="section-title">تنظیمات سایت</h1>
          <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>پیکربندی کلی پلتفرم</div>
        </div>
        {mutation.isSuccess && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--success)', fontSize: 13.5 }}>
            <CheckCircleIcon style={{ width: 18, height: 18 }} />
            تنظیمات ذخیره شد
          </div>
        )}
      </div>

      <form onSubmit={handleSubmit(onSubmit)}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>

          {/* اطلاعات پایه */}
          <div className="card card-pad">
            <div className="card-title-row" style={{ marginBottom: '1.25rem' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div className="ico" style={{ background: 'var(--primary-soft)', color: 'var(--primary)', width: 36, height: 36, borderRadius: 10 }}>
                  <Cog6ToothIcon style={{ width: 18, height: 18 }} />
                </div>
                <h3 style={{ fontSize: 15 }}>اطلاعات پایه</h3>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
              <div>
                <label style={{ fontSize: 13, fontWeight: 500, display: 'block', marginBottom: 6 }}>نام سایت</label>
                <input
                  {...register('site_name')}
                  style={{
                    width: '100%', height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)',
                    border: `1px solid ${errors.site_name ? 'var(--danger)' : 'var(--border)'}`,
                    background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5,
                    boxSizing: 'border-box',
                  }}
                />
                {errors.site_name && <p style={{ color: 'var(--danger)', fontSize: 12, marginTop: 4 }}>{errors.site_name.message}</p>}
              </div>

              <div>
                <label style={{ fontSize: 13, fontWeight: 500, display: 'block', marginBottom: 6 }}>شماره پشتیبانی</label>
                <input
                  {...register('support_phone')}
                  dir="ltr"
                  placeholder="021-12345678"
                  style={{
                    width: '100%', height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)',
                    border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5,
                    boxSizing: 'border-box',
                  }}
                />
              </div>
            </div>
          </div>

          {/* موتور مالی نمایندگی */}
          <div className="card card-pad">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: '1.25rem' }}>
              <div className="ico" style={{ background: 'var(--info-bg)', color: 'var(--info)', width: 36, height: 36, borderRadius: 10 }}>
                <span style={{ fontSize: 16 }}>🧮</span>
              </div>
              <h3 style={{ fontSize: 15 }}>موتور مالی نمایندگی</h3>
            </div>

            <p className="muted" style={{ fontSize: 12, marginBottom: '1rem', lineHeight: 1.7 }}>
              ترتیب کسرها: ابتدا هزینه پنل پیامک، سپس مالیات بر ارزش افزوده (استخراجی از مبلغ شامل مالیات)،
              و در نهایت پورسانت نماینده از مبلغِ خالصِ پس از مالیات محاسبه می‌شود.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>

              {/* پورسانت نوبت */}
              <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
                <input type="hidden" {...register('appointment_commission_enabled')} />
                <div style={{ position: 'relative', width: 44, height: 24, flexShrink: 0 }}
                  onClick={() => setValue('appointment_commission_enabled', apptCommissionEnabled ? '0' : '1', { shouldDirty: true })}>
                  <div style={{ width: 44, height: 24, borderRadius: 12, background: apptCommissionEnabled ? 'var(--primary)' : 'var(--border)', transition: 'background .2s', position: 'relative' }}>
                    <div style={{ position: 'absolute', top: 2, width: 20, height: 20, borderRadius: '50%', background: 'var(--surface)', transition: 'right .2s', right: apptCommissionEnabled ? 2 : 22, boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
                  </div>
                </div>
                <span style={{ fontSize: 14 }}>
                  پورسانت نوبت نمایندگان {apptCommissionEnabled ? 'فعال' : 'غیرفعال'} است
                  <span className="muted" style={{ fontSize: 12, marginRight: 6 }}>(درصد از پروفایل هر نماینده خوانده می‌شود)</span>
                </span>
              </label>

              {/* پورسانت ارتقاء اشتراک */}
              <div>
                <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', marginBottom: upgradeCommissionEnabled ? 12 : 0 }}>
                  <input type="hidden" {...register('upgrade_commission_enabled')} />
                  <div style={{ position: 'relative', width: 44, height: 24, flexShrink: 0 }}
                    onClick={() => setValue('upgrade_commission_enabled', upgradeCommissionEnabled ? '0' : '1', { shouldDirty: true })}>
                    <div style={{ width: 44, height: 24, borderRadius: 12, background: upgradeCommissionEnabled ? 'var(--primary)' : 'var(--border)', transition: 'background .2s', position: 'relative' }}>
                      <div style={{ position: 'absolute', top: 2, width: 20, height: 20, borderRadius: '50%', background: 'var(--surface)', transition: 'right .2s', right: upgradeCommissionEnabled ? 2 : 22, boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
                    </div>
                  </div>
                  <span style={{ fontSize: 14 }}>پورسانت ارتقاء اشتراک {upgradeCommissionEnabled ? 'فعال' : 'غیرفعال'} است</span>
                </label>
                {upgradeCommissionEnabled && (
                  <div style={{ maxWidth: 280, paddingRight: 56 }}>
                    <label style={{ fontSize: 13, fontWeight: 500, display: 'block', marginBottom: 6 }}>درصد پورسانت ارتقاء (۰–۱۰۰)</label>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <input {...register('upgrade_commission_percent')} type="number" min={0} max={100}
                        style={{ width: 120, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5, boxSizing: 'border-box' }} />
                      <span className="muted" style={{ fontSize: 13 }}>درصد</span>
                    </div>
                  </div>
                )}
              </div>

              {/* مالیات بر ارزش افزوده */}
              <div>
                <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', marginBottom: taxEnabled ? 12 : 0 }}>
                  <input type="hidden" {...register('tax_enabled')} />
                  <div style={{ position: 'relative', width: 44, height: 24, flexShrink: 0 }}
                    onClick={() => setValue('tax_enabled', taxEnabled ? '0' : '1', { shouldDirty: true })}>
                    <div style={{ width: 44, height: 24, borderRadius: 12, background: taxEnabled ? 'var(--primary)' : 'var(--border)', transition: 'background .2s', position: 'relative' }}>
                      <div style={{ position: 'absolute', top: 2, width: 20, height: 20, borderRadius: '50%', background: 'var(--surface)', transition: 'right .2s', right: taxEnabled ? 2 : 22, boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
                    </div>
                  </div>
                  <span style={{ fontSize: 14 }}>مالیات بر ارزش افزوده {taxEnabled ? 'فعال' : 'غیرفعال'} است</span>
                </label>
                {taxEnabled && (
                  <div style={{ maxWidth: 280, paddingRight: 56 }}>
                    <label style={{ fontSize: 13, fontWeight: 500, display: 'block', marginBottom: 6 }}>درصد مالیات (۰–۱۰۰)</label>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <input {...register('tax_percent')} type="number" min={0} max={100}
                        style={{ width: 120, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5, boxSizing: 'border-box' }} />
                      <span className="muted" style={{ fontSize: 13 }}>درصد</span>
                    </div>
                  </div>
                )}

                {taxHistory.length > 0 && (
                  <div style={{ marginTop: 14 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600, marginBottom: 8 }}>تاریخچه تغییرات مالیات</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 460 }}>
                      {taxHistory.map((h, i) => (
                        <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, fontSize: 12.5, padding: '6px 10px', borderRadius: 'var(--r-sm)', background: 'var(--surface-3)' }}>
                          <span>
                            {h.enabled ? `${h.tax_percent}٪` : 'غیرفعال'}
                            {h.changed_by_name && <span className="muted"> — {h.changed_by_name}</span>}
                          </span>
                          <span className="muted">{formatDateTime(h.changed_at)}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              {/* مبلغ هر نوبت */}
              <div style={{ maxWidth: 320 }}>
                <label style={{ fontSize: 13, fontWeight: 500, display: 'block', marginBottom: 6 }}>مبلغ هر نوبت (ریال)</label>
                <input {...register('appointment_fee_rials')} type="number" min={0} dir="ltr" placeholder="150000"
                  style={{ width: 200, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5, boxSizing: 'border-box' }} />
                <p className="muted" style={{ fontSize: 12, marginTop: 6 }}>
                  مبلغی که بیمار هنگام رزرو نوبت آنلاین پرداخت می‌کند. ۱۵۰٬۰۰۰ ریال = ۱۵٬۰۰۰ تومان.
                </p>
              </div>

              {/* هزینه پنل پیامک */}
              <div style={{ maxWidth: 320 }}>
                <label style={{ fontSize: 13, fontWeight: 500, display: 'block', marginBottom: 6 }}>هزینه ثابت پنل پیامک (ریال)</label>
                <input {...register('sms_panel_fee_rials')} type="number" min={0} dir="ltr" placeholder="1500000"
                  style={{ width: 200, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5, boxSizing: 'border-box' }} />
                <p className="muted" style={{ fontSize: 12, marginTop: 6 }}>
                  از مبلغِ هر تراکنش (نوبت و اشتراک) کسر می‌شود. ۱٬۵۰۰٬۰۰۰ ریال = ۱۵۰٬۰۰۰ تومان.
                </p>
              </div>

            </div>
          </div>

          {/* تنظیمات نوبت‌دهی */}
          <div className="card card-pad">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: '1.25rem' }}>
              <div className="ico" style={{ background: 'var(--warning-bg)', color: 'var(--warning)', width: 36, height: 36, borderRadius: 10 }}>
                <span style={{ fontSize: 16 }}>⏱</span>
              </div>
              <h3 style={{ fontSize: 15 }}>تنظیمات نوبت‌دهی</h3>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
              <div>
                <label style={{ fontSize: 13, fontWeight: 500, display: 'block', marginBottom: 6 }}>
                  حداکثر ساعت مجاز برای لغو نوبت
                </label>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <input
                    {...register('max_cancel_hours_before')}
                    type="number"
                    min={0}
                    style={{
                      width: 100, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)',
                      border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5,
                      boxSizing: 'border-box',
                    }}
                  />
                  <span className="muted" style={{ fontSize: 13 }}>ساعت قبل از نوبت</span>
                </div>
              </div>

              <div>
                <label style={{ fontSize: 13, fontWeight: 500, display: 'block', marginBottom: 6 }}>
                  ارسال یادآور قبل از نوبت
                </label>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <input
                    {...register('appointment_reminder_hours')}
                    type="number"
                    min={0}
                    style={{
                      width: 100, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)',
                      border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5,
                      boxSizing: 'border-box',
                    }}
                  />
                  <span className="muted" style={{ fontSize: 13 }}>ساعت قبل از نوبت</span>
                </div>
              </div>
            </div>
          </div>

          {/* درگاه پرداخت */}
          <div className="card card-pad">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: '1.25rem' }}>
              <div className="ico" style={{ background: 'var(--warning-bg)', color: 'var(--warning)', width: 36, height: 36, borderRadius: 10 }}>
                <span style={{ fontSize: 16 }}>💳</span>
              </div>
              <h3 style={{ fontSize: 15 }}>درگاه پرداخت</h3>
            </div>

            {/* حالت تست */}
            <div style={{ marginBottom: '1.25rem', padding: '12px 16px', borderRadius: 'var(--r-sm)', background: paymentTestMode ? 'var(--warning-bg)' : 'var(--surface)', border: `1px solid ${paymentTestMode ? 'var(--warning)' : 'var(--border)'}` }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
                <input type="hidden" {...register('payment_test_mode')} />
                <div
                  style={{ position: 'relative', width: 44, height: 24, flexShrink: 0, cursor: 'pointer' }}
                  onClick={() => setValue('payment_test_mode', paymentTestMode ? '0' : '1', { shouldDirty: true })}
                >
                  <div style={{ width: 44, height: 24, borderRadius: 12, background: paymentTestMode ? 'var(--warning)' : 'var(--border)', transition: 'background .2s', position: 'relative' }}>
                    <div style={{ position: 'absolute', top: 2, width: 20, height: 20, borderRadius: '50%', background: 'var(--surface)', transition: 'right .2s', right: paymentTestMode ? 2 : 22, boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{paymentTestMode ? 'حالت تست فعال' : 'حالت تست غیرفعال'}</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>
                    {paymentTestMode ? 'همه پرداخت‌ها از درگاه آزمایشی رد می‌شوند (پول واقعی کسر نمی‌شود)' : 'پرداخت‌ها از درگاه واقعی انجام می‌شوند'}
                  </div>
                </div>
              </label>
            </div>

            {/* Mellat */}
            <div style={{ marginBottom: '1.25rem' }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--violet)', display: 'inline-block' }} />
                درگاه ملت (Mellat)
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.75rem' }}>
                <div>
                  <label style={{ fontSize: 12.5, fontWeight: 500, display: 'block', marginBottom: 4 }}>شناسه پایانه</label>
                  <input {...register('mellat_terminal_id')} dir="ltr" placeholder="12345678"
                    style={{ width: '100%', height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box' }}
                  />
                </div>
                <div>
                  <label style={{ fontSize: 12.5, fontWeight: 500, display: 'block', marginBottom: 4 }}>نام کاربری</label>
                  <input {...register('mellat_username')} dir="ltr" placeholder="username"
                    style={{ width: '100%', height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box' }}
                  />
                </div>
                <div>
                  <label style={{ fontSize: 12.5, fontWeight: 500, display: 'block', marginBottom: 4 }}>رمز عبور</label>
                  <div style={{ position: 'relative' }}>
                    <input {...register('mellat_password')} type={showMellatPassword ? 'text' : 'password'} dir="ltr" placeholder="••••••••"
                      style={{ width: '100%', height: 38, padding: '0 36px 0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box' }}
                    />
                    <button type="button" onClick={() => setShowMellatPassword(p => !p)}
                      style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted)', fontSize: 12 }}>
                      {showMellatPassword ? 'پنهان' : 'نمایش'}
                    </button>
                  </div>
                </div>
              </div>
            </div>

            {/* SEP */}
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: '0.75rem', display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--success)', display: 'inline-block' }} />
                درگاه سپ (SEP)
              </div>
              <div style={{ maxWidth: 240 }}>
                <label style={{ fontSize: 12.5, fontWeight: 500, display: 'block', marginBottom: 4 }}>شناسه پایانه</label>
                <input {...register('sep_terminal_id')} dir="ltr" placeholder="12345678"
                  style={{ width: '100%', height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box' }}
                />
              </div>
            </div>
          </div>

          {/* تنظیمات پیامک */}
          <div className="card card-pad">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: '1.25rem' }}>
              <div className="ico" style={{ background: 'var(--violet-bg)', color: 'var(--violet)', width: 36, height: 36, borderRadius: 10 }}>
                <span style={{ fontSize: 16 }}>📱</span>
              </div>
              <h3 style={{ fontSize: 15 }}>تنظیمات پیامک (SMS)</h3>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
              <div>
                <label style={{ fontSize: 12.5, fontWeight: 500, display: 'block', marginBottom: 4 }}>سرویس پیامک</label>
                <select {...register('sms_provider')}
                  style={{ width: '100%', height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13 }}>
                  <option value="kavenegar">کاوه‌نگار</option>
                  <option value="rangineh">رنگینه</option>
                </select>
              </div>
              <div>
                <label style={{ fontSize: 12.5, fontWeight: 500, display: 'block', marginBottom: 4 }}>قیمت هر پیامک (ریال)</label>
                <input {...register('sms_price_rials')} type="number" min={0} dir="ltr" placeholder="500"
                  style={{ width: '100%', height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box' }}
                />
              </div>
            </div>

            <div style={{ marginTop: '1rem' }}>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: '0.75rem' }}>تنظیمات کاوه‌نگار</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
                <div>
                  <label style={{ fontSize: 12.5, fontWeight: 500, display: 'block', marginBottom: 4 }}>API Key</label>
                  <div style={{ position: 'relative' }}>
                    <input {...register('kavenegar_api_key')} type={showKavenegarKey ? 'text' : 'password'} dir="ltr" placeholder="••••••••••••••••"
                      style={{ width: '100%', height: 38, padding: '0 36px 0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box' }}
                    />
                    <button type="button" onClick={() => setShowKavenegarKey(p => !p)}
                      style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted)', fontSize: 12 }}>
                      {showKavenegarKey ? 'پنهان' : 'نمایش'}
                    </button>
                  </div>
                </div>
                <div>
                  <label style={{ fontSize: 12.5, fontWeight: 500, display: 'block', marginBottom: 4 }}>شماره فرستنده</label>
                  <input {...register('kavenegar_sender')} dir="ltr" placeholder="10008664"
                    style={{ width: '100%', height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box' }}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* دکمه ذخیره */}
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
            <button
              type="button"
              className="btn ghost"
              onClick={() => settings && reset({
                site_name:                  settings.site_name,
                support_phone:              settings.support_phone,
                max_cancel_hours_before:    settings.max_cancel_hours_before,
                appointment_reminder_hours: settings.appointment_reminder_hours,
                appointment_commission_enabled: settings.appointment_commission_enabled,
                upgrade_commission_enabled:     settings.upgrade_commission_enabled,
                upgrade_commission_percent:     settings.upgrade_commission_percent,
                tax_enabled:                    settings.tax_enabled,
                tax_percent:                    settings.tax_percent,
                sms_panel_fee_rials:            settings.sms_panel_fee_rials,
                appointment_fee_rials:          settings.appointment_fee_rials,
                payment_test_mode:          settings.payment_test_mode,
                mellat_terminal_id:         settings.mellat_terminal_id,
                mellat_username:            settings.mellat_username,
                mellat_password:            settings.mellat_password,
                sep_terminal_id:            settings.sep_terminal_id,
                sms_provider:               settings.sms_provider,
                kavenegar_api_key:          settings.kavenegar_api_key,
                kavenegar_sender:           settings.kavenegar_sender,
                sms_price_rials:            settings.sms_price_rials,
              })}
              disabled={!isDirty || mutation.isPending}
            >
              بازگشت
            </button>
            <button
              type="submit"
              className="btn primary"
              disabled={mutation.isPending || !isDirty}
            >
              {mutation.isPending ? 'در حال ذخیره...' : 'ذخیره تنظیمات'}
            </button>
          </div>

        </div>
      </form>
    </div>
  );
}