import { h } from "./jsx";
import { Sidebar } from "./components/Sidebar";
import { PaliadinWidget } from "./components/PaliadinWidget";
import { BottomNav } from "./components/BottomNav";
import { Footer } from "./components/Footer";
import { PWAHead } from "./components/PWAHead";

export function renderAdminPartnerUnits(): string {
  return "<!DOCTYPE html>" + (
    <html lang="de">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
        <meta name="theme-color" content="#BFF355" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <PWAHead />
        <title data-i18n="admin.partner_units.title">Partner Units &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/admin/partner-units" />
        <BottomNav currentPath="/admin/partner-units" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <div>
                  <h1 data-i18n="admin.partner_units.heading">Partner Units</h1>
                  <p className="tool-subtitle" data-i18n="admin.partner_units.subtitle">
                    Strukturelle Partnereinheiten verwalten und Mitglieder zuordnen.
                  </p>
                </div>
                <div className="admin-team-actions">
                  <button className="btn-primary" id="pu-new-btn" type="button" data-i18n="admin.partner_units.new">
                    Neue Partner Unit
                  </button>
                </div>
              </div>

              <div id="pu-feedback" className="form-msg" style="display:none" />

              <div className="entity-table-wrap admin-team-table-wrap">
                <table className="entity-table entity-table--readonly admin-team-table">
                  <thead>
                    <tr>
                      <th data-i18n="admin.partner_units.col.name">Name</th>
                      <th data-i18n="admin.partner_units.col.office">B&uuml;ro</th>
                      <th data-i18n="admin.partner_units.col.lead">Lead</th>
                      <th data-i18n="admin.partner_units.col.members">Mitglieder</th>
                      <th data-i18n="admin.partner_units.col.actions">Aktionen</th>
                    </tr>
                  </thead>
                  <tbody id="pu-tbody">
                    <tr><td colspan={5} className="admin-team-loading" data-i18n="admin.partner_units.loading">Lade...</td></tr>
                  </tbody>
                </table>
              </div>

              <div className="entity-empty" id="pu-empty" style="display:none">
                <p data-i18n="admin.partner_units.empty">Noch keine Partner Units angelegt.</p>
              </div>
            </div>
          </section>
        </main>

        {/* Create / edit modal — same shape for both, "id" is empty when
            creating. Office select is populated from /api/offices at init,
            lead picker from /api/users (filtered to display_name+email). */}
        <div className="modal-overlay" id="pu-edit-modal" style="display:none">
          <div className="modal-card">
            <div className="modal-header">
              <h2 id="pu-edit-title" data-i18n="admin.partner_units.new.heading">Partner Unit anlegen</h2>
              <button className="modal-close" id="pu-edit-close" type="button" aria-label="Close">&times;</button>
            </div>
            <form id="pu-edit-form" className="entity-form" autocomplete="off">
              <input type="hidden" id="pu-edit-id" />
              <div className="form-field">
                <label htmlFor="pu-edit-name" data-i18n="admin.partner_units.col.name">Name</label>
                <input type="text" id="pu-edit-name" required />
              </div>
              <div className="form-field">
                <label htmlFor="pu-edit-office" data-i18n="admin.partner_units.col.office">B&uuml;ro</label>
                <select id="pu-edit-office" required />
              </div>
              <div className="form-field">
                <label htmlFor="pu-edit-lead" data-i18n="admin.partner_units.col.lead">Lead</label>
                <select id="pu-edit-lead">
                  <option value="">&mdash;</option>
                </select>
              </div>
              <p className="form-msg" id="pu-edit-msg" />
              <div className="form-actions">
                <button type="button" className="btn-cancel" id="pu-edit-cancel" data-i18n="admin.partner_units.cancel">Abbrechen</button>
                <button type="submit" className="btn-primary btn-cta-lime" data-i18n="admin.partner_units.create">Speichern</button>
              </div>
            </form>
          </div>
        </div>

        {/* Member-management modal — opens from the row's "Verwalten" button. */}
        <div className="modal-overlay" id="pu-members-modal" style="display:none">
          <div className="modal-card">
            <div className="modal-header">
              <h2 id="pu-members-title">Mitglieder verwalten</h2>
              <button className="modal-close" id="pu-members-close" type="button" aria-label="Close">&times;</button>
            </div>
            <div id="pu-members-body">
              <ul className="partner-unit-member-list" id="pu-members-list" />
              <form id="pu-add-form" autocomplete="off" className="entity-form">
                <div className="form-field">
                  <label htmlFor="pu-add-input" data-i18n="admin.partner_units.member.add">Mitglied hinzuf&uuml;gen</label>
                  <input type="text" id="pu-add-input" data-i18n-placeholder="admin.partner_units.member.placeholder" placeholder="Name oder E-Mail" />
                  <input type="hidden" id="pu-add-user-id" />
                  <div className="collab-suggestions" id="pu-add-suggestions" />
                </div>
                <p className="form-msg" id="pu-add-msg" />
                <div className="form-actions">
                  <button type="submit" className="btn-primary btn-cta-lime btn-small" data-i18n="admin.partner_units.member.add_btn">Hinzuf&uuml;gen</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <Footer />
        <PaliadinWidget />
        <script src="/assets/admin-partner-units.js"></script>
      </body>
    </html>
  );
}
