import { router, useForm } from '@inertiajs/react';
import { useState } from 'react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { PageHeader } from '@/Components/UI/PageHeader';
import { TextInput } from '@/Components/Forms/TextInput';
import { persianDigits } from '@/lib/persianDate';

type Provider = {
  providerKey: string;
  name: string;
  color: 'yellow' | 'green';
  enabled: boolean;
  priority: number;
  apiKeyConfigured: boolean;
  apiKeyEnv: string;
  lineNumber: string | null;
  otpTemplateId: string | null;
  otpParamName: string | null;
  absentTemplateId: string | null;
  lastTestStatus: 'never' | 'success' | 'failed';
  lastTestAt: string | null;
  lastError: string | null;
};

const COLORS: Record<string, { bg: string; fg: string }> = {
  yellow: { bg: '#FEF3C7', fg: '#A16207' },
  green: { bg: 'var(--color-primary-soft)', fg: 'var(--color-primary-active)' },
};

function ProviderCard({ provider }: { provider: Provider }) {
  const form = useForm({
    enabled: provider.enabled,
    priority: provider.priority,
    line_number: provider.lineNumber ?? '',
    otp_template_id: provider.otpTemplateId ?? '',
    otp_param_name: provider.otpParamName ?? 'Code',
    absent_template_id: provider.absentTemplateId ?? '',
  });

  const [testMobile, setTestMobile] = useState('09031816486');
  const [testing, setTesting] = useState(false);

  const color = COLORS[provider.color] ?? COLORS.green;

  const save = () => form.put(`/super-admin/sms-settings/${provider.providerKey}`, { preserveScroll: true });

  const sendTest = () => {
    setTesting(true);
    router.post(`/super-admin/sms-settings/${provider.providerKey}/test`, { mobile: testMobile }, {
      preserveScroll: true,
      onFinish: () => setTesting(false),
    });
  };

  return (
    <article className="panel-card" style={{ display: 'grid', gap: '1rem' }}>
      <div style={{ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '0.75rem', justifyContent: 'space-between' }}>
        <div style={{ alignItems: 'center', display: 'flex', gap: '0.7rem' }}>
          <span
            style={{
              alignItems: 'center', background: color.bg, borderRadius: 'var(--radius-md)',
              color: color.fg, display: 'inline-flex', fontSize: '1.25rem', height: 46,
              justifyContent: 'center', width: 46,
            }}
          >
            <i className="bi bi-chat-left-dots-fill" />
          </span>
          <div>
            <h2 style={{ fontSize: '1.05rem', margin: 0 }}>{provider.name}</h2>
            <small style={{ color: 'var(--color-text-soft)', direction: 'ltr', display: 'block', textAlign: 'right' }}>{provider.providerKey}</small>
          </div>
        </div>

        <div style={{ alignItems: 'center', display: 'flex', gap: '0.5rem' }}>
          {provider.lastTestStatus === 'success' && <span className="badge badge-success"><i className="bi bi-check-circle" /> آخرین ارسال موفق</span>}
          {provider.lastTestStatus === 'failed' && <span className="badge badge-danger"><i className="bi bi-x-circle" /> آخرین ارسال ناموفق</span>}
          {provider.lastTestStatus === 'never' && <span className="badge badge-muted">هنوز تست نشده</span>}
          {form.data.enabled
            ? <span className="badge badge-success">فعال</span>
            : <span className="badge badge-muted">غیرفعال</span>}
        </div>
      </div>

      {provider.lastTestAt && (
        <small style={{ color: 'var(--color-text-soft)' }}>
          آخرین ارسال: {provider.lastTestAt}
          {provider.lastError ? <span style={{ color: 'var(--color-danger)' }}> — {provider.lastError}</span> : null}
        </small>
      )}

      <div className="form-grid">
        <label className="form-field">
          <span>وضعیت سرویس</span>
          <select
            value={form.data.enabled ? '1' : '0'}
            onChange={(e) => form.setData('enabled', e.target.value === '1')}
          >
            <option value="1">فعال</option>
            <option value="0">غیرفعال</option>
          </select>
        </label>
        <label className="form-field">
          <span>اولویت (۱ = اول تلاش می‌شود)</span>
          <input
            type="number" min={1} max={9} value={form.data.priority}
            onChange={(e) => form.setData('priority', Number(e.target.value))}
          />
        </label>
        <div className="form-field">
          <span>کلید API</span>
          <div className={`badge ${provider.apiKeyConfigured ? 'badge-success' : 'badge-danger'}`} style={{ alignSelf: 'flex-start' }}>
            <i className={`bi ${provider.apiKeyConfigured ? 'bi-shield-check' : 'bi-shield-exclamation'}`} />
            {provider.apiKeyConfigured ? 'در محیط اجرا تنظیم شده' : 'در محیط اجرا تنظیم نشده'}
          </div>
          <small style={{ color: 'var(--color-text-muted)', direction: 'ltr', textAlign: 'left' }}>
            {provider.apiKeyEnv}
          </small>
        </div>
        <TextInput
          label="شماره خط (برای فراز)"
          value={form.data.line_number}
          onChange={(e) => form.setData('line_number', e.target.value)}
          error={form.errors.line_number}
          dir="ltr"
        />
        <TextInput
          label="شناسه قالب کد بازیابی (OTP)"
          value={form.data.otp_template_id}
          onChange={(e) => form.setData('otp_template_id', e.target.value)}
          error={form.errors.otp_template_id}
          dir="ltr"
        />
        <TextInput
          label="نام متغیر قالب (مثلا Code)"
          value={form.data.otp_param_name}
          onChange={(e) => form.setData('otp_param_name', e.target.value)}
          error={form.errors.otp_param_name}
          dir="ltr"
        />
        <TextInput
          label="شناسه قالب پیامک غیبت (بعدا تنظیم می‌شود)"
          value={form.data.absent_template_id}
          onChange={(e) => form.setData('absent_template_id', e.target.value)}
          error={form.errors.absent_template_id}
          dir="ltr"
        />
      </div>

      <div style={{ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '0.6rem', justifyContent: 'space-between' }}>
        <div style={{ alignItems: 'center', display: 'flex', gap: '0.5rem' }}>
          <input
            style={{
              background: 'var(--color-surface)', border: '1px solid var(--color-border)',
              borderRadius: 'var(--radius-sm)', color: 'var(--color-text)', direction: 'ltr',
              font: 'inherit', fontSize: '0.85rem', minHeight: 38, padding: '0.3rem 0.6rem', width: 150,
            }}
            value={testMobile}
            onChange={(e) => setTestMobile(e.target.value)}
            placeholder="09xxxxxxxxx"
          />
          <button type="button" className="btn btn-soft btn-sm" disabled={testing} onClick={sendTest}>
            {testing ? <><i className="bi bi-arrow-repeat" /> در حال ارسال...</> : <><i className="bi bi-send" /> ارسال پیامک تست</>}
          </button>
        </div>
        <button type="button" className="btn btn-primary" disabled={form.processing} onClick={save}>
          <i className="bi bi-check-lg" /> ذخیره تنظیمات
        </button>
      </div>
    </article>
  );
}

