'use client';

import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { api } from '@/lib/api';
import { useSelectedStoreId } from '@/lib/stores/store-context';

interface StripeStatus {
  charges_enabled: boolean;
  details_submitted: boolean;
  dashboard_url: string | null;
  onboarding_url: string | null;
}

export default function PaymentsPage() {
  const storeId = useSelectedStoreId();
  const [redirecting, setRedirecting] = useState(false);

  const statusQ = useQuery({
    queryKey: ['stripe-status', storeId],
    enabled: !!storeId,
    queryFn: () => api.stripe.getStatus(storeId!),
    retry: false,
  });

  const status = statusQ.data?.data as StripeStatus | undefined;

  const startOnboarding = async () => {
    if (!storeId) return;
    setRedirecting(true);
    try {
      const res = await api.stripe.createConnectLink(storeId);
      window.location.href = res.data.onboarding_url;
    } catch {
      setRedirecting(false);
    }
  };

  if (statusQ.isPending) return <div className="text-sm text-ink/60">Loading…</div>;

  if (statusQ.isError || !status) {
    const message =
      (statusQ.error as { message?: string } | null)?.message ??
      'Unable to load Stripe status.';
    return (
      <section className="max-w-2xl rounded-md border border-terracotta/30 bg-terracotta/5 p-6">
        <h2 className="text-lg font-semibold text-ink">Payments</h2>
        <p className="mt-2 text-sm text-terracotta">{message}</p>
        <button
          onClick={() => statusQ.refetch()}
          disabled={statusQ.isFetching}
          className="mt-3 rounded border border-forest/20 px-3 py-1.5 text-sm hover:bg-bone disabled:opacity-50"
        >
          {statusQ.isFetching ? 'Retrying…' : 'Retry'}
        </button>
      </section>
    );
  }

  const onboarded = status.details_submitted && status.charges_enabled;
  const pending = status.details_submitted && !status.charges_enabled;

  return (
    <section className="max-w-2xl rounded-md border border-forest/20 bg-white p-6">
      <h2 className="text-lg font-semibold text-ink">Payments</h2>

      {onboarded && (
        <div className="mt-4 rounded border border-forest-200 bg-forest-50 p-4">
          <p className="text-sm font-semibold text-forest-800">Stripe connected · Charges enabled</p>
          <p className="mt-1 text-sm text-forest-800/80">
            Payouts arrive automatically after each sale. A 15% platform fee applies.
          </p>
          {status.dashboard_url && (
            <a
              href={status.dashboard_url}
              target="_blank"
              rel="noreferrer"
              className="mt-2 inline-block text-sm text-forest-700 underline"
            >
              Open Stripe dashboard →
            </a>
          )}
        </div>
      )}

      {pending && (
        <div className="mt-4 rounded border border-amber-200 bg-amber-50 p-4">
          <p className="text-sm font-semibold text-amber-800">Onboarding in review</p>
          <p className="mt-1 text-sm text-amber-800/80">
            Stripe is verifying your details. You can continue listing items but can&apos;t accept payouts yet.
          </p>
          <button
            onClick={startOnboarding}
            disabled={redirecting}
            className="mt-3 rounded bg-forest px-3 py-1.5 text-sm font-semibold text-white hover:bg-forest/90 disabled:opacity-50"
          >
            {redirecting ? 'Redirecting…' : 'Continue onboarding →'}
          </button>
        </div>
      )}

      {!onboarded && !pending && (
        <div className="mt-4 rounded border border-amber-200 bg-amber-50 p-4">
          <p className="text-sm font-semibold text-amber-800">Payments not set up</p>
          <p className="mt-1 text-sm text-amber-800/80">
            Connect a Stripe account before buyers can check out. Your items stay visible in the meantime.
          </p>
          <button
            onClick={startOnboarding}
            disabled={redirecting}
            className="mt-3 rounded bg-forest px-3 py-1.5 text-sm font-semibold text-white hover:bg-forest/90 disabled:opacity-50"
          >
            {redirecting ? 'Redirecting…' : 'Connect with Stripe →'}
          </button>
        </div>
      )}
    </section>
  );
}