// @ts-nocheck
import React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { CheckCircle, ShoppingCart, Package } from "lucide-react";
import { toast } from "sonner";
import { useAffiliationConditions } from "@/hooks/useAffiliationConditions";

export default function AffiliationConditionsPage() {
    const {
      selectedCompany,
      formData,
      setFormData,
      isSaving,
      saveConditions,
      formatCurrency,
    } = useAffiliationConditions();
    const [amountInput, setAmountInput] = React.useState(
        String(formData.min_first_purchase_amount ?? 0),
    );
    const [skuInput, setSkuInput] = React.useState(String(formData.min_sku_count ?? 0));

    React.useEffect(() => {
        setAmountInput(String(formData.min_first_purchase_amount ?? 0));
    }, [formData.min_first_purchase_amount]);

    React.useEffect(() => {
        setSkuInput(String(formData.min_sku_count ?? 0));
    }, [formData.min_sku_count]);

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            await saveConditions();
            toast.success("Condiciones guardadas exitosamente");
        } catch {
            toast.error("No se pudieron guardar las condiciones");
        }
    };

    if (!selectedCompany) {
        return <div className="p-8 text-center">Cargando empresa...</div>;
    }

    return (
        <div className="p-8 max-w-4xl mx-auto">
            <div className="mb-8">
                <h1 className="text-3xl font-bold text-gradient">Condiciones de Afiliación</h1>
                <p className="text-slate-600 mt-1">
                    Define los requisitos para que un nuevo cliente se registre en el sistema
                </p>
            </div>

            <div className="grid gap-6">
                <Card className="glass-card">
                    <CardHeader>
                        <CardTitle>Requisitos de Primera Compra</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <Card className="bg-blue-50 border-blue-200">
                                    <CardContent className="p-6">
                                        <div className="flex items-center gap-3 mb-4">
                                            <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                                <ShoppingCart className="w-5 h-5 text-white" />
                                            </div>
                                            <div>
                                                <h3 className="font-semibold">Monto Mínimo</h3>
                                                <p className="text-xs text-slate-600">Primera compra</p>
                                            </div>
                                        </div>
                                        <Label>Monto mínimo de compra</Label>
                                        <Input
                                            type="number"
                                            step="0.01"
                                            min="0"
                                            value={amountInput}
                                            onChange={(e) => {
                                                const raw = e.target.value;
                                                setAmountInput(raw);
                                                if (raw === "") {
                                                    setFormData({
                                                        ...formData,
                                                        min_first_purchase_amount: 0,
                                                    });
                                                    return;
                                                }

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

                                                setFormData({
                                                    ...formData,
                                                    min_first_purchase_amount: parsed,
                                                });
                                            }}
                                            className="text-xl font-bold mt-2"
                                        />
                                        <p className="text-sm text-blue-700 mt-2">
                                            {formatCurrency(formData.min_first_purchase_amount)}
                                        </p>
                                    </CardContent>
                                </Card>

                                <Card className="bg-green-50 border-green-200">
                                    <CardContent className="p-6">
                                        <div className="flex items-center gap-3 mb-4">
                                            <div className="w-10 h-10 bg-green-600 rounded-lg flex items-center justify-center">
                                                <Package className="w-5 h-5 text-white" />
                                            </div>
                                            <div>
                                                <h3 className="font-semibold">SKUs Mínimos</h3>
                                                <p className="text-xs text-slate-600">Productos diferentes</p>
                                            </div>
                                        </div>
                                        <Label>Cantidad mínima de SKUs</Label>
                                        <Input
                                            type="number"
                                            min="0"
                                            value={skuInput}
                                            onChange={(e) => {
                                                const raw = e.target.value;
                                                setSkuInput(raw);
                                                if (raw === "") {
                                                    setFormData({
                                                        ...formData,
                                                        min_sku_count: 0,
                                                    });
                                                    return;
                                                }

                                                const parsed = parseInt(raw, 10);
                                                if (Number.isNaN(parsed)) {
                                                    return;
                                                }

                                                setFormData({
                                                    ...formData,
                                                    min_sku_count: parsed,
                                                });
                                            }}
                                            className="text-xl font-bold mt-2"
                                        />
                                        <p className="text-sm text-green-700 mt-2">
                                            {formData.min_sku_count} productos diferentes
                                        </p>
                                    </CardContent>
                                </Card>
                            </div>

                            <Card className="bg-amber-50 border-amber-200">
                                <CardContent className="p-4">
                                    <div className="flex items-center justify-between">
                                        <div className="flex items-center gap-3">
                                            <CheckCircle className="w-5 h-5 text-amber-600" />
                                            <div>
                                                <p className="font-semibold">Activar Condiciones</p>
                                                <p className="text-sm text-slate-600">
                                                    Aplicar requisitos al registrar nuevos clientes
                                                </p>
                                            </div>
                                        </div>
                                        <Switch
                                            checked={formData.is_active}
                                            onCheckedChange={(checked) => setFormData({
                                                ...formData,
                                                is_active: checked
                                            })}
                                        />
                                    </div>
                                </CardContent>
                            </Card>

                            <div className="bg-slate-50 p-4 rounded-lg">
                                <h4 className="font-semibold mb-2">Resumen de Condiciones</h4>
                                <ul className="space-y-1 text-sm text-slate-700">
                                    <li>• El cliente debe realizar una compra de al menos <strong>{formatCurrency(formData.min_first_purchase_amount)}</strong></li>
                                    <li>• La compra debe incluir al menos <strong>{formData.min_sku_count} productos diferentes</strong></li>
                                    <li>• Estado: <strong>{formData.is_active ? "Activo" : "Inactivo"}</strong></li>
                                </ul>
                            </div>

                            <Button
                                type="submit"
                                className="w-full bg-gradient-to-r from-blue-500 to-blue-600"
                                disabled={isSaving}
                            >
                                <CheckCircle className="w-4 h-4 mr-2" />
                                Guardar Condiciones
                            </Button>
                        </form>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}