---
export const prerender = false;

import AdminLayout from '../../../layouts/AdminLayout.astro';
import type { Querier } from '@platform-modules/db';
import { maskSecretKey, loadAdminDb } from '../../../lib/admin.js';
import { getStoreSettings } from '../../../lib/settings.js';

type TabKey = 'general' | 'payment' | 'tax' | 'mail' | 'theme';

const tabParam = Astro.url.searchParams.get('tab');
const activeTab: TabKey =
  tabParam === 'payment' || tabParam === 'tax' || tabParam === 'mail' || tabParam === 'theme'
    ? tabParam
    : 'general';

const dbResult = loadAdminDb();
let error: string | null = null;
let settings: Awaited<ReturnType<typeof getStoreSettings>> | null = null;

if (!dbResult.ok) {
  error = dbResult.error;
} else {
  try {
    settings = await getStoreSettings(dbResult.db as unknown as Querier);
  } catch (e) {
    error = e instanceof Error ? e.message : 'Failed to load settings.';
  }
}

const tabs: { key: TabKey; label: string }[] = [
  { key: 'general', label: 'General' },
  { key: 'payment', label: 'Payment' },
  { key: 'tax', label: 'Tax' },
  { key: 'mail', label: 'Mail' },
  { key: 'theme', label: 'Theme' },
];
---

<AdminLayout title="Settings">
  <h1 class="mb-6 text-2xl font-semibold">Settings</h1>

  {error ? (
    <p class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-800" role="alert">{error}</p>
  ) : !settings ? (
    <p class="text-gray-600">Settings unavailable.</p>
  ) : (
    <>
      <nav class="mb-6 flex flex-wrap gap-2 border-b border-[var(--mod-color-border)]" aria-label="Settings sections">
        {tabs.map((tab) => (
          <a
            href={`/admin/settings?tab=${tab.key}`}
            class:list={[
              'inline-flex items-center gap-2 border-b-2 px-3 py-2 text-sm font-medium -mb-px',
              activeTab === tab.key
                ? 'border-[var(--mod-color-accent)] text-[var(--mod-color-accent)]'
                : 'border-transparent text-gray-600 hover:text-gray-900',
            ]}
          >
            {tab.label}
          </a>
        ))}
      </nav>

      <section class:list={[{ hidden: activeTab !== 'general' }]}>
        <form method="post" action="/api/admin/settings" class="max-w-lg space-y-4">
          <div>
            <label class="mb-1 block text-sm font-medium" for="storeName">Store name</label>
            <input
              id="storeName"
              name="storeName"
              type="text"
              required
              value={settings.storeName}
              class="w-full rounded-md border border-[var(--mod-color-border)] px-3 py-2"
            />
          </div>

          <div>
            <label class="mb-1 block text-sm font-medium" for="currency">Currency</label>
            <input
              id="currency"
              name="currency"
              type="text"
              required
              value={settings.currency}
              class="w-full rounded-md border border-[var(--mod-color-border)] px-3 py-2 uppercase"
            />
          </div>

          <div>
            <label class="mb-1 block text-sm font-medium" for="locale">Locale</label>
            <input
              id="locale"
              name="locale"
              type="text"
              required
              value={settings.locale}
              class="w-full rounded-md border border-[var(--mod-color-border)] px-3 py-2"
            />
          </div>

          <input type="hidden" name="themeMode" value={settings.themeMode} />

          <button
            type="submit"
            class="rounded-md bg-[var(--mod-color-accent)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
          >
            Save settings
          </button>
        </form>
      </section>

      <section class:list={[{ hidden: activeTab !== 'payment' }]}>
        <div class="max-w-lg rounded-lg border border-[var(--mod-color-border)] p-4">
          <h2 class="mb-3 text-lg font-medium">Stripe</h2>
          <dl class="space-y-2 text-sm">
            <div class="flex justify-between gap-4">
              <dt class="text-gray-600">Secret key</dt>
              <dd class="font-mono">{maskSecretKey(settings.stripeSecretKey)}</dd>
            </div>
            <div class="flex justify-between gap-4">
              <dt class="text-gray-600">Publishable key</dt>
              <dd class="font-mono">{maskSecretKey(settings.stripePublishableKey)}</dd>
            </div>
            <div class="flex justify-between gap-4">
              <dt class="text-gray-600">Test mode</dt>
              <dd>{settings.stripeTestMode ? 'Enabled' : 'Disabled'}</dd>
            </div>
          </dl>
          <p class="mt-3 text-xs text-gray-600">Stripe credentials can be updated via the settings API in W7.</p>
        </div>
      </section>

      <section class:list={[{ hidden: activeTab !== 'tax' }]}>
        <p class="max-w-lg text-sm text-gray-600">
          Tax rates configured via @platform-modules/tax (coming soon)
        </p>
      </section>

      <section class:list={[{ hidden: activeTab !== 'mail' }]}>
        <p class="max-w-lg text-sm text-gray-600">
          Email provider configured via @platform-modules/mail (coming soon)
        </p>
      </section>

      <section class:list={[{ hidden: activeTab !== 'theme' }]}>
        <form method="post" action="/api/admin/settings" class="max-w-lg space-y-4">
          <input type="hidden" name="storeName" value={settings.storeName} />
          <input type="hidden" name="currency" value={settings.currency} />
          <input type="hidden" name="locale" value={settings.locale} />

          <div>
            <label class="mb-1 block text-sm font-medium" for="themeMode">Theme mode</label>
            <select id="themeMode" name="themeMode" class="w-full rounded-md border border-[var(--mod-color-border)] px-3 py-2">
              {(['system', 'light', 'dark'] as const).map((mode) => (
                <option value={mode} selected={settings.themeMode === mode}>
                  {mode.charAt(0).toUpperCase() + mode.slice(1)}
                </option>
              ))}
            </select>
          </div>

          <button
            type="submit"
            class="rounded-md bg-[var(--mod-color-accent)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
          >
            Save settings
          </button>
        </form>
      </section>
    </>
  )}
</AdminLayout>