type PricingProps = {
  smsPrice: number;
  priceRial: number;
  giftEnabled: boolean;
  giftPer: number;
  packCounts: string;
};

function PricingCard({ smsPrice, priceRial, giftEnabled, giftPer, packCounts }: PricingProps) {
  const form = useForm({
    sms_price: smsPrice,
    sms_price_rial: priceRial,
    sms_gift_enabled: giftEnabled,
    sms_gift_per: giftPer,
    sms_pack_counts: packCounts,
  });

  return (
    <form
      id="pricing"
      className="panel-card"
      style={{ display: 'grid', gap: '1rem' }}
      onSubmit={(e) => { e.preventDefault(); form.put('/super-admin/sms-settings/price', { preserveScroll: true }); }}
    >
      <h2 style={{ margin: 0 }}><i className="bi bi-currency-exchange" style={{ marginLeft: '0.4rem' }} /> قیمت و هدیه پیامک</h2>
      <div className="form-grid">
        <label className="form-field">
          <span>قیمت هر پیامک (ریال) — مبلغی که مدرسه می‌پردازد</span>
          <input
            type="number" min={1} value={form.data.sms_price_rial}
            onChange={(e) => form.setData('sms_price_rial', Number(e.target.value))}
          />
          {form.errors.sms_price_rial && <small className="field-error">{form.errors.sms_price_rial}</small>}
        </label>
        <label className="form-field">
          <span>واحد کسر از کیف پول به ازای هر ارسال</span>
          <input
            type="number" min={1} value={form.data.sms_price}
            onChange={(e) => form.setData('sms_price', Number(e.target.value))}
          />
        </label>
        <label className="form-field">
          <span>پیامک هدیه</span>
          <select
            value={form.data.sms_gift_enabled ? '1' : '0'}
            onChange={(e) => form.setData('sms_gift_enabled', e.target.value === '1')}
          >
            <option value="1">فعال</option>
            <option value="0">غیرفعال</option>
          </select>
        </label>
        <label className="form-field">
          <span>به ازای هر چند پیامک، ۱ هدیه؟</span>
          <input
            type="number" min={1} value={form.data.sms_gift_per}
            onChange={(e) => form.setData('sms_gift_per', Number(e.target.value))}
          />
          {form.errors.sms_gift_per && <small className="field-error">{form.errors.sms_gift_per}</small>}
        </label>
        <label className="form-field">
          <span>بسته‌های آماده (تعداد پیامک، با کاما)</span>
          <input
            dir="ltr" value={form.data.sms_pack_counts}
            onChange={(e) => form.setData('sms_pack_counts', e.target.value)}
          />
          {form.errors.sms_pack_counts && <small className="field-error">{form.errors.sms_pack_counts}</small>}
        </label>
      </div>
      <small style={{ color: 'var(--color-text-muted)' }}>
        مدرسه در پنجره شارژ، تعداد پیامک را انتخاب می‌کند و مبلغ = تعداد × {persianDigits(String(form.data.sms_price_rial))} ریال.
        {form.data.sms_gift_enabled && <> به ازای هر {persianDigits(String(form.data.sms_gift_per))} پیامک، ۱ پیامک هدیه اضافه می‌شود.</>}
      </small>
      <div>
        <button className="btn btn-primary" disabled={form.processing} type="submit">
          <i className="bi bi-check-lg" /> ذخیره تنظیمات قیمت
        </button>
      </div>
    </form>
  );
}

export default function SmsSettings({ providers, smsPrice, priceRial, giftEnabled, giftPer, packCounts }: { providers: Provider[] } & PricingProps) {
  return (
    <AppLayout title="تنظیمات پیامک">
      <div className="page-stack">
        <PageHeader
          title="تنظیمات سرویس پیامک"
          icon="bi-sliders"
          description="دو سرویس پیامک تعریف شده است؛ ارسال به ترتیب اولویت انجام می‌شود و اگر سرویس اول شکست بخورد، سرویس دوم جایگزین می‌شود."
        />

        <PricingCard
          smsPrice={smsPrice}
          priceRial={priceRial}
          giftEnabled={giftEnabled}
          giftPer={giftPer}
          packCounts={packCounts}
        />

        {providers.map((provider) => (
          <ProviderCard key={provider.providerKey} provider={provider} />
        ))}
      </div>
    </AppLayout>
  );
}