// STEP 3 — Connect Xero
// Purpose:
// - Explain why Xero access is needed
// - Make the next step obvious
// - Match the Stripe connect page exactly

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

export default async function ConnectXeroPage() {
  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 Xero
        </h1>

        <p className="mt-3 text-gray-700">
          We need access to your Xero organisation so we can automatically
          create invoices and mark them as paid when Stripe payments succeed.
        </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 Xero</li>
          <li>You’ll choose which organisation 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 Xero password.
          <br />
          Access can be revoked at any time from Xero.
        </p>
      </section>

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