import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { AlertTriangle, Zap } from "lucide-react";
import { Alert, AlertDescription } from "@/components/ui/alert";

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

export function RenewalsTab({ settings, onSettingChange }: RenewalsTabProps) {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Failed Payment Handling */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        Failed Payment Handling
                    </CardTitle>
                    <CardDescription>
                        Configure what happens when a renewal payment fails
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="space-y-2">
                        <Label htmlFor="failed_payment_action">Failed Payment Action</Label>
                        <Select
                            value={settings.failed_payment_action}
                            onValueChange={(value) => onSettingChange('failed_payment_action', value)}
                        >
                            <SelectTrigger id="failed_payment_action">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="suspend">Put subscription on hold</SelectItem>
                                <SelectItem value="cancel">Cancel subscription</SelectItem>
                                <SelectItem value="nothing">Do nothing</SelectItem>
                            </SelectContent>
                        </Select>
                        <p className="text-xs text-muted-foreground">
                            Action to take when a renewal payment fails
                        </p>
                    </div>

                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Retry Failed Payments</Label>
                            <p className="text-sm text-muted-foreground">
                                Automatically retry failed payments
                            </p>
                        </div>
                        <Switch
                            checked={settings.retry_failed_payments}
                            onCheckedChange={(checked) => onSettingChange('retry_failed_payments', checked)}
                        />
                    </div>

                    {settings.retry_failed_payments && (
                        <>
                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="retry_interval_days">Retry Interval (days)</Label>
                                    <Input
                                        id="retry_interval_days"
                                        type="number"
                                        min={1}
                                        max={14}
                                        value={settings.retry_interval_days}
                                        onChange={(e) => onSettingChange('retry_interval_days', parseInt(e.target.value))}
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        Days between retry attempts
                                    </p>
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="max_failed_payments">Maximum Retries</Label>
                                    <Input
                                        id="max_failed_payments"
                                        type="number"
                                        min={1}
                                        max={10}
                                        value={settings.max_failed_payments}
                                        onChange={(e) => onSettingChange('max_failed_payments', parseInt(e.target.value))}
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        Maximum number of retry attempts
                                    </p>
                                </div>
                            </div>

                            <Alert>
                                <AlertTriangle className="h-4 w-4" />
                                <AlertDescription>
                                    After {settings.max_failed_payments} failed attempts, the subscription will be 
                                    {settings.failed_payment_action === 'cancel' ? ' cancelled' : ' put on hold'} automatically.
                                </AlertDescription>
                            </Alert>
                        </>
                    )}
                </CardContent>
            </Card>

            {/* Force Renewal Button */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <Zap className="h-5 w-5" />
                        Force Renewal Button
                    </CardTitle>
                    <CardDescription>
                        Add a "Renew Now" button to customer's My Account page
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Enable Renew Now Button</Label>
                            <p className="text-sm text-muted-foreground">
                                Show a "Renew Now" button for active subscriptions
                            </p>
                        </div>
                        <Switch
                            checked={settings.enable_renew_now_button || false}
                            onCheckedChange={(checked) => onSettingChange('enable_renew_now_button', checked)}
                        />
                    </div>
                </CardContent>
            </Card>

            {/* Auto-Suspend on Failed Payment */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        Auto-Suspend on Failed Payment
                    </CardTitle>
                    <CardDescription>
                        Automatically suspend subscriptions after payment failures
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Auto-Suspend Access</Label>
                            <p className="text-sm text-muted-foreground">
                                Immediately suspend access when payment fails
                            </p>
                        </div>
                        <Switch
                            checked={settings.auto_suspend_on_failure || false}
                            onCheckedChange={(checked) => onSettingChange('auto_suspend_on_failure', checked)}
                        />
                    </div>

                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Auto-Restore on Payment</Label>
                            <p className="text-sm text-muted-foreground">
                                Automatically restore access when payment is received
                            </p>
                        </div>
                        <Switch
                            checked={settings.auto_restore_on_payment || false}
                            onCheckedChange={(checked) => onSettingChange('auto_restore_on_payment', checked)}
                        />
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}