import { Copy } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import type { InvestmentSetting } from '@/pages/investments/types';

type InvestmentPaymentInfoProps = {
    copied: boolean;
    settings: InvestmentSetting;
    onCopyPaymentAddress: () => void;
};

export default function InvestmentPaymentInfo({
    copied,
    settings,
    onCopyPaymentAddress,
}: InvestmentPaymentInfoProps) {
    const depositAddress = settings.payment_address.trim();

    return (
        <Card className="w-full overflow-hidden border-primary/20 bg-card">
            <CardHeader className="space-y-1 p-5 pb-2">
                <CardTitle className="text-lg">Información de Pago</CardTitle>
                <CardDescription>
                    Realiza el depósito usando la red y la dirección indicadas.
                    Luego indica el TXID en el paso de confirmación para registrar
                    la inversión.
                </CardDescription>
            </CardHeader>
            <CardContent className="space-y-5 p-5 pt-0">
                <div className="flex items-center justify-between gap-2">
                    <span className="text-sm font-medium">Red / modalidad</span>
                    <Badge>{settings.payment_method}</Badge>
                </div>
                <div className="space-y-2">
                    <Label htmlFor="payment_address_sidebar">
                        Dirección de depósito
                    </Label>
                    <div className="flex rounded-md border bg-background">
                        <Input
                            id="payment_address_sidebar"
                            className="border-0 text-xs shadow-none focus-visible:ring-0"
                            readOnly
                            value={depositAddress}
                        />
                        <Button
                            aria-label="Copiar dirección"
                            onClick={onCopyPaymentAddress}
                            type="button"
                            variant="ghost"
                        >
                            <Copy />
                        </Button>
                    </div>
                    {copied && (
                        <p className="text-xs text-primary">Dirección copiada.</p>
                    )}
                </div>

                {depositAddress !== '' ? (
                    <div className="rounded-lg border border-primary/25 bg-muted/25 p-4">
                        <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-center justify-center">
                            <div
                                className="rounded-md bg-white p-2 ring-1 ring-black/15 dark:ring-white/20"
                                role="img"
                                aria-label="Código QR con la dirección de depósito"
                            >
                                <QRCodeSVG
                                    bgColor="#ffffff"
                                    fgColor="#0d0d0d"
                                    level="M"
                                    size={200}
                                    value={depositAddress}
                                />
                            </div>
                        </div>
                    </div>
                ) : null}

                <p className="mb-3 text-muted-foreground text-xs font-medium">
                    Escanea con una billetera compatible con{' '}
                    <span className="font-medium text-foreground">
                        {settings.payment_method}
                    </span>{' '}
                    para importar esta dirección. Verifique antes de confirmar que el destino coincide
                    con el texto pegado tras el escaneo.
                </p>


            </CardContent>
        </Card>
    );
}