---
import BaseLayout from '../../layouts/BaseLayout.astro';
import {
  createApiClient,
  resolvePublicApiBaseUrl,
  type PublicManagedSubscription,
} from '../../lib/api/client';

const token = Astro.url.searchParams.get('token')?.trim() ?? '';
const api = createApiClient({ requestUrl: Astro.url });
const apiBaseUrl = resolvePublicApiBaseUrl(Astro.url);
const EVENT_OPTIONS = [
  { value: 'post.published', label: '新文章通知' },
  { value: 'digest.weekly', label: '每周简报' },
  { value: 'digest.monthly', label: '每月简报' },
  { value: 'comment.created', label: '评论通知' },
  { value: 'friend_link.created', label: '友链申请通知' },
] as const;

const asObject = (value: unknown) => {
  if (!value || typeof value !== 'object' || Array.isArray(value)) {
    return {} as Record<string, unknown>;
  }
  return value as Record<string, unknown>;
};

const normalizeStringList = (value: unknown) => {
  if (!Array.isArray(value)) {
    return [] as string[];
  }
  return value
    .map((item) => String(item).trim())
    .filter(Boolean);
};

let subscription: PublicManagedSubscription | null = null;
let errorMessage = '';

if (token) {
  try {
    const response = await api.getManagedSubscription(token);
    subscription = response.subscription;
  } catch (error) {
    errorMessage = error instanceof Error ? error.message : '无法加载订阅信息。';
  }
} else {
  errorMessage = '缺少管理令牌。';
}

const filters = asObject(subscription?.filters);
const initialEvents = normalizeStringList(filters.event_types);
const initialCategories = normalizeStringList(filters.categories).join(', ');
const initialTags = normalizeStringList(filters.tags).join(', ');
const initialDisplayName = subscription?.display_name ?? '';
const initialStatus = subscription?.status === 'paused' ? 'paused' : 'active';
---

<BaseLayout title="管理订阅偏好" description="调整订阅偏好、暂停订阅或查看当前订阅状态。" noindex>
  <section class="subscription-shell">
    <div class="subscription-card" data-subscription-manage-root data-api-base={apiBaseUrl}>
      <p class="subscription-kicker">subscriptions / manage</p>
      <h1>管理订阅偏好</h1>
      {subscription ? (
        <>
          <p class="subscription-copy">当前目标：<strong>{subscription.target}</strong> · 频道：{subscription.channel_type}</p>
          <p class="subscription-copy">验证状态：{subscription.verified_at ? '已确认' : '待确认'} · 当前状态：{subscription.status}</p>

          <form class="subscription-form" data-manage-form>
            <input type="hidden" name="token" value={token} />
            <label>
              <span>称呼</span>
              <input type="text" name="displayName" value={initialDisplayName} placeholder="例如：主邮箱 / 运营邮箱" />
            </label>

            <fieldset>
              <legend>通知类型</legend>
              <div class="subscription-grid">
                {EVENT_OPTIONS.map((item) => (
                  <label class="subscription-checkbox">
                    <input type="checkbox" name="eventTypes" value={item.value} checked={initialEvents.includes(item.value)} />
                    <span>{item.label}</span>
                  </label>
                ))}
              </div>
            </fieldset>

            <div class="subscription-split">
              <label>
                <span>只看这些分类（可选）</span>
                <input type="text" name="categories" value={initialCategories} placeholder="Rust, Astro, 日志" />
              </label>
              <label>
                <span>只看这些标签（可选）</span>
                <input type="text" name="tags" value={initialTags} placeholder="web, ai, deploy" />
              </label>
            </div>

            <fieldset>
              <legend>订阅状态</legend>
              <div class="subscription-grid compact">
                <label class="subscription-checkbox">
                  <input type="radio" name="status" value="active" checked={initialStatus === 'active'} />
                  <span>继续接收</span>
                </label>
                <label class="subscription-checkbox">
                  <input type="radio" name="status" value="paused" checked={initialStatus === 'paused'} />
                  <span>先暂停</span>
                </label>
              </div>
            </fieldset>

            <div class="subscription-actions">
              <button type="submit">保存偏好</button>
              <a href={`/subscriptions/unsubscribe?token=${encodeURIComponent(token)}`}>去退订</a>
            </div>
          </form>

          <p class="subscription-status" data-manage-status>你可以随时在这里调整通知类型、暂停或退订。</p>
        </>
      ) : (
        <p class="subscription-status is-warning">{errorMessage}</p>
      )}
    </div>
  </section>
