import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { useState } from 'react';
import type { TenantPlan } from './types';

export default function ChangePlanDialog({
    open,
    onOpenChange,
    tenantName,
    plans,
    initialPlanId,
    initialBillingCycle,
    busy,
    onSubmit,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    tenantName: string;
    plans: TenantPlan[];
    initialPlanId: string;
    initialBillingCycle: string;
    busy: boolean;
    onSubmit: (planId: string, billingCycle: string) => void;
}) {
    const [planId, setPlanId] = useState(initialPlanId);
    const [billingCycle, setBillingCycle] = useState(initialBillingCycle);

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-sm">
                <DialogHeader>
                    <DialogTitle>Change plan</DialogTitle>
                    <DialogDescription>
                        Move {tenantName} to a different plan or billing cycle.
                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-3">
                    <Select value={planId} onValueChange={setPlanId}>
                        <SelectTrigger>
                            <SelectValue placeholder="Select a plan" />
                        </SelectTrigger>
                        <SelectContent>
                            {plans.map((p) => (
                                <SelectItem key={p.id} value={p.id}>
                                    {p.name} — {p.currency}{' '}
                                    {p.price_monthly.toLocaleString()}/mo
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                    <Select
                        value={billingCycle}
                        onValueChange={setBillingCycle}
                    >
                        <SelectTrigger>
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="monthly">
                                Billed monthly
                            </SelectItem>
                            <SelectItem value="yearly">
                                Billed yearly
                            </SelectItem>
                        </SelectContent>
                    </Select>
                </div>
                <DialogFooter>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => onOpenChange(false)}
                    >
                        Cancel
                    </Button>
                    <Button
                        size="sm"
                        disabled={busy || !planId}
                        onClick={() => onSubmit(planId, billingCycle)}
                    >
                        Change plan
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}