// app/connect/stripe/page.tsx
//
// STEP 2 — Connect Stripe
// Purpose:
// - Explain why Stripe access is needed
// - Provide a single, clear action
// - Feel safe, boring, and familiar (Zapier-style)

import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export default async function ConnectStripePage() {
  const cookieStore = await cookies();
  const session = cookieStore.get("session");

  // Safety: if not logged in, bounce to login
  if (!session) {
    redirect("/login");
  }

  return (
    <main className="max-w-2xl mx-auto p-8 space-y-10">
      {/* --------------------------------------------------
          Header
      -------------------------------------------------- */}
      <section>
        <h1 className="text-2xl font-semibold">
          Connect Stripe
        </h1>

        <p className="mt-3 text-gray-700">
          We need read-only access to your Stripe account so we can
          detect successful payments and automatically reconcile
          invoices in Xero.
        </p>
      </section>

      {/* --------------------------------------------------
          What will happen
      -------------------------------------------------- */}
      <section>
        <h2 className="text-lg font-medium">
          What happens next
        </h2>

        <ul className="mt-3 space-y-2 list-disc list-inside text-gray-700">
          <li>You’ll be redirected to Stripe</li>
          <li>You’ll choose which Stripe account to connect</li>
          <li>You’ll be sent back here once connected</li>
        </ul>
      </section>

      {/* --------------------------------------------------
          Trust / reassurance
      -------------------------------------------------- */}
      <section className="text-sm text-gray-600">
        <p>
          We never see your passwords.
          <br />
          Access can be revoked at any time from Stripe.
        </p>
      </section>

      {/* --------------------------------------------------
          Primary action
      -------------------------------------------------- */}
      <section className="pt-4 border-t">
        <a
          href="/api/stripe/connect"
          className="inline-block px-6 py-3 bg-black text-white rounded text-sm"
        >
          Connect Stripe →
        </a>
      </section>
    </main>
  );
}