import { DashboardShell } from '../../../../components/dashboard-shell';
import { WhatsappSettingsForm } from '../../../../components/whatsapp-settings-form';
import { requireAuthToken } from '../../../../lib/auth';
import { fetchWhatsappSettings } from '../../../../lib/api';

function maskSecret(enabled: boolean) {
  return enabled ? 'Configured' : 'Not configured';
}

export default async function WhatsappApiSettingsPage() {
  const token = await requireAuthToken();
  const settings = await fetchWhatsappSettings(token);

  return (
    <DashboardShell currentPath="/dashboard/settings/whatsapp-api">
      <section className="page-header">
        <div>
          <p className="page-eyebrow">Settings</p>
          <h1 className="page-heading">WhatsApp API Setting</h1>
          <p className="page-copy">
            Halaman ini hanya menampilkan parameter yang memang didukung backend saat ini: provider,
            webhook URL, verify token, shared secret/app secret status, dan status koneksi.
          </p>
        </div>
      </section>

      <section className="dashboard-two-column">
        <WhatsappSettingsForm
          initialValues={{
            provider: settings.provider,
            verifyToken: settings.verifyToken,
            phoneNumberId: settings.phoneNumberId,
            isEnabled: settings.isEnabled,
            subscriptions: settings.subscriptions,
            availableSubscriptions: settings.availableSubscriptions,
          }}
        />

        <article className="surface-card">
          <div className="metric-stack">
            <div>
              <strong>{settings.isEnabled ? 'Enabled' : 'Disabled'}</strong>
              <span>Integration runtime switch</span>
            </div>
            <div>
              <strong>{settings.hasSharedSecret ? 'Shared secret ready' : 'Shared secret missing'}</strong>
              <span>Generic provider verification</span>
            </div>
            <div>
              <strong>{settings.hasAppSecret ? 'Meta signature ready' : 'Meta signature inactive'}</strong>
              <span>Meta-specific signature validation</span>
            </div>
            <div>
              <strong>{settings.hasAccessToken ? 'Access token ready' : 'Access token missing'}</strong>
              <span>Required for outbound message send from Conversations</span>
            </div>
            <div>
              <strong>{settings.webhookUrl}</strong>
              <span>Current webhook destination URL</span>
            </div>
            <div>
              <strong>{settings.subscriptions.length} active subscriptions</strong>
              <span>
                {settings.availableSubscriptions
                  .filter((item) => settings.subscriptions.includes(item.key))
                  .map((item) => item.label)
                  .join(', ') || 'No subscriptions enabled'}
              </span>
            </div>
          </div>
        </article>
      </section>

      <section className="dashboard-two-column">
        <article className="surface-card">
          <h2>Parameter Match Check</h2>
          <p>
            Sesuai backend: `provider`, `webhookUrl`, `verifyToken`, `sharedSecret`, `appSecret`,
            `accessToken`, `phoneNumberId`, `isEnabled`, `subscriptions`, dan test webhook.
          </p>
          <p>
            Belum ada di backend: sender pool count, latency metrics, dan delivery
            success analytics khusus settings page.
          </p>
        </article>
        <article className="surface-card">
          <h2>Secret Visibility Note</h2>
          <p>
            Backend tidak mengembalikan nilai secret asli. Form edit hanya bisa mengganti secret,
            bukan membaca ulang nilainya.
          </p>
          <p>
            Status `Configured` berarti secret sudah ada di backend, tetapi nilainya tetap disembunyikan.
          </p>
        </article>
      </section>
    </DashboardShell>
  );
}
