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

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

  if (!session) {
    redirect("/login");
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-sm border-b border-slate-200">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center">
          <div className="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
            S2X
          </div>
        </div>
      </nav>

      <main className="pt-20">
        <div className="max-w-2xl mx-auto px-6 py-16">
          {/* Header */}
          <div className="mb-12">
            <div className="inline-flex items-center gap-2 mb-4 px-3 py-1 bg-blue-50 rounded-full border border-blue-200">
              <span className="w-2 h-2 bg-blue-600 rounded-full"></span>
              <span className="text-sm font-medium text-blue-700">Step 2 of 3</span>
            </div>

            <h1 className="text-4xl font-bold text-slate-900 mb-4">
              Connect Stripe
            </h1>

            <p className="text-lg text-slate-600">
              We need read-only access to your Stripe account to monitor successful payments and automatically create invoices in Xero.
            </p>
          </div>

          {/* Two Column Layout */}
          <div className="grid md:grid-cols-3 gap-8 mb-12">
            {/* Left Column - Information */}
            <div className="md:col-span-2">
              {/* What we access */}
              <div className="bg-white border border-slate-200 rounded-xl p-6 mb-6">
                <h2 className="text-lg font-semibold text-slate-900 mb-4">What we can access</h2>
                <ul className="space-y-3">
                  <li className="flex gap-3">
                    <svg className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                    </svg>
                    <div>
                      <p className="font-medium text-slate-900">Payment events</p>
                      <p className="text-sm text-slate-600">Successful charges and refunds</p>
                    </div>
                  </li>
                  <li className="flex gap-3">
                    <svg className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                    </svg>
                    <div>
                      <p className="font-medium text-slate-900">Account information</p>
                      <p className="text-sm text-slate-600">Your account ID and basic metadata</p>
                    </div>
                  </li>
                </ul>
              </div>

              {/* What we cannot do */}
              <div className="bg-amber-50 border border-amber-200 rounded-xl p-6 mb-6">
                <h2 className="text-lg font-semibold text-slate-900 mb-4">What we cannot do</h2>
                <ul className="space-y-2 text-sm text-slate-700">
                  <li className="flex gap-2">
                    <span className="text-amber-600">○</span>
                    <span>Charge customers or initiate refunds</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-amber-600">○</span>
                    <span>See or store sensitive payment information</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-amber-600">○</span>
                    <span>Modify your Stripe settings or payouts</span>
                  </li>
                </ul>
              </div>

              {/* How it works */}
              <div className="bg-white border border-slate-200 rounded-xl p-6">
                <h2 className="text-lg font-semibold text-slate-900 mb-4">What happens next</h2>
                <ol className="space-y-3">
                  <li className="flex gap-4">
                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-sm font-medium text-blue-600">1</span>
                    <span className="text-slate-700">You'll be securely redirected to Stripe</span>
                  </li>
                  <li className="flex gap-4">
                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-sm font-medium text-blue-600">2</span>
                    <span className="text-slate-700">Select which Stripe account to connect</span>
                  </li>
                  <li className="flex gap-4">
                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-sm font-medium text-blue-600">3</span>
                    <span className="text-slate-700">You'll be returned here to connect Xero</span>
                  </li>
                </ol>
              </div>
            </div>

            {/* Right Column - CTA Card */}
            <div>
              <div className="bg-gradient-to-br from-blue-50 to-blue-100 border-2 border-blue-600 rounded-xl p-6 sticky top-24">
                <h3 className="text-lg font-semibold text-slate-900 mb-4">Ready?</h3>
                <a
                  href="/api/stripe/connect"
                  className="block w-full px-4 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg text-center hover:shadow-lg hover:from-blue-700 hover:to-blue-800 transition"
                >
                  Connect Stripe →
                </a>
                <p className="text-xs text-slate-600 mt-4 text-center">
                  You'll be redirected to Stripe's secure OAuth page
                </p>
              </div>
            </div>
          </div>

          {/* Trust badges */}
          <div className="bg-green-50 border border-green-200 rounded-xl p-6">
            <p className="text-sm text-green-900">
              <strong>🔒 Your security matters:</strong> We use OAuth, so you can revoke access from Stripe at any time. We never see or store your Stripe password.
            </p>
          </div>
        </div>
      </main>
    </div>
  );
}