import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { InvestmentAmountField } from '@/pages/investments/components/investment-amount-field';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import ProjectionSummary from '@/pages/investments/components/projection-summary';
import type {
    InvestmentDuration,
    InvestmentProjection,
} from '@/pages/investments/types';
import { formatCurrency } from '@/pages/investments/utils';

type InvestmentConfigCardProps = {
    amount: number;
    durationMonths: number;
    durations: InvestmentDuration[];
    maxAmount: number;
    minAmount: number;
    projection: InvestmentProjection;
    /** Modo reinversión desde saldo: montos mínimos reducidos y techo = saldo disponible. */
    reinvestMode?: boolean;
    /** KYC aprobado (u operador): permite avanzar al flujo de confirmación / envío. */
    canStartInvestment: boolean;
    onAmountChange: (amount: number) => void;
    onDurationChange: (months: number) => void;
    onInvest: () => void;
};

export default function InvestmentConfigCard({
    amount,
    durationMonths,
    durations,
    maxAmount,
    minAmount,
    projection,
    reinvestMode = false,
    canStartInvestment,
    onAmountChange,
    onDurationChange,
    onInvest,
}: InvestmentConfigCardProps) {
    return (
        <Card className="overflow-hidden border-primary/20 bg-card">
            <CardHeader className="space-y-3 p-5 pb-1">
                <div className="flex items-center justify-between gap-3">
                    <Badge
                        variant="outline"
                        className="border-primary/40 bg-primary/10 text-primary"
                    >
                        Plan flexible
                    </Badge>
                    <div className="flex flex-wrap items-center justify-end gap-2">
                        {reinvestMode ? (
                            <Badge className="border-violet-500/50 bg-violet-600 text-white hover:bg-violet-600">
                                Reinversión
                            </Badge>
                        ) : null}
                        <span className="text-xs text-muted-foreground">
                            {projection.monthlyReturn}% mensual
                        </span>
                    </div>
                </div>

                <div className="space-y-1">
                    <CardTitle className="text-xl">
                        Configura tu inversión
                    </CardTitle>
                    <CardDescription className="text-sm leading-relaxed">
                        Define el capital y plazo para calcular tu proyección.
                    </CardDescription>
                </div>

                <InvestmentAmountField
                    amount={amount}
                    maxAmount={maxAmount}
                    minAmount={minAmount}
                    reinvestMode={reinvestMode}
                    onAmountChange={onAmountChange}
                />
            </CardHeader>

            <CardContent className="mt-[-24px] space-y-5 p-5">
                <div className="space-y-3">
                    <Label htmlFor="investment_range">Ajuste rápido</Label>
                    <input
                        aria-label="Ajustar monto con barra deslizante"
                        className="accent-primary h-3 w-full cursor-pointer touch-manipulation sm:h-2"
                        id="investment_range"
                        max={maxAmount}
                        min={minAmount}
                        step={reinvestMode ? 0.01 : 1}
                        type="range"
                        value={Math.min(maxAmount, Math.max(minAmount, amount))}
                        onChange={(event) =>
                            onAmountChange(
                                Math.round(
                                    Math.min(
                                        maxAmount,
                                        Math.max(minAmount, Number(event.target.value)),
                                    ) * 100,
                                ) / 100,
                            )
                        }
                    />
                    <div className="flex justify-between text-xs text-muted-foreground tabular-nums">
                        <span>{formatCurrency(minAmount)}</span>
                        <span className="text-foreground font-medium">{formatCurrency(amount)}</span>
                        <span>{formatCurrency(maxAmount)}</span>
                    </div>
                </div>

                <div className="space-y-2">
                    <Label htmlFor="investment_duration">Duración</Label>
                    <Select
                        value={String(durationMonths)}
                        onValueChange={(value) =>
                            onDurationChange(Number(value))
                        }
                    >
                        <SelectTrigger
                            id="investment_duration"
                            className="w-full"
                        >
                            <SelectValue placeholder="Selecciona una duración" />
                        </SelectTrigger>
                        <SelectContent>
                            {durations.map((duration) => (
                                <SelectItem
                                    key={duration.id}
                                    value={String(duration.months)}
                                >
                                    {duration.label}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>

                <div className="rounded-lg border border-primary/30 bg-muted/30 p-4">
                    <div className="mb-3 flex items-center justify-between gap-2">
                        <h3 className="font-semibold">
                            Proyección de Ganancias
                        </h3>
                        <Badge className="bg-primary text-primary-foreground">
                            Estimado
                        </Badge>
                    </div>
                    <ProjectionSummary projection={projection} />
                </div>

                <p className="text-xs leading-relaxed text-muted-foreground">
                    Rendimiento del {projection.monthlyReturn}% mensual (tasa
                    actual). La tasa puede variar mes a mes según la
                    configuración del administrador.
                </p>

                <Button
                    className="h-11 w-full font-semibold"
                    disabled={!canStartInvestment}
                    onClick={onInvest}
                    type="button"
                >
                    Invertir {formatCurrency(amount)}
                </Button>
                {!canStartInvestment ? (
                    <p className="text-center text-muted-foreground text-xs">
                        Completa y aprueba tu verificación de identidad para poder registrar inversiones.
                    </p>
                ) : null}
            </CardContent>
        </Card>
    );
}