import { router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type ModuleRow = {
  id: number;
  keyName: string;
  name: string;
  dependency: string;
  defaultEnabled: boolean;
  isSellable: boolean;
  status: string;
};

type Props = {
  modules: ModuleRow[];
  cards: string[];
};

export default function Modules({ modules, cards }: Props) {
  function toggleDefault(module: ModuleRow) {
    router.patch(`/super-admin/modules/${module.id}/default`, {}, { preserveScroll: true });
  }

  function bulkApply(module: ModuleRow, action: 'enable' | 'disable') {
    const label = action === 'enable' ? 'فعال' : 'غیرفعال';
    if (!confirm(`ماژول «${module.name}» برای همه مدارس ${label} شود؟`)) return;
    router.post(`/super-admin/modules/${module.id}/bulk-apply`, { action }, { preserveScroll: true });
  }

  return (
    <AppLayout title="کاتالوگ ماژول‌ها">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>فروش امکانات مدرسه به صورت ماژولی</h2>
            <p>مدیر کل اینجا مشخص می‌کند هر قابلیت چه dependency، permission، limit و قیمت پایه‌ای دارد.</p>
          </div>
          <button className="btn btn-primary" type="button"><i className="bi bi-plus-lg" /> ثبت ماژول</button>
        </section>
        <section className="card-grid">
          {cards.map((item) => (
            <article className="panel-card" key={item}>
              <span className="icon-badge"><i className="bi bi-box-seam" /></span>
              <h3>{item}</h3>
              <p>در زمان فروش license بررسی می‌شود تا چیزی که مدرسه نخریده اصلا در UI دیده نشود.</p>
            </article>
          ))}
        </section>
        {modules.length > 0 ? (
          <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ overflowX: 'auto' }}>
              <table className="data-table" style={{ width: '100%' }}>
                <thead>
                  <tr>
                    <th>کد</th>
                    <th>نام</th>
                    <th>پیش‌نیاز</th>
                    <th>وضعیت</th>
                    <th>پیش‌فرض مدرسه جدید</th>
                    <th>گروهی</th>
                  </tr>
                </thead>
                <tbody>
                  {modules.map((module) => (
                    <tr key={module.keyName}>
                      <td>{module.keyName}</td>
                      <td>{module.name}</td>
                      <td>{module.dependency}</td>
                      <td>{module.status}</td>
                      <td>
                        <button className={`btn btn-sm ${module.defaultEnabled ? 'btn-primary' : 'btn-ghost'}`} type="button" onClick={() => toggleDefault(module)}>
                          {module.defaultEnabled ? 'فعال' : 'غیرفعال'}
                        </button>
                      </td>
                      <td>
                        {module.isSellable ? (
                          <div className="action-row--compact">
                            <button className="btn btn-soft btn-sm" type="button" onClick={() => bulkApply(module, 'enable')}>فعال همه</button>
                            <button className="btn btn-ghost btn-sm" type="button" onClick={() => bulkApply(module, 'disable')}>غیرفعال همه</button>
                          </div>
                        ) : (
                          <span style={{ color: 'var(--color-text-muted)' }}>اجباری</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>
        ) : (
          <section className="panel-card"><h2>ماژولی در دیتابیس نیست</h2><p>ابتدا seed.sql را import کن تا کاتالوگ ماژول‌ها ساخته شود.</p></section>
        )}
      </div>
    </AppLayout>
  );
}