import { Suspense } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Loader2, CreditCard, ArrowRight, ShieldCheck, Zap } from "lucide-react";

export default async function BillingPage(props: { params: Promise<{ projectId: string }> }) {
  const { projectId } = await props.params;

  return (
    <div style={{ padding: "40px 48px", maxWidth: 1000, margin: "0 auto", fontFamily: "var(--font-inter), sans-serif" }}>
      <div style={{ marginBottom: 32 }}>
        <h1 style={{ fontFamily: "var(--font-lora), serif", fontSize: "1.8rem", color: "#1a1a1a", marginBottom: 8 }}>
          Payments & Billing
        </h1>
        <p style={{ color: "#6b6560", fontSize: "0.95rem" }}>
          Connect your bank account to start charging customers for this project.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "24px" }}>
        
        {/* Onboarding Card */}
        <Card style={{ border: "1px solid #6366f1", boxShadow: "0 4px 14px rgba(99, 102, 241, 0.08)" }}>
          <CardHeader>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
              <div style={{ background: "#e0e7ff", padding: 8, borderRadius: 8, color: "#4f46e5" }}>
                <CreditCard style={{ width: 24, height: 24 }} />
              </div>
              <div>
                <CardTitle style={{ fontSize: "1.2rem" }}>Accept Payments with Stripe</CardTitle>
                <CardDescription>Setup takes 3 minutes. Vibn handles the code.</CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div style={{ background: "#f8fafc", padding: 20, borderRadius: 8, marginBottom: 24 }}>
              <h4 style={{ fontWeight: 600, fontSize: "0.9rem", color: "#111827", marginBottom: 12 }}>What you get immediately:</h4>
              <ul style={{ display: "flex", flexDirection: "column", gap: 12, margin: 0, padding: 0, listStyle: "none" }}>
                <li style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: "0.85rem", color: "#4b5563" }}>
                  <Zap style={{ width: 16, height: 16, color: "#eab308", flexShrink: 0 }} />
                  <span><strong>AI Auto-Wiring:</strong> The Vibn AI will automatically inject your secure Stripe keys into your live Coolify application.</span>
                </li>
                <li style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: "0.85rem", color: "#4b5563" }}>
                  <ShieldCheck style={{ width: 16, height: 16, color: "#22c55e", flexShrink: 0 }} />
                  <span><strong>Instant Compliance:</strong> Securely accept Apple Pay, Google Pay, and credit cards with PCI compliance handled automatically.</span>
                </li>
              </ul>
            </div>
            
            <p style={{ fontSize: "0.85rem", color: "#6b7280", lineHeight: 1.5 }}>
              By connecting, you agree to Stripe's Services Agreement. Vibn takes a small 1% platform fee on successful transactions to keep the AI platform running.
            </p>
          </CardContent>
          <CardFooter style={{ background: "#f9fafb", borderTop: "1px solid #f3f4f6", padding: "16px 24px" }}>
            <button 
              className="bg-indigo-600 hover:bg-indigo-700 text-white transition-colors"
              style={{ padding: "10px 20px", borderRadius: 6, fontSize: "0.9rem", fontWeight: 500, display: "flex", alignItems: "center", gap: 8 }}
            >
              Connect with Stripe <ArrowRight style={{ width: 16, height: 16 }} />
            </button>
          </CardFooter>
        </Card>

      </div>
    </div>
  );
}