import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { DataTable } from '@/Components/Tables/DataTable';
import { UsageChart } from '@/Components/Charts/UsageChart';
import { formatCount } from '@/lib/formatters';

type SchoolSms = {
  name: string;
  totalCharged: number;
  totalUsed: number;
  balance: number;
};

type ChargeRequest = {
  id: number;
  schoolName: string;
  schoolId: number;
  smsCount: number;
  price: number;
  requestedBy: string;
  createdAt: string;
};

type Props = {
  metrics: {
    totalCharged: number;
    sentThisMonth: number;
    schoolsWithSms: number;
  };
  chart: number[];
  schools: SchoolSms[];
  chargeRequests: ChargeRequest[];
};

export default function SmsUsage({ metrics, chart, schools, chargeRequests }: Props) {
  const approveForm = useForm({});
  const rejectForm = useForm({});

  const rows = schools.map((school) => [
    school.name,
    formatCount(school.totalCharged),
    formatCount(school.totalUsed),
    formatCount(school.balance),
  ]);
  const max = Math.max(...chart, 1);
  const chartValues = chart.map((value) => Math.max(8, Math.round((value / max) * 100)));

  function approve(id: number) {
    approveForm.post(`/super-admin/sms-charge-requests/${id}/approve`);
  }

  function reject(id: number) {
    if (!confirm('رد درخواست شارژ؟')) return;
    rejectForm.post(`/super-admin/sms-charge-requests/${id}/reject`);
  }

  return (
    <AppLayout title="گزارش پیامک مدارس">
      <div className="page-stack">
        <section className="dashboard-grid">
          <article className="metric-card"><span>کل پیامک‌های فروخته‌شده</span><strong>{formatCount(metrics.totalCharged)}</strong></article>
          <article className="metric-card"><span>ارسال موفق ماه</span><strong>{formatCount(metrics.sentThisMonth)}</strong></article>
          <article className="metric-card"><span>مدارس دارای SMS</span><strong>{formatCount(metrics.schoolsWithSms)}</strong></article>
        </section>

        {chargeRequests.length > 0 && (
          <section className="panel-card" style={{ border: '2px solid var(--color-warning)' }}>
            <h2><i className="bi bi-clock-fill" style={{ marginLeft: '0.4rem', color: 'var(--color-warning)' }} />درخواست‌های شارژ کیف پول ({chargeRequests.length})</h2>
            <div className="table-wrap" style={{ padding: 0, overflow: 'hidden', marginTop: '1rem' }}>
              <table className="data-table">
                <thead>
                  <tr>
                    <th>مدرسه</th>
                    <th>بسته</th>
                    <th>مبلغ (تومان)</th>
                    <th>درخواست‌کننده</th>
                    <th>تاریخ</th>
                    <th>عملیات</th>
                  </tr>
                </thead>
                <tbody>
                  {chargeRequests.map((req) => (
                    <tr key={req.id}>
                      <td>{req.schoolName}</td>
                      <td><span className="badge badge-success">{formatCount(req.smsCount)} پیامک</span></td>
                      <td>{formatCount(req.price)}</td>
                      <td>{req.requestedBy}</td>
                      <td style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>{req.createdAt}</td>
                      <td>
                        <div className="action-row--compact">
                          <button
                            className="btn btn-primary btn-sm"
                            type="button"
                            disabled={approveForm.processing}
                            onClick={() => approve(req.id)}
                          >
                            <i className="bi bi-check" /> تایید
                          </button>
                          <button
                            className="btn btn-ghost btn-sm"
                            type="button"
                            disabled={rejectForm.processing}
                            onClick={() => reject(req.id)}
                          >
                            <i className="bi bi-x" /> رد
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>
        )}

        <section className="split-panel">
          <article className="panel-card">
            <h2>مصرف مدارس در ۷ روز اخیر</h2>
            {chart.length > 0 ? <UsageChart values={chartValues} /> : <p>هنوز مصرفی ثبت نشده است.</p>}
          </article>
          <article className="panel-card">
            <h2>قانون wallet</h2>
            <p>برای هر recipient که provider با موفقیت تایید کند، یک اعتبار از کیف پول همان مدرسه کم می‌شود.</p>
            <span className="status-pill warning">provider بعدا انتخاب می‌شود</span>
          </article>
        </section>

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