import { AdminLayout } from "./AdminLayout.tsx";

export const AdminAppsPage = ({
  apps,
}: {
  apps: any[];
}) => {
  return (
    <AdminLayout title="Application Registry" currentPath="/admin/apps">
      <div
        id="status-banner"
        style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 4px; font-size: 0.9rem;"
      />

      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <h2 style="margin: 0; border: none; padding: 0;">
          Connected Applications
        </h2>
        <button
          type="button"
          class="btn-action btn-success"
          style="padding: 0.5rem 1rem; font-size: 0.9rem;"
          onclick="toggleRegisterForm()"
        >
          + Register Application
        </button>
      </div>

      <div
        id="register-app-card"
        class="card"
        style="display: none; border-left: 4px solid #28a745; margin-bottom: 1.5rem;"
      >
        <h3>Register New Subsidiary Application</h3>
        <p style="color: #6c757d; font-size: 0.9rem;">
          Register an internal microservice or subsidiary application. The
          system will authenticate incoming ConnectRPC requests against the
          application's SPIFFE ID.
        </p>

        <form id="registerAppForm" onsubmit="handleRegisterApp(event)">
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
            <div>
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                Application Name *
              </label>
              <input
                type="text"
                id="appName"
                name="name"
                placeholder="e.g. Elite Dangerous Streaming Hub"
                required
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
              />
            </div>
            <div>
              <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
                SPIFFE ID (Workload Identity) *
              </label>
              <input
                type="text"
                id="appSpiffeId"
                name="spiffeId"
                placeholder="e.g. spiffe://system.local/ed-droid-backend"
                required
                style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
              />
            </div>
          </div>

          <div style="margin-bottom: 1rem;">
            <label style="display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.85rem;">
              Description (Optional)
            </label>
            <input
              type="text"
              id="appDescription"
              name="description"
              placeholder="e.g. Headless data streaming hub and UI module system"
              style="width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box;"
            />
          </div>

          <div style="display: flex; gap: 0.5rem;">
            <button type="submit" class="btn-action btn-success">
              Save Application
            </button>
            <button
              type="button"
              class="btn-action"
              onclick="toggleRegisterForm()"
            >
              Cancel
            </button>
          </div>
        </form>
      </div>

      <div class="card">
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Application Name</th>
                <th>SPIFFE Workload ID</th>
                <th>Active Users / Grants</th>
                <th>Description</th>
                <th>Registered Date</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {apps.length === 0
                ? (
                  <tr>
                    <td
                      colspan={6}
                      style="text-align: center; color: #6c757d; padding: 2rem;"
                    >
                      No connected applications registered yet.
                    </td>
                  </tr>
                )
                : (
                  apps.map((app) => (
                    <tr key={app.id}>
                      <td>
                        <strong>{app.name}</strong>
                      </td>
                      <td>
                        <code style="background: #e9ecef; padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.8rem; color: #0d6efd;">
                          {app.spiffe_id}
                        </code>
                      </td>
                      <td>
                        <span class="badge badge-info">
                          {app.active_grants_count || 0} users
                        </span>
                      </td>
                      <td style="color: #6c757d; font-size: 0.85rem;">
                        {app.description || "-"}
                      </td>
                      <td style="font-size: 0.85rem;">
                        {new Date(app.created_at).toLocaleDateString()}
                      </td>
                      <td>
                        <button
                          type="button"
                          class="btn-action btn-warning"
                          onclick={`deleteApp('${app.id}', '${app.name}')`}
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  ))
                )}
            </tbody>
          </table>
        </div>
      </div>

      <script
        dangerouslySetInnerHTML={{
          __html: `
          function showNotice(msg, isError) {
            const banner = document.getElementById('status-banner');
            banner.textContent = msg;
            banner.style.display = 'block';
            banner.style.background = isError ? '#f8d7da' : '#d1e7dd';
            banner.style.color = isError ? '#842029' : '#0f5132';
            banner.style.border = isError ? '1px solid #f5c2c7' : '1px solid #badbcc';
            setTimeout(() => { banner.style.display = 'none'; }, 6000);
          }

          function toggleRegisterForm() {
            const el = document.getElementById('register-app-card');
            el.style.display = el.style.display === 'none' ? 'block' : 'none';
          }

          async function handleRegisterApp(e) {
            e.preventDefault();
            const name = document.getElementById('appName').value.trim();
            const spiffeId = document.getElementById('appSpiffeId').value.trim();
            const description = document.getElementById('appDescription').value.trim();

            if (!name || !spiffeId) {
              showNotice('Name and SPIFFE ID are required', true);
              return;
            }

            try {
              const res = await fetch('/api/admin/apps', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name, spiffeId, description }),
              });
              const data = await res.json();
              if (res.ok) {
                showNotice('Application registered successfully!', false);
                setTimeout(() => window.location.reload(), 800);
              } else {
                showNotice(data.error || 'Failed to register application', true);
              }
            } catch (err) {
              showNotice('Network error registering application', true);
            }
          }

          async function deleteApp(appId, appName) {
            if (!confirm('Are you sure you want to delete "' + appName + '"? All active user permissions for this app will be revoked.')) {
              return;
            }
            try {
              const res = await fetch('/api/admin/apps/' + appId, {
                method: 'DELETE',
              });
              if (res.ok) {
                showNotice('Application deleted', false);
                setTimeout(() => window.location.reload(), 800);
              } else {
                const data = await res.json();
                showNotice(data.error || 'Failed to delete application', true);
              }
            } catch (err) {
              showNotice('Network error', true);
            }
          }
        `,
        }}
      />
    </AdminLayout>
  );
};