import { useMemo, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { DataTable } from '@/Components/Tables/DataTable';
import { formatCount } from '@/lib/formatters';
import { persianDigits } from '@/lib/persianDate';

type SmsTransaction = {
  description: string;
  amount: number;
  balanceAfter: number;
  createdAt: string;
};

type ChargeConfig = {
  priceRial: number;
  giftEnabled: boolean;
  giftPer: number;
  packCounts: number[];
  paymentEnabled: boolean;
};

type Props = {
  chargeConfig: ChargeConfig;
  isLowBalance: boolean;
  metrics: {
    balance: number;
    totalUsed: number;
    failedThisMonth: number;
  };
  transactions: SmsTransaction[];
  pendingRequests: number;
};

const signedAmount = (amount: number) => `${amount > 0 ? '+' : ''}${formatCount(amount)}`;

function ChargeModal({ config, onClose }: { config: ChargeConfig; onClose: () => void }) {
  const [selectedPack, setSelectedPack] = useState<number | null>(config.packCounts[0] ?? null);
  const [customCount, setCustomCount] = useState('');
  const form = useForm({ sms_count: 0 });

  const count = customCount.trim() !== ''
    ? Math.max(0, parseInt(customCount, 10) || 0)
    : (selectedPack ?? 0);

  const gift = config.giftEnabled && count > 0 ? Math.floor(count / config.giftPer) : 0;
  const totalRial = count * config.priceRial;

  const pay = () => {
    if (count < 1 || !config.paymentEnabled) return;
    form.transform(() => ({ sms_count: count }));
    form.post('/school/sms-wallet/charge-demo', {
      preserveScroll: true,
      onSuccess: () => onClose(),
    });
  };

  return (
    <div className="modal-overlay" role="dialog" aria-modal="true">
      <div className="modal-box">
        <div className="modal-head">
          <h2><i className="bi bi-wallet2" style={{ marginLeft: '0.4rem' }} /> شارژ کیف پول پیامک</h2>
          <button type="button" className="modal-close" aria-label="بستن" onClick={onClose}>
            <i className="bi bi-x-lg" />
          </button>
        </div>

        <p className="modal-hint">
          هزینه هر پیامک: <strong>{formatCount(config.priceRial)} ریال</strong>
          {config.giftEnabled && (
            <> — به ازای هر {persianDigits(String(config.giftPer))} پیامک، <strong>۱ پیامک هدیه</strong></>
          )}
        </p>

        {!config.paymentEnabled && (
          <div style={{ background: '#FEF3C7', border: '1px solid #F59E0B', borderRadius: 'var(--radius-md)', color: '#92400E', padding: '0.75rem 1rem' }}>
            <i className="bi bi-exclamation-triangle" /> درگاه پرداخت هنوز فعال نشده است. برای شارژ از بخش درخواست شارژ استفاده کنید.
          </div>
        )}

        <div className="charge-packs">
          {config.packCounts.map((pack) => (
            <button
              key={pack}
              type="button"
              className={`charge-pack${customCount === '' && selectedPack === pack ? ' selected' : ''}`}
              onClick={() => { setSelectedPack(pack); setCustomCount(''); }}
            >
              <strong>{formatCount(pack)}</strong>
              <span>پیامک</span>
              <small>{formatCount(pack * config.priceRial)} ریال</small>
            </button>
          ))}
        </div>

        <label className="form-field">
          <span>یا تعداد دلخواه</span>
          <input
            dir="ltr"
            inputMode="numeric"
            placeholder="مثلا 750"
            value={customCount}
            onChange={(e) => setCustomCount(e.target.value.replace(/[^0-9]/g, ''))}
          />
          {form.errors.sms_count && <small className="field-error">{form.errors.sms_count}</small>}
        </label>

        <div className="charge-summary">
          <div><span>تعداد پیامک</span><strong>{formatCount(count)}</strong></div>
          {gift > 0 && <div><span>پیامک هدیه</span><strong className="charge-gift">+{formatCount(gift)}</strong></div>}
          <div><span>مجموع اعتبار</span><strong>{formatCount(count + gift)}</strong></div>
          <div className="charge-total"><span>مبلغ قابل پرداخت</span><strong>{formatCount(totalRial)} ریال</strong></div>
        </div>

        <div className="action-row" style={{ justifyContent: 'flex-end' }}>
          <button type="button" className="btn btn-ghost" onClick={onClose}>انصراف</button>
          <button type="button" className="btn btn-primary" disabled={count < 1 || form.processing || !config.paymentEnabled} onClick={pay}>
            {form.processing
              ? <><i className="bi bi-arrow-repeat" /> در حال پرداخت...</>
              : config.paymentEnabled
                ? <><i className="bi bi-credit-card" /> پرداخت {formatCount(totalRial)} ریال</>
                : <><i className="bi bi-lock" /> درگاه غیرفعال</>}
          </button>
        </div>
      </div>
    </div>
  );
}

export default function Wallet({ chargeConfig, isLowBalance, metrics, transactions, pendingRequests }: Props) {
  const [showCharge, setShowCharge] = useState(false);

  const rows = useMemo(() => transactions.map((transaction) => [
    transaction.description,
    signedAmount(transaction.amount),
    formatCount(transaction.balanceAfter),
    transaction.createdAt,
  ]), [transactions]);

  return (
    <AppLayout title="کیف پول پیامک">
      <div className="page-stack">
        {isLowBalance && (
          <div style={{ background: 'var(--color-surface)', border: '1px solid #f87171', borderRadius: 'var(--radius-md)', padding: '0.875rem 1.25rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
            <span>
              <strong style={{ color: 'var(--color-danger)' }}><i className="bi bi-exclamation-triangle-fill" style={{ marginLeft: '0.4rem' }} />موجودی کم است</strong>
              <span style={{ marginRight: '0.5rem', fontSize: '0.9rem' }}>موجودی پیامک کمتر از ۵۰ واحد است.</span>
            </span>
            <button className="btn btn-primary btn-sm" type="button" onClick={() => setShowCharge(true)}>
              <i className="bi bi-plus-circle" /> شارژ کیف پول
            </button>
          </div>
        )}

        {pendingRequests > 0 && (
          <div style={{ background: 'var(--color-surface)', border: '1px solid #fbbf24', borderRadius: 'var(--radius-md)', padding: '0.75rem 1.25rem' }}>
            <i className="bi bi-clock" style={{ marginLeft: '0.4rem' }} />
            <strong>{persianDigits(String(pendingRequests))} درخواست شارژ</strong> در انتظار تایید مدیر سیستم.
          </div>
        )}

        <section className="section-header">
          <div>
            <h2>کیف پول پیامک</h2>
          </div>
          <button className="btn btn-primary" type="button" onClick={() => setShowCharge(true)}>
            <i className="bi bi-plus-circle" /> شارژ کیف پول
          </button>
        </section>

        <section className="dashboard-grid">
          <article className="metric-card"><span>موجودی فعلی</span><strong>{formatCount(metrics.balance)}</strong></article>
          <article className="metric-card"><span>مصرف کل</span><strong>{formatCount(metrics.totalUsed)}</strong></article>
          <article className="metric-card"><span>ارسال ناموفق این ماه</span><strong>{formatCount(metrics.failedThisMonth)}</strong></article>
        </section>

        <section className="panel-card">
          <h2>قانون کسر اعتبار</h2>
          <p>فقط ارسال موفق اعتبار کم می‌کند؛ برای هر گیرنده موفق دقیقا {persianDigits('1')} واحد مصرف می‌شود. وقتی موجودی کافی نباشد، ارسال به‌صورت خودکار مسدود می‌شود.</p>
        </section>

        {rows.length > 0
          ? <DataTable columns={['شرح', 'تغییر اعتبار', 'مانده بعد از تراکنش', 'تاریخ']} rows={rows} />
          : (
            <section className="panel-card">
              <h2>هنوز تراکنشی ثبت نشده</h2>
              <p>بعد از شارژ کیف پول یا ارسال موفق پیامک، تاریخچه اینجا نمایش داده می‌شود.</p>
            </section>
          )}
      </div>

      {showCharge && <ChargeModal config={chargeConfig} onClose={() => setShowCharge(false)} />}
    </AppLayout>
  );
}