import { AppDrawer } from "./admin/drawers/AppDrawer.tsx";
import { AdminAppsScript } from "./admin/AdminAppsScript.tsx";
import { AdminLayout } from "./AdminLayout.tsx";
import { AdminTable } from "./admin/AdminTable.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: var(--radius-md); font-size: 0.9rem;"
      />

      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
        <div>
          <h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
            Connected Applications
          </h1>
          <p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
            Register and manage subsidiary workloads and Edge Ingress proxy
            configurations.
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
          {/* Instant Search Bar */}
          <div style="position: relative; min-width: 220px;">
            <input
              type="text"
              id="appSearchInput"
              placeholder="Search apps by name, domain..."
              oninput="filterAppsList()"
              style="width: 100%; padding: 0.5rem 1rem 0.5rem 2.25rem; font-size: 0.875rem;"
            />
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none;"
            >
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </div>

          <button
            type="button"
            class="btn-primary"
            style="min-height: 40px;"
            onclick="openCreateAppDrawer()"
          >
            + Register App
          </button>
        </div>
      </div>

      <AppDrawer />

      <AdminTable
        id="appsTable"
        headers={[
          "Application Name",
          "SPIFFE ID",
          "Domain",
          "Active Users",
          "Description",
          "Actions",
        ]}
        isEmpty={apps.length === 0}
        emptyState="No connected applications registered yet."
        desktopRows={apps.map((app) => (
          <tr
            key={app.id}
            class="app-row"
            data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
              .toLowerCase()}
          >
            <td>
              <strong style="color: var(--text-primary);">
                {app.name}
              </strong>
            </td>
            <td>
              <code style="background: var(--surface-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: monospace; color: var(--primary);">
                {app.spiffe_id}
              </code>
            </td>
            <td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
              {app.domain || "-"}
            </td>
            <td>
              <span class="badge badge-info">
                {app.active_grants_count || 0} users
              </span>
            </td>
            <td style="color: var(--text-secondary); font-size: 0.85rem; max-width: 250px;">
              {app.description || "-"}
            </td>
            <td>
              <div style="display: flex; gap: 0.35rem;">
                <button
                  type="button"
                  class="btn-outline"
                  style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                  onclick={`openEditAppDrawer(${
                    JSON.stringify(JSON.stringify(app))
                  })`}
                >
                  Edit
                </button>
                <button
                  type="button"
                  class="btn-danger"
                  style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                  onclick={`deleteApp('${app.id}', '${app.name}')`}
                >
                  Delete
                </button>
              </div>
            </td>
          </tr>
        ))}
        mobileCards={apps.map((app) => (
          <div
            class="card app-card"
            key={app.id}
            data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
              .toLowerCase()}
            style="margin-bottom: 0;"
          >
            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
              <div style="display: flex; align-items: center; gap: 0.65rem;">
                <div style="display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md); font-weight: 700;">
                  {app.name.charAt(0).toUpperCase()}
                </div>
                <div>
                  <h3 style="margin: 0; font-size: 1.05rem; color: var(--text-primary);">
                    {app.name}
                  </h3>
                  <span style="font-size: 0.8rem; color: var(--text-muted); font-family: monospace;">
                    {app.domain || "No domain"}
                  </span>
                </div>
              </div>

              <span class="badge badge-info">
                {app.active_grants_count || 0} Users
              </span>
            </div>

            <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5;">
              <p style="margin: 0 0 0.5rem 0;">
                {app.description || "No description provided."}
              </p>
              <div>
                <strong>SPIFFE:</strong>{" "}
                <code style="font-family: monospace; font-size: 0.8rem;">
                  {app.spiffe_id}
                </code>
              </div>
            </div>

            <div style="display: flex; gap: 0.5rem;">
              <button
                type="button"
                class="btn-outline"
                style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
                onclick={`openEditAppDrawer(${
                  JSON.stringify(JSON.stringify(app))
                })`}
              >
                Edit App
              </button>
              <button
                type="button"
                class="btn-danger"
                style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
                onclick={`deleteApp('${app.id}', '${app.name}')`}
              >
                Delete
              </button>
            </div>
          </div>
        ))}
      />

      <style>
        {`
          @media (min-width: 768px) {
            .desktop-only { display: block !important; }
            .mobile-only { display: none !important; }
          }
          @media (max-width: 767px) {
            .desktop-only { display: none !important; }
            .mobile-only { display: flex !important; }
          }
        `}
      </style>

      <AdminAppsScript />
    </AdminLayout>
  );
};