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 renderAdminTeam(): 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.team.title">Team-Verwaltung &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/admin/team" />
        <BottomNav currentPath="/admin/team" />

        <main>
          <section className="tool-page">
            <div className="container">
              <div className="tool-header">
                <div>
                  <h1 data-i18n="admin.team.heading">Team-Verwaltung</h1>
                  <p className="tool-subtitle" data-i18n="admin.team.subtitle">
                    Alle Paliad-Konten anzeigen, bearbeiten oder hinzuf&uuml;gen.
                  </p>
                </div>
                <div className="admin-team-actions">
                  <button className="btn-primary" id="admin-team-direct-add" type="button" data-i18n="admin.team.add.direct">
                    Bestehendes Konto onboarden
                  </button>
                  <button className="btn-primary" id="admin-team-invite" type="button" data-i18n="admin.team.add.invite">
                    Neue:n Kolleg:in einladen
                  </button>
                </div>
              </div>

              <div className="admin-team-controls">
                <div className="glossar-search-wrap">
                  <svg className="glossar-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8" />
                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
                  </svg>
                  <input
                    type="text"
                    id="admin-team-search"
                    className="glossar-search"
                    placeholder="Nach Name oder E-Mail suchen..."
                    data-i18n-placeholder="admin.team.search.placeholder"
                    autocomplete="off"
                  />
                  <span className="glossar-count" id="admin-team-count" />
                </div>
                <div className="admin-team-filter-row" id="admin-team-office-filters">
                  <button className="filter-pill active" data-office="all" type="button" data-i18n="team.filter.all">Alle</button>
                </div>
              </div>

              <div id="admin-team-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.team.col.name">Name</th>
                      <th data-i18n="admin.team.col.email">E-Mail</th>
                      <th data-i18n="admin.team.col.office">Standort</th>
                      <th data-i18n="admin.team.col.job_title">Berufsbezeichnung</th>
                      <th data-i18n="admin.team.col.profession">Profession</th>
                      <th data-i18n="admin.team.col.permission">Berechtigung</th>
                      <th data-i18n="admin.team.col.additional">Weitere Standorte</th>
                      <th data-i18n="admin.team.col.lang">Sprache</th>
                      <th data-i18n="admin.team.col.created">Angelegt</th>
                      <th data-i18n="admin.team.col.actions">Aktionen</th>
                    </tr>
                  </thead>
                  <tbody id="admin-team-tbody">
                    <tr><td colspan={10} className="admin-team-loading" data-i18n="admin.team.loading">Lade...</td></tr>
                  </tbody>
                </table>
              </div>

              <div className="entity-empty" id="admin-team-empty" style="display:none">
                <p data-i18n="admin.team.empty">Keine Treffer.</p>
              </div>
            </div>
          </section>
        </main>

        {/* Direct-add modal: pick from unonboarded auth.users dropdown. */}
        <div className="modal-overlay" id="admin-direct-add-modal" style="display:none">
          <div className="modal-card">
            <div className="modal-header">
              <h2 data-i18n="admin.team.direct_add.title">Bestehendes Konto onboarden</h2>
              <button className="modal-close" id="admin-direct-add-close" type="button" aria-label="Close">&times;</button>
            </div>
            <p data-i18n="admin.team.direct_add.body" className="invite-modal-body">
              Diese Auswahl zeigt Konten, die sich angemeldet haben, aber noch kein Profil ausgef&uuml;llt haben.
            </p>
            <form id="admin-direct-add-form" className="entity-form" autocomplete="off">
              <div className="form-field">
                <label htmlFor="admin-da-email" data-i18n="admin.team.direct_add.email">E-Mail</label>
                <select id="admin-da-email" name="email" required>
                  <option value="" data-i18n="admin.team.direct_add.email.placeholder">Bitte ausw&auml;hlen...</option>
                </select>
              </div>
              <div className="form-field">
                <label htmlFor="admin-da-name" data-i18n="admin.team.direct_add.name">Anzeigename</label>
                <input type="text" id="admin-da-name" name="display_name" required />
              </div>
              <div className="form-field">
                <label htmlFor="admin-da-office" data-i18n="admin.team.direct_add.office">Standort</label>
                <select id="admin-da-office" name="office" required />
              </div>
              <div className="form-field">
                <label htmlFor="admin-da-role" data-i18n="admin.team.direct_add.job_title">Berufsbezeichnung</label>
                <input type="text" id="admin-da-role" name="job_title" placeholder="Associate" />
              </div>
              <div id="admin-da-feedback" className="form-msg" style="display:none" />
              <div className="form-actions">
                <button type="button" className="btn-cancel" id="admin-da-cancel" data-i18n="admin.team.direct_add.cancel">Abbrechen</button>
                <button type="submit" className="btn-primary" id="admin-da-submit" data-i18n="admin.team.direct_add.submit">Anlegen</button>
              </div>
            </form>
          </div>
        </div>

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