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 { RefreshCw, Info, Calendar } from "lucide-react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { usePro } from "@/contexts/pro-context";

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

export function CustomerTab({ settings, onSettingChange, saving }: CustomerTabProps) {
    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">
                        Customer Self-Service
                        {saving && <RefreshCw className="h-4 w-4 animate-spin" />}
                    </CardTitle>
                    <CardDescription>
                        Allow customers to manage their subscriptions from their account
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <Alert>
                        <Info className="h-4 w-4" />
                        <AlertDescription>
                            Customers can manage their subscriptions from the "Subscriptions" tab in their My Account page.
                        </AlertDescription>
                    </Alert>

                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Allow Subscription Pause</Label>
                            <p className="text-sm text-muted-foreground">
                                Customers can temporarily pause their subscription
                            </p>
                        </div>
                        <Switch
                            checked={settings.customer_suspend}
                            onCheckedChange={(checked) => onSettingChange('customer_suspend', checked)}
                        />
                    </div>

                    {settings.customer_suspend && (
                        <div className="space-y-2 ml-6 pl-4 border-l-2 border-muted">
                            <Label htmlFor="max_suspensions">Maximum Suspensions</Label>
                            <Input
                                id="max_suspensions"
                                type="number"
                                min={0}
                                max={10}
                                value={settings.max_suspensions}
                                onChange={(e) => onSettingChange('max_suspensions', parseInt(e.target.value))}
                                className="max-w-[200px]"
                            />
                            <p className="text-xs text-muted-foreground">
                                Maximum number of times a customer can pause their subscription. Set to 0 for unlimited.
                            </p>
                        </div>
                    )}

                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Allow Subscription Cancellation</Label>
                            <p className="text-sm text-muted-foreground">
                                Customers can cancel their subscription themselves
                            </p>
                        </div>
                        <Switch
                            checked={settings.customer_cancel}
                            onCheckedChange={(checked) => onSettingChange('customer_cancel', checked)}
                        />
                    </div>
                </CardContent>
            </Card>

            {/* Customer Early Renewal - Pro Feature */}
            {isPro && (
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <Calendar className="h-5 w-5" />
                        Early Renewal
                    </CardTitle>
                    <CardDescription>
                        Allow customers to renew their subscription before the renewal date
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                            <Label>Allow Early Renewal</Label>
                            <p className="text-sm text-muted-foreground">
                                Customers can renew their subscription before the renewal date
                            </p>
                        </div>
                        <Switch
                            checked={settings.allow_early_renewal}
                            onCheckedChange={(checked) => onSettingChange('allow_early_renewal', checked)}
                        />
                    </div>

                    {settings.allow_early_renewal && (
                        <div className="space-y-2">
                            <Label htmlFor="early_renewal_days">Early Renewal Period (days)</Label>
                            <Input
                                id="early_renewal_days"
                                type="number"
                                min={1}
                                max={30}
                                value={settings.early_renewal_days}
                                onChange={(e) => onSettingChange('early_renewal_days', parseInt(e.target.value))}
                            />
                            <p className="text-xs text-muted-foreground">
                                Number of days before renewal that customers can renew early
                            </p>
                        </div>
                    )}
                </CardContent>
            </Card>
            )}

            {isPro && (
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        Subscription Management by Customer
                    </CardTitle>
                    <CardDescription>
                        Additional controls available to how customers can manage their subscriptions
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="grid gap-4">
                        <div className="flex items-start gap-4 p-4 bg-muted/50 rounded-lg">
                            <div className="flex-1">
                                <h4 className="font-medium">View Subscription Details</h4>
                                <p className="text-sm text-muted-foreground mt-1">
                                    Customers can view their subscription status, next payment date, and billing history.
                                </p>
                            </div>
                            <Switch checked={true} disabled />
                        </div>

                        <div className="flex items-start gap-4 p-4 bg-muted/50 rounded-lg">
                            <div className="flex-1">
                                <h4 className="font-medium">Update Payment Method</h4>
                                <p className="text-sm text-muted-foreground mt-1">
                                    Customers can update the payment method used for their subscription.
                                </p>
                            </div>
                            <Switch checked={true} disabled />
                        </div>

                        <div className="flex items-start gap-4 p-4 bg-muted/50 rounded-lg">
                            <div className="flex-1">
                                <h4 className="font-medium">Manual Renewal</h4>
                                <p className="text-sm text-muted-foreground mt-1">
                                    Customers with manual renewal subscriptions can pay for renewals from their account.
                                </p>
                            </div>
                            <Switch checked={true} disabled />
                        </div>

                        <div className="flex items-start gap-4 p-4 bg-muted/50 rounded-lg">
                            <div className="flex-1">
                                <h4 className="font-medium">Resume Subscription</h4>
                                <p className="text-sm text-muted-foreground mt-1">
                                    Customers can resume paused subscriptions when ready.
                                </p>
                            </div>
                            <Switch checked={true} disabled />
                        </div>
                    </div>
                </CardContent>
            </Card>
            )}
        </div>
    );
}