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

type Module = {
  id: number;
  key: string;
  label: string;
  enabled: boolean;
};

type School = {
  id: number;
  name: string;
  code: string;
};

type Props = {
  school: School;
  modules: Module[];
};

export default function SchoolModules({ school, modules }: Props) {
  function handleToggle(module: Module) {
    const action = module.enabled ? 'غیرفعال کردن' : 'فعال کردن';
    if (!confirm(`${action} ماژول «${module.label}» برای مدرسه «${school.name}»؟`)) return;
    router.patch(`/super-admin/schools/${school.id}/modules/${module.id}/toggle`, {}, { preserveScroll: true });
  }

  const enabled = modules.filter((m) => m.enabled);
  const disabled = modules.filter((m) => !m.enabled);

  return (
    <AppLayout title="ماژول‌های مدرسه">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>ماژول‌های مدرسه «{school.name}»</h2>
            <p>کد: {school.code} — ماژول‌های فعال توسط owner قابل استفاده هستند.</p>
          </div>
          <a className="btn btn-ghost" href="/super-admin/schools"><i className="bi bi-arrow-right" /> بازگشت</a>
        </section>

        <div className="panel-card">
          <h2>ماژول‌های فعال ({enabled.length})</h2>
          {enabled.length > 0 ? (
            <div className="table-wrap">
              <table className="data-table">
                <thead>
                  <tr><th>ماژول</th><th>کلید</th><th>عملیات</th></tr>
                </thead>
                <tbody>
                  {enabled.map((module) => (
                    <tr key={module.id}>
                      <td>{module.label}</td>
                      <td><code>{module.key}</code></td>
                      <td>
                        <button
                          className="btn btn-danger-ghost btn-sm"
                          type="button"
                          onClick={() => handleToggle(module)}
                        >
                          غیرفعال کردن
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <p>هنوز ماژولی فعال نشده است.</p>
          )}
        </div>

        <div className="panel-card">
          <h2>ماژول‌های غیرفعال ({disabled.length})</h2>
          {disabled.length > 0 ? (
            <div className="table-wrap">
              <table className="data-table">
                <thead>
                  <tr><th>ماژول</th><th>کلید</th><th>عملیات</th></tr>
                </thead>
                <tbody>
                  {disabled.map((module) => (
                    <tr key={module.id}>
                      <td>{module.label}</td>
                      <td><code>{module.key}</code></td>
                      <td>
                        <button
                          className="btn btn-soft btn-sm"
                          type="button"
                          onClick={() => handleToggle(module)}
                        >
                          <i className="bi bi-plus-circle" /> فعال کردن
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <p>همه ماژول‌های قابل فروش فعال هستند.</p>
          )}
        </div>
      </div>
    </AppLayout>
  );
}
