import { 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';

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

type SmsPackage = {
  id: number;
  title: string;
  smsCount: number;
  price: number;
};

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

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

export default function Wallet({ isLowBalance, metrics, transactions, packages, pendingRequests }: Props) {
  const [showPackages, setShowPackages] = useState(false);
  const form = useForm({ package_id: '' });

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

  function handleRequest(e: React.FormEvent) {
    e.preventDefault();
    form.post('/school/sms-wallet/request-charge', {
      onSuccess: () => { setShowPackages(false); form.reset(); },
    });
  }

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

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

        <section className="section-header">
          <div>
            <h2>کیف پول SMS</h2>
          </div>
          {!isLowBalance && (
            <button className="btn btn-primary" type="button" onClick={() => setShowPackages(!showPackages)}>
              <i className="bi bi-plus-circle" /> شارژ کیف پول
            </button>
          )}
        </section>

        {showPackages && (
          <form className="panel-card" onSubmit={handleRequest} style={{ border: '2px solid var(--color-primary)' }}>
            <h2>انتخاب بسته پیامک</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem', marginBottom: '1rem' }}>
              {packages.map((pkg) => (
                <label
                  key={pkg.id}
                  style={{
                    border: `2px solid ${form.data.package_id === String(pkg.id) ? 'var(--color-primary)' : 'var(--color-border)'}`,
                    borderRadius: 'var(--radius-md)',
                    padding: '1rem',
                    cursor: 'pointer',
                    background: form.data.package_id === String(pkg.id) ? 'var(--color-primary-soft-2)' : 'white',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '0.4rem',
                  }}
                >
                  <input
                    type="radio"
                    name="package_id"
                    value={pkg.id}
                    checked={form.data.package_id === String(pkg.id)}
                    onChange={() => form.setData('package_id', String(pkg.id))}
                    style={{ display: 'none' }}
                  />
                  <strong style={{ fontSize: '1rem' }}>{pkg.title}</strong>
                  <span style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
                    <i className="bi bi-chat-dots" style={{ marginLeft: '0.3rem' }} />{formatCount(pkg.smsCount)} پیامک
                  </span>
                  <span style={{ color: 'var(--color-primary)', fontWeight: 700 }}>
                    {formatCount(pkg.price)} تومان
                  </span>
                </label>
              ))}
            </div>
            {form.errors.package_id && <p style={{ color: 'var(--color-danger)', fontSize: '0.85rem' }}>{form.errors.package_id}</p>}
            <p style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', marginBottom: '1rem' }}>
              بعد از ارسال درخواست، مدیر سیستم آن را بررسی و تایید می‌کند. اعتبار پس از تایید به کیف پول اضافه می‌شود.
            </p>
            <div className="action-row">
              <button className="btn btn-primary" type="submit" disabled={form.processing || !form.data.package_id}>
                ارسال درخواست شارژ
              </button>
              <button className="btn btn-ghost" type="button" onClick={() => { setShowPackages(false); form.reset(); }}>لغو</button>
            </div>
          </form>
        )}

        <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>فقط ارسال موفق provider اعتبار کم می‌کند؛ برای هر گیرنده موفق دقیقا ۱ اعتبار مصرف می‌شود.</p>
        </section>

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