</BaseLayout>

{subscription && (
  <script>
    const root = document.querySelector('[data-subscription-manage-root]');
    const form = root?.querySelector?.('[data-manage-form]');
    const status = root?.querySelector?.('[data-manage-status]');
    const apiBase = root?.getAttribute?.('data-api-base') || '';

    if (form instanceof HTMLFormElement && status instanceof HTMLElement && apiBase) {
      form.addEventListener('submit', async (event) => {
        event.preventDefault();
        const formData = new FormData(form);
        const token = String(formData.get('token') || '').trim();
        const displayName = String(formData.get('displayName') || '').trim();
        const statusValue = String(formData.get('status') || 'active').trim();
        const categories = String(formData.get('categories') || '')
          .split(/[，,]/)
          .map((item) => item.trim())
          .filter(Boolean);
        const tags = String(formData.get('tags') || '')
          .split(/[，,]/)
          .map((item) => item.trim())
          .filter(Boolean);
        const eventTypes = formData
          .getAll('eventTypes')
          .map((item) => String(item).trim())
          .filter(Boolean);

        status.textContent = '保存中...';

        const filters = {
          event_types: eventTypes,
          categories,
          tags,
        };

        try {
          const response = await fetch(`${apiBase}/subscriptions/manage`, {
            method: 'PATCH',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              token,
              displayName: displayName || null,
              status: statusValue,
              filters,
            }),
          });
          const payload = await response.json().catch(() => ({}));
          if (!response.ok) {
            throw new Error(payload?.description || payload?.message || '保存失败，请稍后重试。');
          }
          status.textContent = '偏好已保存。';
        } catch (error) {
          status.textContent = error instanceof Error ? error.message : '保存失败，请稍后重试。';
        }
      });
    }
  </script>
)}

<style>
  .subscription-shell {
    max-width: 54rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
  }

  .subscription-card {
    border: 1px solid rgba(94, 234, 212, 0.16);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.72));
    border-radius: 1.25rem;
    padding: 1.5rem;
    color: var(--text-primary);
  }

  .subscription-kicker {
    margin: 0 0 0.5rem;
    color: var(--primary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
  }

  h1 {
    margin: 0;
    font-size: 1.75rem;
  }

  .subscription-copy {
    margin: 0.65rem 0 0;
    color: var(--text-secondary);
    line-height: 1.75;
  }

  .subscription-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.4rem;
  }

  .subscription-form label,
  .subscription-form fieldset {
    display: grid;
    gap: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.24);
  }

  .subscription-form span,
  .subscription-form legend {
    color: var(--text-secondary);
    font-size: 0.9rem;
  }

  .subscription-form input[type='text'] {
    width: 100%;
    border-radius: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.45);
    color: var(--text-primary);
    padding: 0.85rem 0.95rem;
  }

  .subscription-grid {
    display: grid;
    gap: 0.75rem;
  }

  .subscription-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .subscription-checkbox {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem !important;
  }

  .subscription-checkbox input {
    accent-color: var(--primary);
  }

  .subscription-split {
    display: grid;
    gap: 1rem;
  }

  .subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.25rem;
  }

  .subscription-actions button,
  .subscription-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 0;
    padding: 0.9rem 1.05rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }

  .subscription-actions button {
    color: #08111f;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
  }

  .subscription-actions a {
    color: var(--text-primary);
    border: 1px solid rgba(148, 163, 184, 0.24);
  }

  .subscription-status {
    margin: 1rem 0 0;
    color: var(--text-secondary);
    line-height: 1.8;
  }

  .subscription-status.is-warning {
    padding: 0.95rem 1rem;
    border-radius: 0.95rem;
    background: rgba(245, 158, 11, 0.14);
    color: #fde68a;
  }

  @media (min-width: 900px) {
    .subscription-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscription-split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
</style>