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

export const PasskeysPage = ({
  passkeys,
  isAdmin = false,
}: {
  passkeys: any[];
  isAdmin?: boolean;
}) => {
  return (
    <AuthenticatedLayout
      title="Passkeys"
      currentPath="/dashboard/passkeys"
      isAdmin={isAdmin}
    >
      <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);">
            Registered Passkeys
          </h1>
          <p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
            Manage FIDO2 WebAuthn credentials and biometric authenticators.
          </p>
        </div>

        <button
          type="button"
          id="addPasskeyBtn"
          class="btn-primary"
          style="min-height: 44px; box-shadow: var(--shadow-sm);"
        >
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          <span>Enroll New Passkey</span>
        </button>
      </div>

      {/* Add Passkey Drawer / Container */}
      <div
        id="addPasskeyContainer"
        class="card"
        style="display: none; border-color: var(--primary); background: var(--primary-light); margin-bottom: 1.5rem;"
      >
        <h3 style="margin: 0 0 0.5rem 0; color: var(--primary);">
          Enroll New Passkey
        </h3>
        <p style="font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 1rem 0;">
          Insert a hardware security key (YubiKey) or follow your device's
          biometric prompt.
        </p>

        <div
          id="addPasskeyStatus"
          style="margin-bottom: 1rem; font-size: 0.9rem; font-weight: 600;"
        >
        </div>

        <div style="display: flex; gap: 0.75rem;">
          <button
            type="button"
            id="confirmAddPasskeyBtn"
            class="btn-primary"
          >
            Start Device Prompt
          </button>
          <button
            type="button"
            id="cancelAddPasskeyBtn"
            class="btn-outline"
          >
            Cancel
          </button>
        </div>
      </div>

      {/* Desktop Table View (≥ 768px) */}
      <div class="card desktop-only" style="display: none;">
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Credential ID</th>
                <th>Sign Counter</th>
                <th>AAGUID Vendor</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {passkeys.length === 0
                ? (
                  <tr>
                    <td
                      colSpan={4}
                      style="text-align: center; padding: 2rem; color: var(--text-muted);"
                    >
                      No passkeys registered.
                    </td>
                  </tr>
                )
                : (
                  passkeys.map((passkey) => (
                    <tr key={passkey.id}>
                      <td>
                        <code style="background: var(--surface-muted); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 0.85rem;">
                          {passkey.credential_id
                            ? `${passkey.credential_id.substring(0, 16)}...`
                            : passkey.id}
                        </code>
                      </td>
                      <td style="color: var(--text-secondary);">
                        {passkey.counter}
                      </td>
                      <td>
                        <span class="badge badge-info">
                          {passkey.aaguid
                            ? passkey.aaguid.substring(0, 8)
                            : "FIDO2 Key"}
                        </span>
                      </td>
                      <td>
                        <button
                          type="button"
                          class="btn-danger revoke-passkey-btn"
                          data-passkey-id={passkey.id}
                          disabled={passkeys.length <= 1}
                          style={passkeys.length <= 1
                            ? "opacity: 0.5; cursor: not-allowed;"
                            : ""}
                        >
                          Remove
                        </button>
                      </td>
                    </tr>
                  ))
                )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Mobile Adaptive Cards View (< 768px) */}
      <div
        class="mobile-only"
        style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;"
      >
        {passkeys.length === 0
          ? (
            <div class="card" style="text-align: center; padding: 2rem;">
              <p style="color: var(--text-muted); margin: 0;">
                No passkeys registered.
              </p>
            </div>
          )
          : (
            passkeys.map((passkey) => (
              <div class="card" key={passkey.id} 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: 36px; height: 36px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md);">
                      <svg
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                      >
                        <circle cx="7.5" cy="15.5" r="5.5"></circle>
                        <path d="m21 2-9.6 9.6"></path>
                        <path d="m15.5 7.5 3 3L22 7l-3-3"></path>
                      </svg>
                    </div>
                    <div>
                      <div style="font-weight: 700; color: var(--text-primary);">
                        Passkey Credential
                      </div>
                      <div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
                        {passkey.credential_id
                          ? `${passkey.credential_id.substring(0, 14)}...`
                          : passkey.id}
                      </div>
                    </div>
                  </div>

                  <span class="badge badge-info">
                    {passkey.aaguid ? "Hardware/OS" : "FIDO2"}
                  </span>
                </div>

                <div style="font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem;">
                  <div>
                    <strong>Counter:</strong> {passkey.counter} authentications
                  </div>
                </div>

                <button
                  type="button"
                  class="btn-danger revoke-passkey-btn"
                  data-passkey-id={passkey.id}
                  disabled={passkeys.length <= 1}
                  style={`width: 100%; min-height: 44px; ${
                    passkeys.length <= 1
                      ? "opacity: 0.5; cursor: not-allowed;"
                      : ""
                  }`}
                >
                  {passkeys.length <= 1
                    ? "Cannot Remove Last Passkey"
                    : "Remove Passkey"}
                </button>
              </div>
            ))
          )}
      </div>

      {/* Emergency Recovery Backup Section */}
      <div class="card" style="border-left: 4px solid var(--warning);">
        <div style="display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; 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: 36px; height: 36px; background: var(--warning-bg); color: var(--warning-text); border-radius: var(--radius-md);">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
              </svg>
            </div>
            <div>
              <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
                Zero-Trust Recovery Backup
              </h3>
              <p style="margin: 0; font-size: 0.85rem; color: var(--text-secondary);">
                2-of-3 Shamir's Secret Sharing Matrix & Cold 12-Word Voucher
              </p>
            </div>
          </div>

          <span class="badge badge-warning">Active Protection</span>
        </div>

        <p style="color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; margin: 0 0 1.25rem 0;">
          If you lose your hardware keys or mobile device, your 12-word recovery
          voucher combined with your secret PIN allows you to re-enroll a fresh
          passkey without admin assistance.
        </p>

        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
          <button
            type="button"
            id="regenVoucherBtn"
            class="btn-outline"
            style="font-size: 0.85rem;"
          >
            📋 Generate Fresh 12-Word Recovery Voucher
          </button>
        </div>

        <div
          id="voucherModal"
          style="display: none; margin-top: 1.5rem; padding: 1.25rem; background: var(--surface-muted); border-radius: var(--radius-md); border: 1px solid var(--border-subtle);"
        >
          <div style="font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem;">
            New 12-Word Recovery Voucher:
          </div>
          <div
            id="generatedWordGrid"
            style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1rem;"
          >
            {/* Populated dynamically */}
          </div>
          <button
            type="button"
            id="copyVoucherBtn"
            class="btn-primary"
            style="width: 100%;"
          >
            Copy All 12 Words
          </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; }
          }
          .word-cell {
            background: var(--surface-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            padding: 0.35rem 0.65rem;
            font-size: 0.85rem;
            font-family: monospace;
            display: flex;
            align-items: center;
            gap: 0.5rem;
          }
        `}
      </style>

      <script
        type="module"
        dangerouslySetInnerHTML={{
          __html: `
          import { entropyToMnemonic } from '/public/ui/utils/bip39.ts';

          // Revoke Passkey Logic
          document.querySelectorAll('.revoke-passkey-btn').forEach(btn => {
            btn.addEventListener('click', async (e) => {
              if (e.currentTarget.disabled) return;
              if (!confirm('Are you sure you want to remove this passkey?')) return;

              const passkeyId = e.currentTarget.getAttribute('data-passkey-id');
              const originalText = e.currentTarget.textContent;
              e.currentTarget.textContent = 'Removing...';
              e.currentTarget.disabled = true;

              try {
                const res = await fetch(\`/api/passkeys/\${passkeyId}\`, {
                  method: 'DELETE'
                });

                if (res.ok) {
                  window.location.reload();
                } else {
                  const data = await res.json();
                  alert(data.error || 'Failed to remove passkey');
                  e.currentTarget.textContent = originalText;
                  e.currentTarget.disabled = false;
                }
              } catch (err) {
                alert('An error occurred');
                e.currentTarget.textContent = originalText;
                e.currentTarget.disabled = false;
              }
            });
          });

          // Add Passkey Logic
          const addContainer = document.getElementById('addPasskeyContainer');
          const addBtn = document.getElementById('addPasskeyBtn');
          const cancelBtn = document.getElementById('cancelAddPasskeyBtn');
          const confirmBtn = document.getElementById('confirmAddPasskeyBtn');
          const statusDiv = document.getElementById('addPasskeyStatus');

          addBtn?.addEventListener('click', () => {
            addContainer.style.display = 'block';
            addBtn.style.display = 'none';
          });

          cancelBtn?.addEventListener('click', () => {
            addContainer.style.display = 'none';
            addBtn.style.display = 'inline-flex';
            statusDiv.textContent = '';
          });

          confirmBtn?.addEventListener('click', async () => {
            confirmBtn.disabled = true;
            statusDiv.textContent = 'Follow prompt on device...';
            statusDiv.style.color = 'var(--primary)';

            try {
              const resp = await fetch("/api/passkeys/register/challenge", { method: "POST" });
              const data = await resp.json();
              if (!resp.ok) {
                statusDiv.textContent = data.error || "Failed to get registration challenge";
                statusDiv.style.color = 'var(--danger)';
                confirmBtn.disabled = false;
                return;
              }

              const { startRegistration } = SimpleWebAuthnBrowser;
              const attResp = await startRegistration({ optionsJSON: data.options });

              const verificationResp = await fetch("/api/passkeys/register/verify", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ response: attResp }),
              });

              const verificationJSON = await verificationResp.json();
              if (verificationJSON.success) {
                statusDiv.textContent = "Passkey registered successfully! Reloading...";
                statusDiv.style.color = 'var(--success-text)';
                setTimeout(() => window.location.reload(), 1000);
              } else {
                statusDiv.textContent = verificationJSON.error || "Registration verification failed";
                statusDiv.style.color = 'var(--danger)';
                confirmBtn.disabled = false;
              }
            } catch (err) {
              statusDiv.textContent = err.message || 'An error occurred.';
              statusDiv.style.color = 'var(--danger)';
              confirmBtn.disabled = false;
            }
          });

          // Re-generate Recovery Voucher
          let backupMnemonic = "";
          document.getElementById('regenVoucherBtn')?.addEventListener('click', async () => {
            const entropy = new Uint8Array(16);
            crypto.getRandomValues(entropy);
            backupMnemonic = await entropyToMnemonic(entropy);

            const grid = document.getElementById('generatedWordGrid');
            grid.innerHTML = backupMnemonic.split(' ').map((w, idx) => \`
              <div class="word-cell">
                <span style="color: var(--text-muted); font-size: 0.75rem; width: 18px;">\${idx + 1}.</span>
                <span style="color: var(--text-primary); font-weight: 600;">\${w}</span>
              </div>
            \`).join('');

            document.getElementById('voucherModal').style.display = 'block';
          });

          document.getElementById('copyVoucherBtn')?.addEventListener('click', async () => {
            if (!backupMnemonic) return;
            try {
              await navigator.clipboard.writeText(backupMnemonic);
              const btn = document.getElementById('copyVoucherBtn');
              const origHtml = btn.innerHTML;
              btn.innerHTML = '<span>✓ Copied 12 Words to Clipboard!</span>';
              setTimeout(() => { btn.innerHTML = origHtml; }, 2500);
            } catch (_e) {
              alert(backupMnemonic);
            }
          });
        `,
        }}
      >
      </script>
    </AuthenticatedLayout>
  );
};