'use client';

import { client } from '@/lib/auth/auth-client';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export default function TestStripePage() {
  const [loading, setLoading] = useState(false);
  const [subscriptions, setSubscriptions] = useState<any[]>([]);
  const [organizations, setOrganizations] = useState<any[]>([]);

  const testPersonalSubscription = async (planName: string) => {
    setLoading(true);
    try {
      const result = await client.subscription.upgrade({
        plan: planName,
        successUrl: `${window.location.origin}/payments/success`,
        cancelUrl: `${window.location.origin}/test-stripe`
      });

      if (result.error) {
        alert('Error: ' + result.error.message);
      } else if (result.data?.url) {
        window.location.href = result.data.url;
      }
    } catch (error) {
      // console.error('Error:', error);
      alert('Error: ' + error);
    } finally {
      setLoading(false);
    }
  };

  const testBusinessSubscription = async () => {
    setLoading(true);
    try {
      // First create an organization
      const orgResponse = await fetch('/api/organization', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: 'Test Organization',
          contactName: 'Test Contact',
          address: 'Test Address 123',
          postalCode: '2100',
          city: 'København',
          cvr: '12345678'
        })
      });

      if (!orgResponse.ok) {
        const errorData = await orgResponse.json();
        console.error('Error creating organization:', errorData);
        return;
      }

      const orgResult = await orgResponse.json();

      if (orgResult.error) {
        alert('Organization error: ' + orgResult.error.message);
        return;
      }

      // Then create subscription
      const subResult = await client.subscription.upgrade({
        plan: 'business-monthly',
        referenceId: orgResult.data.id,
        metadata: {
          employeeCount: '2',
          cvr: '12345678',
          billingEmail: 'test@example.com'
        },
        successUrl: `${window.location.origin}/payments/success`,
        cancelUrl: `${window.location.origin}/test-stripe`
      });

      if (subResult.error) {
        alert('Subscription error: ' + subResult.error.message);
      } else if (subResult.data?.url) {
        window.location.href = subResult.data.url;
      }
    } catch (error) {
      // console.error('Error:', error);
      alert('Error: ' + error);
    } finally {
      setLoading(false);
    }
  };

  const loadSubscriptions = async () => {
    try {
      const result = await client.subscription.list();
      setSubscriptions(result.data || []);
    } catch (error) {
      console.error('Error loading subscriptions:', error);
    }
  };

  const loadOrganizations = async () => {
    try {
      const result = await client.organization.list();
      setOrganizations(result.data || []);
    } catch (error) {
      console.error('Error loading organizations:', error);
    }
  };

  return (
    <div className="container mx-auto p-8 space-y-6">
      <h1 className="text-3xl font-bold">Stripe Integration Test</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Personal Subscriptions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <Button 
              onClick={() => testPersonalSubscription('basis')}
              disabled={loading}
              className="w-full"
            >
              Test Basis Plan
            </Button>
            <Button 
              onClick={() => testPersonalSubscription('plus')}
              disabled={loading}
              className="w-full"
            >
              Test Plus Plan
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Business Subscriptions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <Button 
              onClick={testBusinessSubscription}
              disabled={loading}
              className="w-full"
            >
              Test Business Monthly
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Current Subscriptions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <Button onClick={loadSubscriptions} className="w-full">
              Load Subscriptions
            </Button>
            <div className="space-y-2">
              {subscriptions.map((sub, index) => (
                <div key={index} className="p-2 bg-gray-100 rounded">
                  <p><strong>Plan:</strong> {sub.plan?.name}</p>
                  <p><strong>Status:</strong> {sub.status}</p>
                  <p><strong>Reference ID:</strong> {sub.referenceId}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Organizations</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <Button onClick={loadOrganizations} className="w-full">
              Load Organizations
            </Button>
            <div className="space-y-2">
              {organizations.map((org, index) => (
                <div key={index} className="p-2 bg-gray-100 rounded">
                  <p><strong>Name:</strong> {org.name}</p>
                  <p><strong>CVR:</strong> {org.cvr}</p>
                  <p><strong>Contact:</strong> {org.contactName}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}