// @ts-nocheck
import React, { useEffect, useState } 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 { Badge } from "@/components/ui/badge";
import { Plus, Edit, Trash2, Tag, Calendar, Percent } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { useDiscountRule } from "@/hooks/useDiscountRule";

export default function DiscountRulesPage() {
    const {
      selectedCompany,
      rules,
      isLoading,
      showForm,
      editingRule,
      formData,
      setFormData,
      openCreateForm,
      openEditForm,
      closeForm,
      toggleDay,
      toggleSegment,
      saveRule,
      deleteRule,
    } = useDiscountRule();
    const [discountPercentageInput, setDiscountPercentageInput] = useState(
      String(formData.discount_percentage ?? 0),
    );
    const [discountAmountInput, setDiscountAmountInput] = useState(
      String(formData.discount_amount ?? 0),
    );

    useEffect(() => {
      setDiscountPercentageInput(String(formData.discount_percentage ?? 0));
      setDiscountAmountInput(String(formData.discount_amount ?? 0));
    }, [formData.discount_percentage, formData.discount_amount, showForm, editingRule?.id]);

    const handleSubmit = (e) => {
      e.preventDefault();
      saveRule();
    };

    const discountTypeLabels = {
        day_of_week: "Día de la Semana",
        commune: "Comuna",
        birthday: "Cumpleaños",
        customer_segment: "Segmento Cliente"
    };

    const segmentLabels = {
        standard: "Standard",
        premium: "Premium",
        vip: "VIP",
        gold: "Gold",
        platinum: "Platinum"
    };

    const daysLabels = {
        monday: "Lunes",
        tuesday: "Martes",
        wednesday: "Miércoles",
        thursday: "Jueves",
        friday: "Viernes",
        saturday: "Sábado",
        sunday: "Domingo"
    };

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

    return (
        <div className="p-8 max-w-7xl mx-auto">
            <div className="flex justify-between items-center mb-8">
                <div>
                    <h1 className="text-3xl font-bold text-gradient">Reglas de Descuentos</h1>
                    <p className="text-slate-600 mt-1">Gestiona descuentos por día, comuna, cumpleaños y segmento de cliente</p>
                </div>
                <Button
                    onClick={openCreateForm}
                    className="bg-gradient-to-r from-blue-500 to-blue-600"
                >
                    <Plus className="w-4 h-4 mr-2" />
                    Nueva Regla
                </Button>
            </div>

            {showForm && (
                <Card className="mb-6 glass-card">
                    <CardHeader>
                        <CardTitle>{editingRule ? "Editar" : "Nueva"} Regla de Descuento</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={handleSubmit} className="space-y-4">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <Label>Nombre de la Regla</Label>
                                    <Input
                                        value={formData.name}
                                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                        required
                                    />
                                </div>
                                <div>
                                    <Label>Tipo de Descuento</Label>
                                    <select
                                        value={formData.discount_type}
                                        onChange={(e) => setFormData({ ...formData, discount_type: e.target.value })}
                                        className="w-full border rounded-md p-2"
                                    >
                                        {Object.entries(discountTypeLabels).map(([key, label]) => (
                                            <option key={key} value={key}>{label}</option>
                                        ))}
                                    </select>
                                </div>
                                <div>
                                    <Label>Descuento (%)</Label>
                                    <Input
                                        type="number"
                                        value={discountPercentageInput}
                                        onChange={(e) => {
                                          const raw = e.target.value;
                                          setDiscountPercentageInput(raw);
                                          if (raw === "") {
                                            setFormData({ ...formData, discount_percentage: 0 });
                                            return;
                                          }
                                          const parsed = Number.parseFloat(raw);
                                          if (Number.isNaN(parsed)) {
                                            return;
                                          }
                                          setFormData({ ...formData, discount_percentage: parsed });
                                        }}
                                        min="0"
                                        max="100"
                                        step="0.01"
                                    />
                                </div>
                                <div>
                                    <Label>Descuento Fijo ($)</Label>
                                    <Input
                                        type="number"
                                        value={discountAmountInput}
                                        onChange={(e) => {
                                          const raw = e.target.value;
                                          setDiscountAmountInput(raw);
                                          if (raw === "") {
                                            setFormData({ ...formData, discount_amount: 0 });
                                            return;
                                          }
                                          const parsed = Number.parseFloat(raw);
                                          if (Number.isNaN(parsed)) {
                                            return;
                                          }
                                          setFormData({ ...formData, discount_amount: parsed });
                                        }}
                                        min="0"
                                        step="0.01"
                                    />
                                </div>
                                <div className="flex items-center gap-2">
                                    <Switch
                                        checked={formData.is_active}
                                        onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked })}
                                    />
                                    <Label>Regla Activa</Label>
                                </div>
                            </div>

                            {formData.discount_type === "day_of_week" && (
                                <div>
                                    <Label className="mb-2 block">Días Aplicables</Label>
                                    <div className="flex flex-wrap gap-2">
                                        {Object.entries(daysLabels).map(([day, label]) => (
                                            <Button
                                                key={day}
                                                type="button"
                                                variant={formData.days_of_week.includes(day) ? "default" : "outline"}
                                                onClick={() => toggleDay(day)}
                                                className="text-sm"
                                            >
                                                {label}
                                            </Button>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {formData.discount_type === "commune" && (
                                <div>
                                    <Label>Comunas Aplicables (separadas por coma)</Label>
                                    <Input
                                        value={formData.communes.join(", ")}
                                        onChange={(e) => setFormData({ 
                                            ...formData, 
                                            communes: e.target.value.split(",").map((c) => c.trim())
                                        })}
                                        placeholder="Ej: Santiago, Providencia, Las Condes"
                                    />
                                </div>
                            )}

                            {formData.discount_type === "customer_segment" && (
                                <div>
                                    <Label className="mb-2 block">Segmentos Aplicables</Label>
                                    <div className="flex flex-wrap gap-2">
                                        {Object.entries(segmentLabels).map(([segment, label]) => (
                                            <Button
                                                key={segment}
                                                type="button"
                                                variant={formData.customer_segments.includes(segment) ? "default" : "outline"}
                                                onClick={() => {
                                                    toggleSegment(segment);
                                                }}
                                                className="text-sm"
                                            >
                                                {label}
                                            </Button>
                                        ))}
                                    </div>
                                </div>
                            )}

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <Label>Fecha Inicio (Opcional)</Label>
                                    <Input
                                        type="date"
                                        value={formData.start_date}
                                        onChange={(e) => setFormData({ ...formData, start_date: e.target.value })}
                                    />
                                </div>
                                <div>
                                    <Label>Fecha Fin (Opcional)</Label>
                                    <Input
                                        type="date"
                                        value={formData.end_date}
                                        onChange={(e) => setFormData({ ...formData, end_date: e.target.value })}
                                    />
                                </div>
                            </div>

                            <div className="flex gap-2 justify-end">
                                <Button type="button" variant="outline" onClick={closeForm}>
                                    Cancelar
                                </Button>
                                <Button type="submit" className="bg-gradient-to-r from-blue-500 to-blue-600">
                                    {editingRule ? "Actualizar" : "Crear"} Regla
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            )}

            {isLoading ? (
                <div className="text-center py-8">Cargando reglas...</div>
            ) : rules.length === 0 ? (
                <Card className="glass-card text-center py-12">
                    <Tag className="w-12 h-12 mx-auto text-slate-400 mb-4" />
                    <h3 className="text-lg font-semibold mb-2">No hay reglas de descuento</h3>
                    <p className="text-slate-600 mb-4">Crea tu primera regla de descuento</p>
                    <Button onClick={openCreateForm} className="bg-gradient-to-r from-blue-500 to-blue-600">
                        <Plus className="w-4 h-4 mr-2" />
                        Crear Primera Regla
                    </Button>
                </Card>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {rules.map((rule) => (
                        <Card key={rule.id} className="glass-card">
                            <CardHeader>
                                <div className="flex justify-between items-start">
                                    <div className="flex items-center gap-2">
                                        <Tag className="w-5 h-5 text-blue-600" />
                                        <CardTitle className="text-lg">{rule.name}</CardTitle>
                                    </div>
                                    {rule.is_active ? (
                                        <Badge className="bg-green-100 text-green-800">Activa</Badge>
                                    ) : (
                                        <Badge className="bg-gray-100 text-gray-800">Inactiva</Badge>
                                    )}
                                </div>
                            </CardHeader>
                            <CardContent className="space-y-3">
                                <div>
                                    <span className="text-sm text-slate-600">Tipo:</span>
                                    <Badge variant="outline" className="ml-2">
                                        {discountTypeLabels[rule.discount_type]}
                                    </Badge>
                                </div>
                                <div className="flex items-center justify-between">
                                    <span className="text-sm text-slate-600">Descuento:</span>
                                    <div className="text-lg font-bold text-blue-600">
                                        {rule.discount_percentage > 0 && (
                                            <div className="flex items-center gap-1">
                                                <Percent className="w-4 h-4" />
                                                {rule.discount_percentage}%
                                            </div>
                                        )}
                                        {rule.discount_amount > 0 && (
                                            <div>${rule.discount_amount.toFixed(2)}</div>
                                        )}
                                    </div>
                                </div>
                                {rule.discount_type === "day_of_week" && rule.days_of_week?.length > 0 && (
                                    <div>
                                        <span className="text-sm text-slate-600 block mb-1">Días:</span>
                                        <div className="flex flex-wrap gap-1">
                                            {rule.days_of_week.map((day) => (
                                                <Badge key={day} variant="outline" className="text-xs">
                                                    {daysLabels[day]}
                                                </Badge>
                                            ))}
                                        </div>
                                    </div>
                                )}
                                {rule.discount_type === "commune" && rule.communes?.length > 0 && (
                                    <div>
                                        <span className="text-sm text-slate-600 block mb-1">Comunas:</span>
                                        <div className="flex flex-wrap gap-1">
                                            {rule.communes.map((commune, i) => (
                                                <Badge key={i} variant="outline" className="text-xs">
                                                    {commune}
                                                </Badge>
                                            ))}
                                        </div>
                                    </div>
                                )}
                                {rule.discount_type === "customer_segment" && rule.customer_segments?.length > 0 && (
                                    <div>
                                        <span className="text-sm text-slate-600 block mb-1">Segmentos:</span>
                                        <div className="flex flex-wrap gap-1">
                                            {rule.customer_segments.map((segment) => (
                                                <Badge key={segment} variant="outline" className="text-xs">
                                                    {segmentLabels[segment]}
                                                </Badge>
                                            ))}
                                        </div>
                                    </div>
                                )}
                                {(rule.start_date || rule.end_date) && (
                                    <div className="flex items-center gap-1 text-sm text-slate-600">
                                        <Calendar className="w-4 h-4" />
                                        {rule.start_date && <span>{new Date(rule.start_date).toLocaleDateString()}</span>}
                                        {rule.start_date && rule.end_date && <span>-</span>}
                                        {rule.end_date && <span>{new Date(rule.end_date).toLocaleDateString()}</span>}
                                    </div>
                                )}
                                <div className="flex gap-2 pt-2">
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        onClick={() => openEditForm(rule)}
                                        className="flex-1"
                                    >
                                        <Edit className="w-4 h-4 mr-1" />
                                        Editar
                                    </Button>
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        onClick={() => deleteRule(rule.id)}
                                        className="text-red-600 hover:text-red-700"
                                    >
                                        <Trash2 className="w-4 h-4" />
                                    </Button>
                                </div>
                            </CardContent>
                        </Card>
                    ))}
                </div>
            )}
        </div>
    );
}