import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Search, Package, Plus, History, Download, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import { __ } from '@/lib/i18n';

interface SoftwareProduct {
    id: number;
    name: string;
    slug: string;
    current_version: string;
    wp_enabled: boolean;
    total_downloads: number;
}

interface SoftwareVersion {
    id: number;
    product_id: number;
    version: string;
    changelog: string;
    release_date: string;
    is_current: boolean;
    download_count: number;
}

interface ProductsResponse {
    products: SoftwareProduct[];
}

interface VersionsResponse {
    product_id: number;
    config: {
        enabled: boolean;
        slug: string;
        current_version: string;
        wp_enabled: boolean;
    };
    versions: SoftwareVersion[];
}

export default function SoftwareVersions() {
    const [search, setSearch] = useState('');
    const [selectedProduct, setSelectedProduct] = useState<number | null>(null);
    const [isAddVersionOpen, setIsAddVersionOpen] = useState(false);
    const [newVersion, setNewVersion] = useState({ version: '', changelog: '' });
    const queryClient = useQueryClient();

    // Fetch software-enabled products
    const { data: productsData, isLoading: productsLoading } = useQuery({
        queryKey: ['software-products'],
        queryFn: async () => {
            const response = await api.get('/products?software_enabled=true&per_page=100');
            // Filter products that have software distribution enabled
            const products = (response as any).products || [];
            return {
                products: products.filter((p: any) => p.meta?._woonoow_software_enabled === 'yes').map((p: any) => ({
                    id: p.id,
                    name: p.name,
                    slug: p.meta?._woonoow_software_slug || '',
                    current_version: p.meta?._woonoow_software_current_version || '',
                    wp_enabled: p.meta?._woonoow_software_wp_enabled === 'yes',
                    total_downloads: 0,
                }))
            } as ProductsResponse;
        },
    });

    // Fetch versions for selected product
    const { data: versionsData, isLoading: versionsLoading } = useQuery({
        queryKey: ['software-versions', selectedProduct],
        queryFn: async () => {
            const response = await api.get(`/software/products/${selectedProduct}/versions`);
            return response as VersionsResponse;
        },
        enabled: !!selectedProduct,
    });

    // Add new version mutation
    const addVersion = useMutation({
        mutationFn: async (data: { version: string; changelog: string }) => {
            return await api.post(`/software/products/${selectedProduct}/versions`, data);
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['software-versions', selectedProduct] });
            queryClient.invalidateQueries({ queryKey: ['software-products'] });
            toast.success(__('Version added successfully'));
            setIsAddVersionOpen(false);
            setNewVersion({ version: '', changelog: '' });
        },
        onError: (error: any) => {
            toast.error(error.message || __('Failed to add version'));
        },
    });

    const filteredProducts = productsData?.products?.filter(p =>
        p.name.toLowerCase().includes(search.toLowerCase()) ||
        p.slug.toLowerCase().includes(search.toLowerCase())
    ) || [];

    const selectedProductData = productsData?.products?.find(p => p.id === selectedProduct);

    return (
        <div className="p-6 space-y-6">
            {/* Header */}
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-2xl font-bold">{__('Software Versions')}</h1>
                    <p className="text-muted-foreground">
                        {__('Manage software releases, changelogs, and version history')}
                    </p>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Products List */}
                <div className="lg:col-span-1 border rounded-lg bg-card">
                    <div className="p-4 border-b">
                        <h2 className="font-semibold mb-3">{__('Software Products')}</h2>
                        <div className="relative">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                            <Input
                                placeholder={__('Search products...')}
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                                className="pl-9"
                            />
                        </div>
                    </div>

                    <div className="max-h-[500px] overflow-y-auto">
                        {productsLoading ? (
                            <div className="flex items-center justify-center p-8">
                                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
                            </div>
                        ) : filteredProducts.length === 0 ? (
                            <div className="p-8 text-center text-muted-foreground">
                                <Package className="w-12 h-12 mx-auto mb-3 opacity-50" />
                                <p>{__('No software products found')}</p>
                                <p className="text-sm mt-1">
                                    {__('Enable software distribution on a downloadable product')}
                                </p>
                            </div>
                        ) : (
                            <div className="divide-y">
                                {filteredProducts.map((product) => (
                                    <button
                                        key={product.id}
                                        onClick={() => setSelectedProduct(product.id)}
                                        className={`w-full p-4 text-left hover:bg-accent transition-colors ${selectedProduct === product.id ? 'bg-accent' : ''
                                            }`}
                                    >
                                        <div className="flex items-start justify-between">
                                            <div className="flex-1 min-w-0">
                                                <p className="font-medium truncate">{product.name}</p>
                                                <p className="text-sm text-muted-foreground font-mono">
                                                    {product.slug}
                                                </p>
                                            </div>
                                            <Badge variant="secondary" className="ml-2">
                                                v{product.current_version || '—'}
                                            </Badge>
                                        </div>
                                        {product.wp_enabled && (
                                            <Badge variant="outline" className="mt-2 text-xs">
                                                WordPress
                                            </Badge>
                                        )}
                                    </button>
                                ))}
                            </div>
                        )}
                    </div>
                </div>

                {/* Version Details */}
                <div className="lg:col-span-2 border rounded-lg bg-card">
                    {!selectedProduct ? (
                        <div className="flex items-center justify-center h-full min-h-[400px] text-muted-foreground">
                            <div className="text-center">
                                <History className="w-12 h-12 mx-auto mb-3 opacity-50" />
                                <p>{__('Select a product to view versions')}</p>
                            </div>
                        </div>
                    ) : versionsLoading ? (
                        <div className="flex items-center justify-center h-full min-h-[400px]">
                            <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
                        </div>
                    ) : (
                        <>
                            {/* Version Header */}
                            <div className="p-4 border-b flex items-center justify-between">
                                <div>
                                    <h2 className="font-semibold">{selectedProductData?.name}</h2>
                                    <p className="text-sm text-muted-foreground">
                                        {__('Current version')}: <span className="font-mono">{versionsData?.config?.current_version || '—'}</span>
                                    </p>
                                </div>
                                <Dialog open={isAddVersionOpen} onOpenChange={setIsAddVersionOpen}>
                                    <DialogTrigger asChild>
                                        <Button>
                                            <Plus className="w-4 h-4 mr-2" />
                                            {__('New Version')}
                                        </Button>
                                    </DialogTrigger>
                                    <DialogContent className="max-w-lg">
                                        <DialogHeader>
                                            <DialogTitle>{__('Add New Version')}</DialogTitle>
                                            <DialogDescription>
                                                {__('Release a new version of')} {selectedProductData?.name}
                                            </DialogDescription>
                                        </DialogHeader>
                                        <div className="space-y-4 px-6 py-4">
                                            <div className="space-y-2">
                                                <Label htmlFor="version">{__('Version Number')}</Label>
                                                <Input
                                                    id="version"
                                                    placeholder="1.2.3"
                                                    value={newVersion.version}
                                                    onChange={(e) => setNewVersion(prev => ({ ...prev, version: e.target.value }))}
                                                />
                                                <p className="text-xs text-muted-foreground">
                                                    {__('Use semantic versioning (e.g., 1.0.0, 1.2.3)')}
                                                </p>
                                            </div>
                                            <div className="space-y-2">
                                                <Label htmlFor="changelog">{__('Changelog')}</Label>
                                                <Textarea
                                                    id="changelog"
                                                    placeholder="## What's New&#10;- Added new feature&#10;- Fixed bug"
                                                    value={newVersion.changelog}
                                                    onChange={(e) => setNewVersion(prev => ({ ...prev, changelog: e.target.value }))}
                                                    rows={8}
                                                    className="font-mono text-sm"
                                                />
                                                <p className="text-xs text-muted-foreground">
                                                    {__('Supports Markdown formatting')}
                                                </p>
                                            </div>
                                        </div>
                                        <DialogFooter>
                                            <Button variant="outline" onClick={() => setIsAddVersionOpen(false)}>
                                                {__('Cancel')}
                                            </Button>
                                            <Button
                                                onClick={() => addVersion.mutate(newVersion)}
                                                disabled={!newVersion.version || addVersion.isPending}
                                            >
                                                {addVersion.isPending && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
                                                {__('Release Version')}
                                            </Button>
                                        </DialogFooter>
                                    </DialogContent>
                                </Dialog>
                            </div>

                            {/* Version History */}
                            <div className="p-4">
                                {versionsData?.versions?.length === 0 ? (
                                    <div className="text-center py-12 text-muted-foreground">
                                        <History className="w-12 h-12 mx-auto mb-3 opacity-50" />
                                        <p>{__('No versions released yet')}</p>
                                        <p className="text-sm mt-1">
                                            {__('Click "New Version" to release your first version')}
                                        </p>
                                    </div>
                                ) : (
                                    <Table>
                                        <TableHeader>
                                            <TableRow>
                                                <TableHead>{__('Version')}</TableHead>
                                                <TableHead>{__('Release Date')}</TableHead>
                                                <TableHead>{__('Downloads')}</TableHead>
                                                <TableHead>{__('Changelog')}</TableHead>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {versionsData?.versions?.map((version) => (
                                                <TableRow key={version.id}>
                                                    <TableCell>
                                                        <div className="flex items-center gap-2">
                                                            <span className="font-mono font-medium">
                                                                v{version.version}
                                                            </span>
                                                            {version.is_current && (
                                                                <Badge variant="default" className="text-xs">
                                                                    {__('Current')}
                                                                </Badge>
                                                            )}
                                                        </div>
                                                    </TableCell>
                                                    <TableCell className="text-muted-foreground">
                                                        {version.release_date ? new Date(version.release_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}
                                                    </TableCell>
                                                    <TableCell>
                                                        <div className="flex items-center gap-1 text-muted-foreground">
                                                            <Download className="w-3 h-3" />
                                                            {version.download_count}
                                                        </div>
                                                    </TableCell>
                                                    <TableCell className="max-w-xs">
                                                        <p className="text-sm text-muted-foreground truncate">
                                                            {version.changelog?.split('\n')[0] || '—'}
                                                        </p>
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                )}
                            </div>
                        </>
                    )}
                </div>
            </div>
        </div>
    );
}
