import React, { useState } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api/client';
import { Button } from '@/components/ui/button';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { ArrowLeft, Repeat, Pause, Play, XCircle, Calendar, Package, CreditCard, FileText } from 'lucide-react';
import { toast } from 'sonner';
import SEOHead from '@/components/SEOHead';
import { formatPrice } from '@/lib/currency';

interface SubscriptionOrder {
    id: number;
    order_id: number;
    order_type: 'parent' | 'renewal' | 'switch' | 'resubscribe';
    order_status: string;
    created_at: string;
}

interface Subscription {
    id: number;
    product_id: number;
    product_name: string;
    product_image: string;
    status: string;
    billing_period: string;
    billing_interval: number;
    billing_schedule: string;
    recurring_amount: string;
    start_date: string;
    trial_end_date: string | null;
    next_payment_date: string | null;
    end_date: string | null;
    last_payment_date: string | null;
    payment_method: string;
    pause_count: number;
    can_pause: boolean;
    can_resume: boolean;
    can_cancel: boolean;
    orders: SubscriptionOrder[];
}

const statusStyles: Record<string, string> = {
    'pending': 'bg-yellow-100 text-yellow-800',
    'active': 'bg-green-100 text-green-800',
    'on-hold': 'bg-blue-100 text-blue-800',
    'cancelled': 'bg-gray-100 text-gray-800',
    'expired': 'bg-red-100 text-red-800',
    'pending-cancel': 'bg-orange-100 text-orange-800',
};

const statusLabels: Record<string, string> = {
    'pending': 'Pending',
    'active': 'Active',
    'on-hold': 'On Hold',
    'cancelled': 'Cancelled',
    'expired': 'Expired',
    'pending-cancel': 'Pending Cancel',
};

const orderTypeLabels: Record<string, string> = {
    'parent': 'Initial Order',
    'renewal': 'Renewal',
    'switch': 'Plan Switch',
    'resubscribe': 'Resubscribe',
};

