import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { 
  CheckCircle, 
  XCircle, 
  AlertCircle, 
  ExternalLink, 
  Package,
  ShoppingCart,
  CreditCard,
  Settings,
  Zap
} from 'lucide-react'

export default async function StripeSetupPage() {
  // Test Stripe connectivity
  const testResponse = await fetch('http://localhost:3000/api/stripe/test', {
    method: 'POST',
    cache: 'no-store'
  })
  
  const testResult = testResponse.ok ? await testResponse.json() : null
  const stripeWorking = testResult?.success

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="space-y-8">
        {/* Header */}
        <div className="text-center space-y-4">
          <div className="flex items-center justify-center gap-2">
            <Zap className="h-8 w-8 text-blue-600" />
            <h1 className="text-4xl font-bold tracking-tight">Stripe Integration Setup</h1>
          </div>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Everything is ready for your Stripe products. Complete the setup below to activate your e-commerce functionality.
          </p>
        </div>

        {/* Status Overview */}
        <Card className={stripeWorking ? 'border-green-200 bg-green-50' : 'border-red-200 bg-red-50'}>
          <CardContent className="pt-6">
            <div className="flex items-center gap-3">
              {stripeWorking ? (
                <>
                  <CheckCircle className="h-8 w-8 text-green-600" />
                  <div>
                    <h3 className="text-lg font-semibold text-green-800">Stripe Integration Active</h3>
                    <p className="text-green-700">Your Stripe account is connected and ready for products.</p>
                  </div>
                </>
              ) : (
                <>
                  <XCircle className="h-8 w-8 text-red-600" />
                  <div>
                    <h3 className="text-lg font-semibold text-red-800">Setup Required</h3>
                    <p className="text-red-700">Complete the steps below to activate Stripe integration.</p>
                  </div>
                </>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Quick Actions */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Link href="https://dashboard.stripe.com/products/new">
            <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
              <CardContent className="p-6 flex flex-col items-center text-center">
                <Package className="h-12 w-12 text-blue-600 mb-4" />
                <h3 className="font-semibold mb-2">Add Products</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  Create your first product in Stripe Dashboard
                </p>
                <Button className="w-full">
                  <ExternalLink className="h-4 w-4 mr-2" />
                  Go to Stripe
                </Button>
              </CardContent>
            </Card>
          </Link>
          
          <Link href="/products">
            <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
              <CardContent className="p-6 flex flex-col items-center text-center">
                <ShoppingCart className="h-12 w-12 text-green-600 mb-4" />
                <h3 className="font-semibold mb-2">Test Store</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  Browse your products and test checkout
                </p>
                <Button variant="outline" className="w-full">
                  View Store
                </Button>
              </CardContent>
            </Card>
          </Link>
          
          <Link href="/admin">
            <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
              <CardContent className="p-6 flex flex-col items-center text-center">
                <Settings className="h-12 w-12 text-purple-600 mb-4" />
                <h3 className="font-semibold mb-2">Admin Panel</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  Manage orders and view analytics
                </p>
                <Button variant="outline" className="w-full">
                  Admin Dashboard
                </Button>
              </CardContent>
            </Card>
          </Link>
        </div>

        {/* Setup Checklist */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Settings className="h-5 w-5" />
              Setup Checklist
            </CardTitle>
            <CardDescription>
              Complete these steps to activate your e-commerce store
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* Step 1: Products */}
            <div className="flex items-start gap-3 p-4 border rounded-lg">
              <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
                1
              </div>
              <div className="flex-1">
                <h3 className="font-medium">Add Products to Stripe</h3>
                <p className="text-sm text-muted-foreground mt-1">
                  Create your vending machine products with prices in Stripe Dashboard
                </p>
                <div className="flex items-center gap-2 mt-2">
                  {testResult?.products?.total ? (
                    <Badge variant="default">
                      {testResult.products.total} products
                    </Badge>
                  ) : (
                    <Badge variant="secondary">
                      No products yet
                    </Badge>
                  )}
                  <Link href="https://dashboard.stripe.com/products/new">
                    <Button size="sm" variant="outline">
                      <ExternalLink className="h-3 w-3 mr-1" />
                      Add Products
                    </Button>
                  </Link>
                </div>
              </div>
            </div>

            {/* Step 2: Payment Methods */}
            <div className="flex items-start gap-3 p-4 border rounded-lg">
              <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
                2
              </div>
              <div className="flex-1">
                <h3 className="font-medium">Enable Payment Methods</h3>
                <p className="text-sm text-muted-foreground mt-1">
                  Ensure customers can pay with credit cards, Apple Pay, Google Pay, etc.
                </p>
                <div className="flex items-center gap-2 mt-2">
                  {stripeWorking && testResult?.paymentMethods ? (
                    <Badge variant="default">
                      {testResult.paymentMethods.total} methods
                    </Badge>
                  ) : (
                    <Badge variant="secondary">
                      Check Stripe Dashboard
                    </Badge>
                  )}
                  {stripeWorking ? (
                    <Badge variant="outline" className="text-green-600">
                      <CheckCircle className="h-3 w-3 mr-1" />
                      Ready
                    </Badge>
                  ) : (
                    <Badge variant="outline" className="text-yellow-600">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      Configure
                    </Badge>
                  )}
                </div>
              </div>
            </div>

            {/* Step 3: Webhook */}
            <div className="flex items-start gap-3 p-4 border rounded-lg">
              <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
                3
              </div>
              <div className="flex-1">
                <h3 className="font-medium">Webhook Configuration</h3>
                <p className="text-sm text-muted-foreground mt-1">
                  Webhooks are already configured to handle order completion and payments
                </p>
                <div className="flex items-center gap-2 mt-2">
                  {process.env.STRIPE_WEBHOOK_SECRET ? (
                    <Badge variant="outline" className="text-green-600">
                      <CheckCircle className="h-3 w-3 mr-1" />
                      Configured
                    </Badge>
                  ) : (
                    <Badge variant="outline" className="text-red-600">
                      <XCircle className="h-3 w-3 mr-1" />
                      Missing
                    </Badge>
                  )}
                  <Link href="https://dashboard.stripe.com/webhooks">
                    <Button size="sm" variant="outline">
                      <ExternalLink className="h-3 w-3 mr-1" />
                      Manage Webhooks
                    </Button>
                  </Link>
                </div>
              </div>
            </div>

            {/* Step 4: Test */}
            <div className="flex items-start gap-3 p-4 border rounded-lg">
              <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
                4
              </div>
              <div className="flex-1">
                <h3 className="font-medium">Test Your Store</h3>
                <p className="text-sm text-muted-foreground mt-1">
                  Add products to cart and test the checkout process
                </p>
                <div className="flex items-center gap-2 mt-2">
                  {stripeWorking ? (
                    <Badge variant="outline" className="text-green-600">
                      <CheckCircle className="h-3 w-3 mr-1" />
                      Ready to Test
                    </Badge>
                  ) : (
                    <Badge variant="outline" className="text-yellow-600">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      Complete Setup First
                    </Badge>
                  )}
                  <Link href="/products">
                    <Button size="sm" variant="outline">
                      <ShoppingCart className="h-3 w-3 mr-1" />
                      Test Store
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Account Status */}
        {stripeWorking && testResult?.account && (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <CreditCard className="h-5 w-5" />
                Stripe Account Status
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-muted-foreground">Account ID</div>
                  <div className="font-medium">{testResult.account.id}</div>
                </div>
                <div>
                  <div className="text-sm text-muted-foreground">Business Name</div>
                  <div className="font-medium">{testResult.account.name || 'Not set'}</div>
                </div>
                <div>
                  <div className="text-sm text-muted-foreground">Country</div>
                  <div className="font-medium">{testResult.account.country}</div>
                </div>
                <div>
                  <div className="text-sm text-muted-foreground">Charges Enabled</div>
                  <div className="font-medium">
                    {testResult.account.charges_enabled ? (
                      <Badge variant="default">Yes</Badge>
                    ) : (
                      <Badge variant="destructive">No</Badge>
                    )}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-muted-foreground">Payouts Enabled</div>
                  <div className="font-medium">
                    {testResult.account.payouts_enabled ? (
                      <Badge variant="default">Yes</Badge>
                    ) : (
                      <Badge variant="secondary">No</Badge>
                    )}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-muted-foreground">API Version</div>
                  <div className="font-medium">{testResult.apiVersion}</div>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Getting Started */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Start Guide</CardTitle>
            <CardDescription>
              Get your store running in 4 easy steps
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-3">
                <h4 className="font-medium">For New Products:</h4>
                <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
                  <li>Go to Stripe Dashboard → Products</li>
                  <li>Click "Add product"</li>
                  <li>Fill in product details and set price</li>
                  <li>Save and publish the product</li>
                  <li>Visit your store to see it!</li>
                </ol>
              </div>
              <div className="space-y-3">
                <h4 className="font-medium">For Existing Products:</h4>
                <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
                  <li>Go to Stripe Dashboard → Products</li>
                  <li>Find your existing products</li>
                  <li>Ensure they have active prices</li>
                  <li>Check that they're marked as "Active"</li>
                  <li>They'll appear in your store automatically!</li>
                </ol>
              </div>
            </div>
            
            <div className="pt-4 border-t">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">
                    Need help? Check the Stripe documentation or contact support.
                  </p>
                </div>
                <div className="flex gap-2">
                  <Link href="/products">
                    <Button>View Store</Button>
                  </Link>
                  <Link href="https://stripe.com/docs">
                    <Button variant="outline">Documentation</Button>
                  </Link>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export const metadata = {
  title: 'Stripe Setup | Rocky Mountain Vending',
  description: 'Complete your Stripe integration setup and add products to your store',
}