import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { RefreshCw, CreditCard } from "lucide-react";
import { usePro } from "@/contexts/pro-context";
import { Alert, AlertDescription } from "@/components/ui/alert";

interface GeneralTabProps {
    settings: any;
    onSettingChange: (key: string, value: any) => void;
    saving: boolean;
}

export function GeneralTab({ settings, onSettingChange, saving }: GeneralTabProps) {
    const { isPro } = usePro();
    
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        General Settings
                        {saving && <RefreshCw className="h-4 w-4 animate-spin" />}
                    </CardTitle>
                    <CardDescription>
                        Configure basic subscription settings
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Mixed Checkout</Label>
                            <p className="text-sm text-muted-foreground">
                                Allow subscription and non-subscription products in the same cart
                            </p>
                        </div>
                        <Switch
                            checked={settings.mixed_checkout}
                            onCheckedChange={(checked) => onSettingChange('mixed_checkout', checked)}
                        />
                    </div>

                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Allow Quantity Selection</Label>
                            <p className="text-sm text-muted-foreground">
                                Show quantity field on subscription products (hidden by default)
                            </p>
                        </div>
                        <Switch
                            checked={settings.allow_quantity || false}
                            onCheckedChange={(checked) => onSettingChange('allow_quantity', checked)}
                        />
                    </div>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Subscription Switching</CardTitle>
                    <CardDescription>
                        Allow customers to switch between subscription plans
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Allow Plan Switching</Label>
                            <p className="text-sm text-muted-foreground">
                                Customers can upgrade or downgrade their subscription
                            </p>
                        </div>
                        <Switch
                            checked={settings.allow_switching}
                            onCheckedChange={(checked) => onSettingChange('allow_switching', checked)}
                        />
                    </div>

                    {settings.allow_switching && (
                        <div className="space-y-2">
                            <Label htmlFor="switching_prorate">Prorate Switching</Label>
                            <Select
                                value={settings.switching_prorate}
                                onValueChange={(value) => onSettingChange('switching_prorate', value)}
                            >
                                <SelectTrigger id="switching_prorate">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="yes">Prorate payments</SelectItem>
                                    <SelectItem value="no">No proration</SelectItem>
                                    <SelectItem value="virtual_only">Prorate virtual products only</SelectItem>
                                </SelectContent>
                            </Select>
                            <p className="text-xs text-muted-foreground">
                                How to handle payments when customers switch plans
                            </p>
                        </div>
                    )}
                </CardContent>
            </Card>

            {/* Synchronize Renewals - Pro Feature */}
            {isPro && (
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        Synchronize Renewals
                    </CardTitle>
                    <CardDescription>
                        Align subscription renewals to a specific day
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Enable Synchronization</Label>
                            <p className="text-sm text-muted-foreground">
                                Align all subscription renewals to a specific day of the month
                            </p>
                        </div>
                        <Switch
                            checked={settings.sync_renewals}
                            onCheckedChange={(checked) => onSettingChange('sync_renewals', checked)}
                        />
                    </div>

                    {settings.sync_renewals && (
                        <div className="space-y-2">
                            <Label htmlFor="sync_day">Synchronization Day</Label>
                            <Select
                                value={String(settings.sync_day)}
                                onValueChange={(value) => onSettingChange('sync_day', parseInt(value))}
                            >
                                <SelectTrigger id="sync_day">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    {Array.from({ length: 28 }, (_, i) => i + 1).map((day) => (
                                        <SelectItem key={day} value={String(day)}>
                                            {day}{getOrdinalSuffix(day)} of the month
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                            <p className="text-xs text-muted-foreground">
                                All subscriptions will renew on this day
                            </p>
                        </div>
                    )}
                </CardContent>
            </Card>
            )}

            {/* Payment Methods */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <CreditCard className="h-5 w-5" />
                        Payment Methods
                    </CardTitle>
                    <CardDescription>
                        Configure which payment gateways can be used for subscriptions
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                    <Alert>
                        <AlertDescription>
                            Subscriptions require a payment gateway that supports recurring payments or tokenization.
                        </AlertDescription>
                    </Alert>
                    
                    <div className="space-y-3">
                        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                            <div className="flex items-center gap-2">
                                <span className="font-medium">PayPal</span>
                            </div>
                            <Switch checked={true} disabled />
                        </div>
                        
                        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                            <div className="flex items-center gap-2">
                                <span className="font-medium">Credit Card (Stripe)</span>
                            </div>
                            <Switch checked={true} disabled />
                        </div>
                        
                        {isPro && (
                        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                            <div className="flex items-center gap-2">
                                <span className="font-medium">Other Gateways</span>
                            </div>
                            <Switch checked={true} disabled />
                        </div>
                        )}
                    </div>
                </CardContent>
            </Card>

            {/* Subscription Limits - Pro Feature */}
            {isPro && (
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        Subscription Limits
                    </CardTitle>
                    <CardDescription>
                        Limit how many subscriptions customers can have
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Single Subscription Only</Label>
                            <p className="text-sm text-muted-foreground">
                                Limit customers to one active subscription at a time
                            </p>
                        </div>
                        <Switch
                            checked={settings.single_subscription_only || false}
                            onCheckedChange={(checked) => onSettingChange('single_subscription_only', checked)}
                        />
                    </div>
                </CardContent>
            </Card>
            )}

            {/* Upgrade/Downgrade - Pro Feature */}
            {isPro && (
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        Upgrade/Downgrade
                    </CardTitle>
                    <CardDescription>
                        Allow customers to change subscription plans
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Enable Plan Changes</Label>
                            <p className="text-sm text-muted-foreground">
                                Allow customers to upgrade or downgrade their plan
                            </p>
                        </div>
                        <Switch
                            checked={settings.allow_plan_changes || false}
                            onCheckedChange={(checked) => onSettingChange('allow_plan_changes', checked)}
                        />
                    </div>

                    {settings.allow_plan_changes && (
                        <div className="space-y-2">
                            <Label htmlFor="proration_type">Proration Type</Label>
                            <Select
                                value={settings.proration_type || 'prorate'}
                                onValueChange={(value) => onSettingChange('proration_type', value)}
                            >
                                <SelectTrigger id="proration_type">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="prorate">Prorate payments</SelectItem>
                                    <SelectItem value="no_prorate">No proration</SelectItem>
                                    <SelectItem value="full_credit">Full credit</SelectItem>
                                </SelectContent>
                            </Select>
                            <p className="text-xs text-muted-foreground">
                                How to handle billing when customers change plans
                            </p>
                        </div>
                    )}
                </CardContent>
            </Card>
            )}
        </div>
    );
}

function getOrdinalSuffix(n: number): string {
    const s = ['th', 'st', 'nd', 'rd'];
    const v = n % 100;
    return s[(v - 20) % 10] || s[v] || s[0];
}