import React, { useState } from 'react';
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 { Key, Copy, Check, ChevronDown, ChevronUp, Monitor, Globe, Power } from 'lucide-react';
import { toast } from 'sonner';
import SEOHead from '@/components/SEOHead';

interface Activation {
    id: number;
    domain: string | null;
    machine_id: string | null;
    ip_address: string | null;
    status: 'active' | 'deactivated';
    activated_at: string;
}

interface License {
    id: number;
    license_key: string;
    product_name: string;
    status: 'active' | 'revoked' | 'expired';
    activation_limit: number;
    activation_count: number;
    activations_remaining: number;
    expires_at: string | null;
    is_expired: boolean;
    created_at: string;
    activations: Activation[];
}

export default function Licenses() {
    const queryClient = useQueryClient();
    const [copiedKey, setCopiedKey] = useState<string | null>(null);
    const [expandedLicense, setExpandedLicense] = useState<number | null>(null);

    const { data: licenses = [], isLoading } = useQuery<License[]>({
        queryKey: ['account-licenses'],
        queryFn: () => api.get('/account/licenses'),
    });

    const deactivateMutation = useMutation({
        mutationFn: ({ licenseId, activationId }: { licenseId: number; activationId: number }) =>
            api.post(`/account/licenses/${licenseId}/deactivate`, { activation_id: activationId }),
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['account-licenses'] });
            toast.success('Activation deactivated successfully');
        },
        onError: () => {
            toast.error('Failed to deactivate');
        },
    });

    const copyToClipboard = (key: string) => {
        navigator.clipboard.writeText(key);
        setCopiedKey(key);
        setTimeout(() => setCopiedKey(null), 2000);
        toast.success('License key copied to clipboard');
    };

    const getStatusStyle = (license: License) => {
        if (license.status === 'revoked') {
            return 'bg-red-100 text-red-800';
        }
        if (license.is_expired) {
            return 'bg-gray-100 text-gray-800';
        }
        return 'bg-green-100 text-green-800';
    };

    const getStatusLabel = (license: License) => {
        if (license.status === 'revoked') return 'Revoked';
        if (license.is_expired) return 'Expired';
        return 'Active';
    };

    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>
        );
    }

    return (
        <div className="space-y-6">
            <SEOHead title="Licenses" description="Manage your software licenses" />
            <div>
                <h1 className="text-2xl font-bold flex items-center gap-2">
                    <Key className="h-6 w-6" />
                    My Licenses
                </h1>
                <p className="text-gray-500">
                    Manage your software licenses and activations
                </p>
            </div>

            {licenses.length === 0 ? (
                <div className="bg-white rounded-lg border p-12 text-center">
                    <Key className="h-12 w-12 mx-auto mb-4 text-gray-300" />
                    <p className="text-gray-500">You don't have any licenses yet.</p>
                    <p className="text-sm text-gray-400 mt-1">
                        Purchase a product with licensing to get started.
                    </p>
                </div>
            ) : (
                <div className="space-y-4">
                    {licenses.map((license) => (
                        <div key={license.id} className="bg-white rounded-lg border overflow-hidden">
                            {/* Header */}
                            <div className="p-4">
                                <div className="flex items-start justify-between">
                                    <div className="space-y-1">
                                        <h3 className="text-lg font-semibold">{license.product_name}</h3>
                                        <div className="flex items-center gap-2">
                                            <code className="text-xs bg-gray-100 px-2 py-1 rounded font-mono">
                                                {license.license_key}
                                            </code>
                                            <button
                                                onClick={() => copyToClipboard(license.license_key)}
                                                className="p-1 hover:bg-gray-100 rounded"
                                            >
                                                {copiedKey === license.license_key ? (
                                                    <Check className="h-4 w-4 text-green-500" />
                                                ) : (
                                                    <Copy className="h-4 w-4 text-gray-400" />
                                                )}
                                            </button>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusStyle(license)}`}>
                                            {getStatusLabel(license)}
                                        </span>
                                        <button
                                            onClick={() => setExpandedLicense(expandedLicense === license.id ? null : license.id)}
                                            className="p-1 hover:bg-gray-100 rounded"
                                        >
                                            {expandedLicense === license.id ? (
                                                <ChevronUp className="h-5 w-5 text-gray-400" />
                                            ) : (
                                                <ChevronDown className="h-5 w-5 text-gray-400" />
                                            )}
                                        </button>
                                    </div>
                                </div>

                                {/* Summary Info */}
                                <div className="grid grid-cols-3 gap-4 mt-4 text-sm">
                                    <div>
                                        <p className="text-gray-500">Activations</p>
                                        <p className="font-medium">
                                            {license.activation_count} / {license.activation_limit === 0 ? '∞' : license.activation_limit}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-gray-500">Purchased</p>
                                        <p className="font-medium">
                                            {new Date(license.created_at).toLocaleDateString()}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-gray-500">Expires</p>
                                        <p className={`font-medium ${license.is_expired ? 'text-red-500' : ''}`}>
                                            {license.expires_at
                                                ? new Date(license.expires_at).toLocaleDateString()
                                                : 'Never'}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            {/* Expanded Content - Activations */}
                            {expandedLicense === license.id && (
                                <div className="border-t p-4 bg-gray-50">
                                    <h4 className="font-medium mb-3">Active Devices</h4>
                                    {license.activations.filter(a => a.status === 'active').length === 0 ? (
                                        <p className="text-sm text-gray-500 py-4 text-center">
                                            No active devices. Activate your license on a device to see it here.
                                        </p>
                                    ) : (
                                        <div className="space-y-2">
                                            {license.activations
                                                .filter(a => a.status === 'active')
                                                .map((activation) => (
                                                    <div
                                                        key={activation.id}
                                                        className="flex items-center justify-between bg-white p-3 rounded border"
                                                    >
                                                        <div className="flex items-center gap-2">
                                                            {activation.domain ? (
                                                                <>
                                                                    <Globe className="h-4 w-4 text-gray-400" />
                                                                    <span className="text-sm">{activation.domain}</span>
                                                                </>
                                                            ) : activation.machine_id ? (
                                                                <>
                                                                    <Monitor className="h-4 w-4 text-gray-400" />
                                                                    <span className="text-sm font-mono">
                                                                        {activation.machine_id.substring(0, 16)}...
                                                                    </span>
                                                                </>
                                                            ) : (
                                                                <span className="text-gray-400 text-sm">Unknown device</span>
                                                            )}
                                                            <span className="text-gray-400 text-xs">
                                                                • {new Date(activation.activated_at).toLocaleDateString()}
                                                            </span>
                                                        </div>
                                                        <AlertDialog>
                                                            <AlertDialogTrigger asChild>
                                                                <Button variant="ghost" size="sm" className="text-red-500 hover:text-red-600">
                                                                    <Power className="h-4 w-4 mr-1" />
                                                                    Deactivate
                                                                </Button>
                                                            </AlertDialogTrigger>
                                                            <AlertDialogContent>
                                                                <AlertDialogHeader>
                                                                    <AlertDialogTitle>Deactivate Device</AlertDialogTitle>
                                                                    <AlertDialogDescription>
                                                                        This will deactivate the license on this device. You can reactivate it later if you have available activation slots.
                                                                    </AlertDialogDescription>
                                                                </AlertDialogHeader>
                                                                <AlertDialogFooter>
                                                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                                                    <AlertDialogAction
                                                                        onClick={() => deactivateMutation.mutate({
                                                                            licenseId: license.id,
                                                                            activationId: activation.id,
                                                                        })}
                                                                    >
                                                                        Deactivate
                                                                    </AlertDialogAction>
                                                                </AlertDialogFooter>
                                                            </AlertDialogContent>
                                                        </AlertDialog>
                                                    </div>
                                                ))}
                                        </div>
                                    )}
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}
