'use client';

import { useCallback, useEffect, useState } from 'react';
import { apiService, usePreviewStepLocalizedContent, type ManageSubscriptionsResponse } from '@funnelsgrove/runtime';

import { subscriptionDashboardContent } from '@/steps/content/subscription-dashboard.content';

export default function ManageSubscriptionPage() {
  const content = usePreviewStepLocalizedContent('subscription-dashboard', subscriptionDashboardContent);
  const [data, setData] = useState<ManageSubscriptionsResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [updatingSubscriptionId, setUpdatingSubscriptionId] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      const payload = await apiService.getManageSubscriptions();
      setData(payload);
    } catch (err) {
      setError(err instanceof Error ? err.message : content.loadError);
    } finally {
      setLoading(false);
    }
  }, [content.loadError]);

  useEffect(() => {
    void load();
  }, [load]);

  const mutate = async (subscriptionId: string, action: 'cancel' | 'renew') => {
    setUpdatingSubscriptionId(subscriptionId);
    setError(null);

    try {
      const payload = await apiService.updateSubscription({
        subscriptionId,
        action,
      });
      setData(payload);
    } catch (err) {
      setError(err instanceof Error ? err.message : (action === 'cancel' ? content.cancelError : content.renewError));
    } finally {
      setUpdatingSubscriptionId(null);
    }
  };

  return (
    <main className="manage-subscription-page">
      <section className="manage-subscription-card">
        <header>
          <p className="manage-subscription-tag">{content.brand}</p>
          <h1 className="manage-subscription-title">{content.title}</h1>
          <p className="manage-subscription-description">
            {content.description}
          </p>
        </header>

        {loading ? <p className="manage-subscription-muted">{content.loading}</p> : null}
        {error ? <p className="manage-subscription-error">{error}</p> : null}

        {!loading && data?.user ? (
          <section className="manage-subscription-user">
            <p>
              <strong>{content.userId}</strong> {data.user.user_id}
            </p>
            <p>
              <strong>{content.email}</strong> {data.user.email || content.notProvided}
            </p>
            <p>
              <strong>{content.status}</strong> {data.user.subscriptionStatus || content.unknown}
            </p>
            <p>
              <strong>{content.events}</strong> {data.eventsCount}
            </p>
          </section>
        ) : null}

        {!loading && (!data || data.subscriptions.length === 0) ? (
          <p className="manage-subscription-muted">{content.empty}</p>
        ) : null}

        {!loading && data?.subscriptions.length ? (
          <ul className="manage-subscription-list">
            {data.subscriptions.map((subscription) => (
              <li key={subscription.id} className="manage-subscription-item">
                <div>
                  <p className="manage-subscription-item-title">
                    {subscription.providerSubscriptionId}
                  </p>
                  <p className="manage-subscription-item-meta">
                    {subscription.environment.toUpperCase()} · {subscription.status}
                  </p>
                  <p className="manage-subscription-item-meta">
                    {subscription.cancelAtPeriodEnd
                      ? content.cancelAtEnd
                      : content.autoRenew}
                  </p>
                  {subscription.currentPeriodEnd ? (
                    <p className="manage-subscription-item-meta">
                      {content.periodEnds}{' '}
                      {new Date(subscription.currentPeriodEnd).toLocaleString()}
                    </p>
                  ) : null}
                </div>

                <div className="manage-subscription-actions">
                  {subscription.cancelAtPeriodEnd ? (
                    <button
                      type="button"
                      className="manage-subscription-button is-secondary"
                      disabled={updatingSubscriptionId === subscription.id}
                      onClick={() => mutate(subscription.id, 'renew')}
                    >
                      {updatingSubscriptionId === subscription.id ? content.updating : content.renew}
                    </button>
                  ) : (
                    <button
                      type="button"
                      className="manage-subscription-button"
                      disabled={updatingSubscriptionId === subscription.id}
                      onClick={() => mutate(subscription.id, 'cancel')}
                    >
                      {updatingSubscriptionId === subscription.id ? content.updating : content.cancel}
                    </button>
                  )}
                </div>
              </li>
            ))}
          </ul>
        ) : null}

        <button type="button" className="manage-subscription-refresh" onClick={() => void load()}>
          {content.refresh}
        </button>
      </section>

      {manageSubscriptionStyles ? <style>{manageSubscriptionStyles}</style> : null}
    </main>
  );
}

const manageSubscriptionStyles = `
.manage-subscription-page {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg);
  font-family: var(--font-family-base);
}

.manage-subscription-card {
  width: min(760px, 100%);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 12px 40px rgb(21 39 113 / 10%);
  padding: 24px;
}

.manage-subscription-tag {
  margin: 0;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.manage-subscription-title {
  margin: 8px 0 0;
  color: var(--color-text);
  font-size: 32px;
  line-height: 1.15;
}

.manage-subscription-description {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.45;
}

.manage-subscription-muted {
  margin-top: 20px;
  color: var(--color-text-muted);
}

.manage-subscription-error {
  margin-top: 20px;
  border-radius: 12px;
  background: #ffecec;
  color: var(--color-danger);
  padding: 12px;
}

.manage-subscription-user {
  margin-top: 20px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  padding: 14px;
}

.manage-subscription-user p {
  margin: 6px 0;
  color: var(--color-text);
}

.manage-subscription-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-subscription-item {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.manage-subscription-item-title {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
}

.manage-subscription-item-meta {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.manage-subscription-actions {
  display: flex;
  align-items: center;
}

.manage-subscription-button {
  border: none;
  border-radius: 999px;
  background: var(--color-button);
  color: var(--color-button-text);
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
}

.manage-subscription-button.is-secondary {
  background: var(--color-accent);
}

.manage-subscription-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.manage-subscription-refresh {
  margin-top: 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent);
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
}
`;