// @ts-nocheck
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Plus, CreditCard, Edit, Trash2 } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { usePaymentMethod } from "@/hooks/usePaymentMethod";

export default function PaymentMethodsPage() {
    const {
        selectedCompany,
        paymentMethods,
        showForm,
        editingMethod,
        formData,
        isLoading,
        isSaving,
        setFormData,
        openCreateForm,
        openEditForm,
        closeForm,
        saveMethod,
        deleteMethod,
    } = usePaymentMethod();
    const [commissionInput, setCommissionInput] = useState(
        String(formData.commission_percentage ?? 0)
    );

    useEffect(() => {
        setCommissionInput(String(formData.commission_percentage ?? 0));
    }, [formData.commission_percentage, showForm, editingMethod?.id]);

    const handleSubmit = (event) => {
        event.preventDefault();
        saveMethod();
    };

    const typeLabels = {
        cash: "Efectivo",
        card: "Tarjeta",
        bank_transfer: "Transferencia Bancaria",
        digital_wallet: "Billetera Digital",
        credit: "Crédito",
        other: "Otro"
    };

    const typeColors = {
        cash: "bg-green-100 text-green-800",
        card: "bg-blue-100 text-blue-800",
        bank_transfer: "bg-purple-100 text-purple-800",
        digital_wallet: "bg-orange-100 text-orange-800",
        credit: "bg-amber-100 text-amber-800",
        other: "bg-gray-100 text-gray-800"
    };

    if (isLoading) {
        return (
            <div className="p-8">
                <div className="animate-pulse space-y-6">
                    <div className="h-8 bg-gray-200 rounded w-1/4"></div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {[...Array(3)].map((_, i) => (
                            <div key={i} className="h-48 bg-gray-200 rounded-xl"></div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="p-4 lg:p-8 space-y-8">
            <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
                <div>
                    <h1 className="text-3xl font-bold text-gradient">Métodos de Pago</h1>
                    <p className="text-gray-600 mt-1">
                        {selectedCompany?.name} • {paymentMethods.length} métodos
                    </p>
                </div>
                <Button
                    onClick={openCreateForm}
                    className="bg-gradient-to-r from-blue-500 to-blue-600"
                    disabled={!selectedCompany}
                >
                    <Plus className="w-4 h-4 mr-2" />
                    Nuevo Método
                </Button>
            </div>

            {showForm && (
                <Card className="glass-card border-white/20">
                    <CardHeader>
                        <CardTitle>{editingMethod ? "Editar" : "Nuevo"} Método de Pago</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={handleSubmit} className="space-y-4">
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <Label>Nombre *</Label>
                                    <Input
                                        value={formData.name}
                                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                        placeholder="Ej: Efectivo"
                                        required
                                    />
                                </div>

                                <div>
                                    <Label>Código *</Label>
                                    <Input
                                        value={formData.code}
                                        onChange={(e) => setFormData({ ...formData, code: e.target.value.toUpperCase() })}
                                        placeholder="Ej: CASH"
                                        required
                                    />
                                </div>

                                <div>
                                    <Label>Tipo *</Label>
                                    <Select value={formData.type} onValueChange={(value) => setFormData({ ...formData, type: value })}>
                                        <SelectTrigger>
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="cash">Efectivo</SelectItem>
                                            <SelectItem value="card">Tarjeta</SelectItem>
                                            <SelectItem value="bank_transfer">Transferencia Bancaria</SelectItem>
                                            <SelectItem value="digital_wallet">Billetera Digital</SelectItem>
                                            <SelectItem value="credit">Crédito</SelectItem>
                                            <SelectItem value="other">Otro</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>

                                <div>
                                    <Label>Comisión (%)</Label>
                                    <Input
                                        type="number"
                                        step="0.01"
                                        min="0"
                                        max="100"
                                        value={commissionInput}
                                        onChange={(e) => {
                                            const raw = e.target.value;
                                            setCommissionInput(raw);

                                            if (raw === "") {
                                                setFormData({ ...formData, commission_percentage: 0 });
                                                return;
                                            }

                                            const number = Number.parseFloat(raw);
                                            if (Number.isNaN(number)) {
                                                return;
                                            }

                                            setFormData({ ...formData, commission_percentage: number });
                                        }}
                                    />
                                </div>

                                <div className="flex items-center space-x-2">
                                    <Switch
                                        checked={formData.requires_reference}
                                        onCheckedChange={(checked) => setFormData({ ...formData, requires_reference: checked })}
                                    />
                                    <Label>Requiere Número de Referencia</Label>
                                </div>

                                <div className="flex items-center space-x-2">
                                    <Switch
                                        checked={formData.is_active}
                                        onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked })}
                                    />
                                    <Label>Activo</Label>
                                </div>

                                <div className="col-span-2">
                                    <Label>Notas</Label>
                                    <Textarea
                                        value={formData.notes}
                                        onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                                        placeholder="Notas adicionales"
                                        rows={2}
                                    />
                                </div>
                            </div>

                            <div className="flex justify-end gap-3">
                                <Button type="button" variant="outline" onClick={closeForm}>
                                    Cancelar
                                </Button>
                                <Button type="submit" className="bg-gradient-to-r from-blue-500 to-blue-600" disabled={isSaving}>
                                    {editingMethod ? "Actualizar" : "Crear"} Método
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            )}

            {paymentMethods.length === 0 ? (
                <div className="text-center py-16">
                    <CreditCard className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                    <h2 className="text-xl font-semibold text-gray-900 mb-2">No hay métodos de pago</h2>
                    <p className="text-gray-500 mb-6">Agrega métodos de pago para usar en el POS</p>
                    <Button
                        onClick={openCreateForm}
                        className="bg-gradient-to-r from-blue-500 to-blue-600"
                    >
                        <Plus className="w-4 h-4 mr-2" />
                        Crear Primer Método
                    </Button>
                </div>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {paymentMethods.map((method) => (
                        <Card key={method.id} className="glass-card border-white/20 hover:shadow-lg transition-all">
                            <CardHeader>
                                <div className="flex items-start justify-between">
                                    <div className="flex items-center gap-2">
                                        <CreditCard className="w-5 h-5 text-blue-600" />
                                        <CardTitle className="text-lg">{method.name}</CardTitle>
                                    </div>
                                    {method.is_active ? (
                                        <Badge className="bg-blue-100 text-blue-800">Activo</Badge>
                                    ) : (
                                        <Badge className="bg-gray-100 text-gray-800">Inactivo</Badge>
                                    )}
                                </div>
                            </CardHeader>
                            <CardContent className="space-y-3">
                                <div>
                                    <Badge className={typeColors[method.type]}>
                                        {typeLabels[method.type]}
                                    </Badge>
                                    <Badge variant="outline" className="ml-2">{method.code}</Badge>
                                </div>

                                {method.commission_percentage > 0 && (
                                    <p className="text-sm text-gray-600">
                                        <strong>Comisión:</strong> {method.commission_percentage}%
                                    </p>
                                )}

                                {method.requires_reference && (
                                    <Badge variant="outline" className="text-xs">
                                        Requiere Referencia
                                    </Badge>
                                )}

                                {method.notes && (
                                    <p className="text-sm text-gray-600">{method.notes}</p>
                                )}

                                <div className="flex gap-2 pt-3">
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        className="flex-1"
                                        onClick={() => openEditForm(method)}
                                    >
                                        <Edit className="w-4 h-4 mr-1" />
                                        Editar
                                    </Button>
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        onClick={() => {
                                            if (confirm("¿Eliminar este método de pago?")) {
                                                deleteMethod(method.id);
                                            }
                                        }}
                                        className="text-red-600 hover:text-red-700"
                                    >
                                        <Trash2 className="w-4 h-4" />
                                    </Button>
                                </div>
                            </CardContent>
                        </Card>
                    ))}
                </div>
            )}
        </div>
    );
}