export default function SubscriptionDetail() {
    const { id } = useParams<{ id: string }>();
    const navigate = useNavigate();
    const queryClient = useQueryClient();
    const [actionLoading, setActionLoading] = useState(false);

    const { data: subscription, isLoading, error } = useQuery<Subscription>({
        queryKey: ['account-subscription', id],
        queryFn: () => api.get(`/account/subscriptions/${id}`),
        enabled: !!id,
    });

    const actionMutation = useMutation({
        mutationFn: (action: string) => api.post(`/account/subscriptions/${id}/${action}`),
        onSuccess: (_, action) => {
            queryClient.invalidateQueries({ queryKey: ['account-subscription', id] });
            queryClient.invalidateQueries({ queryKey: ['account-subscriptions'] });
            const actionLabels: Record<string, string> = {
                'pause': 'paused',
                'resume': 'resumed',
                'cancel': 'cancelled',
            };
            toast.success(`Subscription ${actionLabels[action] || action} successfully`);
            setActionLoading(false);
        },
        onError: (error: any) => {
            toast.error(error.message || 'Action failed');
            setActionLoading(false);
        },
    });

    const handleAction = (action: string) => {
        setActionLoading(true);
        actionMutation.mutate(action);
    };

    const handleRenew = async () => {
        setActionLoading(true);
        try {
            const response = await api.post<{ order_id: number; status: string }>(`/account/subscriptions/${id}/renew`);

            queryClient.invalidateQueries({ queryKey: ['account-subscription', id] });
            queryClient.invalidateQueries({ queryKey: ['account-subscriptions'] });

            toast.success('Renewal order created');

            if (response.order_id) {
                // Determine destination based on functionality
                // If manual payment required or just improved UX, go to payment page
                navigate(`/order-pay/${response.order_id}`);
            }
        } catch (error: any) {
            toast.error(error.message || 'Failed to renew');
        } finally {
            setActionLoading(false);
        }
    };

    // Find pending renewal order
    const pendingRenewalOrder = subscription?.orders?.find(
        o => o.order_type === 'renewal' &&
            ['pending', 'wc-pending', 'on-hold', 'wc-on-hold', 'failed', 'wc-failed'].includes(o.order_status)
    );

    if (isLoading) {
        return (
            <div className="flex items-center justify-center py-12">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            </div>
        );
    }

    if (error || !subscription) {
        return (
            <div className="text-center py-12">
                <p className="text-red-500">Failed to load subscription</p>
                <Button variant="outline" className="mt-4" onClick={() => navigate('/my-account/subscriptions')}>
                    <ArrowLeft className="w-4 h-4 mr-2" />
                    Back to Subscriptions
                </Button>
            </div>
        );
    }

    return (
        <div className="space-y-6">
            <SEOHead title={`Subscription #${subscription.id}`} description="Subscription details" />

            {/* Back button */}
            <Link
                to="/my-account/subscriptions"
                className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700"
            >
                <ArrowLeft className="h-4 w-4 mr-1" />
                Back to Subscriptions
            </Link>

            {/* Header */}
            <div className="flex items-start justify-between">
                <div>
                    <h1 className="text-2xl font-bold flex items-center gap-2">
                        <Repeat className="h-6 w-6" />
                        Subscription #{subscription.id}
                    </h1>
                    <p className="text-gray-500 mt-1">
                        Started {new Date(subscription.start_date).toLocaleDateString()}
                    </p>
                </div>
                <span className={`px-3 py-1 rounded-full text-sm font-medium ${statusStyles[subscription.status] || 'bg-gray-100'}`}>
                    {statusLabels[subscription.status] || subscription.status}
                </span>
            </div>

            {/* Product Info Card */}
            <div className="bg-white rounded-lg border p-6">
                <div className="flex items-start gap-4">
                    {subscription.product_image ? (
                        <img
                            src={subscription.product_image}
                            alt={subscription.product_name}
                            className="w-20 h-20 object-cover rounded"
                        />
                    ) : (
                        <div className="w-20 h-20 bg-gray-100 rounded flex items-center justify-center">
                            <Package className="h-10 w-10 text-gray-400" />
                        </div>
                    )}
                    <div className="flex-1">
                        <h2 className="text-xl font-semibold">{subscription.product_name}</h2>
                        <p className="text-gray-500">{subscription.billing_schedule}</p>
                        <p className="text-2xl font-bold mt-2">
                            {formatPrice(subscription.recurring_amount)}
                            <span className="text-sm font-normal text-gray-500">
                                /{subscription.billing_period}
                            </span>
                        </p>
                    </div>
                </div>
            </div>

            {/* Billing Details */}
            <div className="bg-white rounded-lg border p-6">
                <h3 className="font-semibold mb-4">Billing Details</h3>
                <div className="grid grid-cols-2 gap-4">
                    <div>
                        <p className="text-sm text-gray-500">Start Date</p>
                        <p className="font-medium">{new Date(subscription.start_date).toLocaleDateString()}</p>
                    </div>
                    {subscription.next_payment_date && (
                        <div>
                            <p className="text-sm text-gray-500">Next Payment</p>
                            <p className="font-medium flex items-center gap-1">
                                <Calendar className="h-4 w-4 text-gray-400" />
                                {new Date(subscription.next_payment_date).toLocaleDateString()}
                            </p>
                        </div>
                    )}
                    {subscription.trial_end_date && new Date(subscription.trial_end_date) > new Date() && (
                        <div>
                            <p className="text-sm text-gray-500">Trial Ends</p>
                            <p className="font-medium text-blue-600">
                                {new Date(subscription.trial_end_date).toLocaleDateString()}
                            </p>
                        </div>
                    )}
                    {subscription.end_date && (
                        <div>
                            <p className="text-sm text-gray-500">End Date</p>
                            <p className="font-medium">{new Date(subscription.end_date).toLocaleDateString()}</p>
                        </div>
                    )}
                    <div>
                        <p className="text-sm text-gray-500">Payment Method</p>
                        <p className="font-medium flex items-center gap-1">
                            <CreditCard className="h-4 w-4 text-gray-400" />
                            {subscription.payment_method || 'Not set'}
                        </p>
                    </div>
                    <div>
                        <p className="text-sm text-gray-500">Times Paused</p>
                        <p className="font-medium">{subscription.pause_count}</p>
                    </div>
                </div>
            </div>

            {/* Actions */}
            {(subscription.can_pause || subscription.can_resume || subscription.can_cancel) && (
                <div className="bg-white rounded-lg border p-6">
                    <h3 className="font-semibold mb-4">Manage Subscription</h3>
                    <div className="flex items-center gap-3">
                        {subscription.can_pause && (
                            <Button
                                variant="outline"
                                onClick={() => handleAction('pause')}
                                disabled={actionLoading}
                            >
                                <Pause className="h-4 w-4 mr-2" />
                                Pause Subscription
                            </Button>
                        )}
                        {subscription.can_resume && (
                            <Button
                                variant="outline"
                                onClick={() => handleAction('resume')}
                                disabled={actionLoading}
                            >
                                <Play className="h-4 w-4 mr-2" />
                                Resume Subscription
                            </Button>
                        )}
                        {/* Early Renewal Button */}
                        {subscription.status === 'active' && (
                            <Button
                                variant="outline"
                                onClick={handleRenew}
                                disabled={actionLoading}
                            >
                                <Repeat className="h-4 w-4 mr-2" />
                                Renew Early
                            </Button>
                        )}

                        {/* Pay Pending Order Button */}
                        {pendingRenewalOrder && (
                            <Button
                                className='bg-green-600 hover:bg-green-700'
                                onClick={() => navigate(`/order-pay/${pendingRenewalOrder.order_id}`)}
                            >
                                <CreditCard className="h-4 w-4 mr-2" />
                                Pay Now (#{pendingRenewalOrder.order_id})
                            </Button>
                        )}

                        {subscription.can_cancel && (
                            <AlertDialog>
                                <AlertDialogTrigger asChild>
                                    <Button
                                        variant="outline"
                                        className="text-red-500 hover:text-red-600 border-red-200 hover:border-red-300"
                                        disabled={actionLoading}
                                    >
                                        <XCircle className="h-4 w-4 mr-2" />
                                        Cancel Subscription
                                    </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                    <AlertDialogHeader>
                                        <AlertDialogTitle>Cancel Subscription</AlertDialogTitle>
                                        <AlertDialogDescription>
                                            Are you sure you want to cancel this subscription?
                                            You will lose access at the end of your current billing period.
                                        </AlertDialogDescription>
                                    </AlertDialogHeader>
                                    <AlertDialogFooter>
                                        <AlertDialogCancel>Keep Subscription</AlertDialogCancel>
                                        <AlertDialogAction
                                            onClick={() => handleAction('cancel')}
                                            className="bg-red-500 hover:bg-red-600"
                                        >
                                            Yes, Cancel
                                        </AlertDialogAction>
                                    </AlertDialogFooter>
                                </AlertDialogContent>
                            </AlertDialog>
                        )}
                    </div>
                </div>
            )}

            {/* Related Orders */}
            {subscription.orders && subscription.orders.length > 0 && (
                <div className="bg-white rounded-lg border p-6">
                    <h3 className="font-semibold mb-4 flex items-center gap-2">
                        <FileText className="h-5 w-5" />
                        Payment History
                    </h3>
                    <div className="space-y-2">
                        {subscription.orders.map((order) => (
                            <Link
                                key={order.id}
                                to={`/my-account/orders/${order.order_id}`}
                                className="flex items-center justify-between p-3 rounded border hover:bg-gray-50 transition-colors"
                            >
                                <div className="flex items-center gap-3">
                                    <span className="font-medium">Order #{order.order_id}</span>
                                    <span className="text-xs px-2 py-0.5 bg-gray-100 rounded">
                                        {orderTypeLabels[order.order_type] || order.order_type}
                                    </span>
                                </div>
                                <div className="text-sm text-gray-500">
                                    {new Date(order.created_at).toLocaleDateString()}
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}
