'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Button, Card, Input, Select, Textarea } from '../../../../shared/components';
import { useToast } from '@hykocx/zen/toast';
import { parseUTCDate, formatDateForDisplay, formatDateForInput, getTodayUTC } from '../../../../shared/lib/dates.js';

/**
 * Recurrence Create Page Component
 * Page for creating a new invoice recurrence
 */
const RecurrenceCreatePage = ({ user }) => {
    const router = useRouter();
    const toast = useToast();
    
    const [clients, setClients] = useState([]);
    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    
    const [formData, setFormData] = useState({
        client_id: '',
        frequency_type: 'months',
        frequency_value: 1,
        recurrence_day: 1,
        first_reminder_days: 30,
        first_occurrence_date: '',
        use_custom_first_date: false,
        notes: '',
        items: [{ name: '', description: '', quantity: 1, unit_price: 0 }]
    });
    
    const [errors, setErrors] = useState({});
    const [selectedItemIds, setSelectedItemIds] = useState(['custom']);

    const frequencyTypeOptions = [
        { value: 'days', label: "jours" },
        { value: 'months', label: "mois" },
        { value: 'years', label: "ans" }
    ];

    const reminderOptions = [
        { value: 30, label: '30 jours' },
        { value: 14, label: '14 jours' },
        { value: 7, label: '7 jours' },
        { value: 3, label: '3 jours' }
    ];

    // Generate day options (1-28)
    const dayOptions = Array.from({ length: 28 }, (_, i) => ({
        value: i + 1,
        label: `Jour ${i + 1}`
    }));

    // Generate frequency value options (1-12 for months/years, 1-90 for days)
    const getFrequencyValueOptions = () => {
        const maxValue = formData.frequency_type === 'days' ? 90 : 12;
        return Array.from({ length: maxValue }, (_, i) => ({
            value: i + 1,
            label: i + 1
        }));
    };

    useEffect(() => {
        loadData();
    }, []);

    const loadData = async () => {
        try {
            setLoading(true);
            
            // Load clients
            const clientsResponse = await fetch('/zen/api/admin/clients?limit=1000', {
                credentials: 'include'
            });
            const clientsData = await clientsResponse.json();
            
            if (clientsData.success) {
                setClients(clientsData.clients || []);
            } else {
                toast.error("Échec du chargement des clients");
            }
            
            // Load items (active only)
            const itemsResponse = await fetch('/zen/api/admin/items?limit=1000&is_active=true', {
                credentials: 'include'
            });
            const itemsData = await itemsResponse.json();
            
            if (itemsData.success) {
                setItems(itemsData.items || []);
            }
        } catch (error) {
            console.error('Error loading data:', error);
            toast.error("Échec du chargement des données");
        } finally {
            setLoading(false);
        }
    };

    // Generate possible first occurrence dates based on recurrence settings
    const getFirstOccurrenceOptions = () => {
        if (!formData.frequency_type || !formData.recurrence_day) {
            return [];
        }

        if (formData.frequency_type === 'days') {
            return []; // Not applicable for days-based recurrence
        }

        const targetDay = parseInt(formData.recurrence_day);
        const today = getTodayUTC();
        const options = [];
        
        // Generate 24 months (2 years) of options
        for (let i = 0; i < 24; i++) {
            const date = new Date(today);
            date.setUTCDate(targetDay);
            date.setUTCMonth(today.getUTCMonth() + i);
            
            const dateStr = formatDateForInput(date);
            const label = formatDateForDisplay(date, 'fr-FR', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
            
            options.push({ value: dateStr, label });
        }
        
        return options;
    };

    // Calculate first due date for preview
    const calculateFirstDueDate = () => {
        if (!formData.frequency_type || !formData.frequency_value || !formData.recurrence_day) {
            return null;
        }

        // If using custom first date, use it
        if (formData.use_custom_first_date && formData.first_occurrence_date) {
            return parseUTCDate(formData.first_occurrence_date);
        }

        const today = getTodayUTC();
        
        if (formData.frequency_type === 'days') {
            const dueDate = new Date(today);
            dueDate.setUTCDate(dueDate.getUTCDate() + parseInt(formData.frequency_value));
            return dueDate;
        }
        
        // For months/years, find the next occurrence of recurrence_day
        const targetDay = parseInt(formData.recurrence_day);
        const currentDay = today.getUTCDate();
        
        let firstDueDate = new Date(today);
        firstDueDate.setUTCDate(targetDay);
        
        // If the target day has already passed this month, move to next period
        if (currentDay >= targetDay) {
            if (formData.frequency_type === 'months') {
                firstDueDate.setUTCMonth(firstDueDate.getUTCMonth() + 1);
            } else if (formData.frequency_type === 'years') {
                firstDueDate.setUTCFullYear(firstDueDate.getUTCFullYear() + 1);
            }
        }
        
        return firstDueDate;
    };

    // Calculate invoice creation date for preview
    const calculateCreationDate = () => {
        const dueDate = calculateFirstDueDate();
        if (!dueDate) return null;
        
        const creationDate = new Date(dueDate);
        creationDate.setUTCDate(creationDate.getUTCDate() - parseInt(formData.first_reminder_days));
        return creationDate;
    };

    const formatDate = (date) => {
        if (!date) return '';
        return formatDateForDisplay(date, 'fr-FR', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    };

    const handleInputChange = (field, value) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }));
        
        if (errors[field]) {
            setErrors(prev => ({
                ...prev,
                [field]: null
            }));
        }
    };

    const handleItemsChange = (newItems) => {
        setFormData(prev => ({ ...prev, items: newItems }));
    };

    const handleItemChange = (index, field, value) => {
        const newItems = [...formData.items];
        newItems[index] = { ...newItems[index], [field]: value };
        setFormData(prev => ({ ...prev, items: newItems }));
        
        if (errors[`item_${index}_${field}`]) {
            setErrors(prev => ({
                ...prev,
                [`item_${index}_${field}`]: null
            }));
        }
    };

    const handleSelectItem = (index, itemId) => {
        const newSelectedItemIds = [...selectedItemIds];
        newSelectedItemIds[index] = itemId;
        setSelectedItemIds(newSelectedItemIds);
        
        if (itemId === '' || itemId === 'custom') {
            handleItemChange(index, 'name', '');
            handleItemChange(index, 'description', '');
            handleItemChange(index, 'unit_price', 0);
            return;
        }
        
        const selectedItem = items.find(item => item.id === parseInt(itemId));
        if (selectedItem) {
            let fullItemName = '';
            if (selectedItem.parent_category_title) {
                fullItemName = `${selectedItem.parent_category_title} - ${selectedItem.category_title} - ${selectedItem.name}`;
            } else if (selectedItem.category_title) {
                fullItemName = `${selectedItem.category_title} - ${selectedItem.name}`;
            } else {
                fullItemName = selectedItem.name;
            }
            
            const newItems = [...formData.items];
            newItems[index] = {
                ...newItems[index],
                name: fullItemName,
                description: selectedItem.description || '',
                unit_price: selectedItem.unit_price
            };
            setFormData(prev => ({ ...prev, items: newItems }));
        }
    };

    const addItem = () => {
        setFormData(prev => ({
            ...prev,
            items: [...prev.items, { name: '', description: '', quantity: 1, unit_price: 0 }]
        }));
        setSelectedItemIds(prev => [...prev, 'custom']);
    };

    const removeItem = (index) => {
        if (formData.items.length > 1) {
            setFormData(prev => ({
                ...prev,
                items: prev.items.filter((_, i) => i !== index)
            }));
            setSelectedItemIds(prev => prev.filter((_, i) => i !== index));
        }
    };

    const calculateItemTotal = (item) => {
        return parseFloat(item.quantity || 0) * parseFloat(item.unit_price || 0);
    };

    const calculateTotals = () => {
        const subtotal = formData.items.reduce((sum, item) => {
            return sum + calculateItemTotal(item);
        }, 0);
        
        return {
            subtotal: parseFloat(subtotal.toFixed(2)),
            total: parseFloat(subtotal.toFixed(2))
        };
    };

    const validateForm = () => {
        const newErrors = {};
        
        if (!formData.client_id) {
            newErrors.client_id = 'Le client est requis';
        }
        
        if (!formData.frequency_type) {
            newErrors.frequency_type = 'Le type de fréquence est requis';
        }
        
        if (!formData.frequency_value || formData.frequency_value < 1) {
            newErrors.frequency_value = 'La valeur de fréquence doit être au moins 1';
        }
        
        if (!formData.recurrence_day || formData.recurrence_day < 1 || formData.recurrence_day > 28) {
            newErrors.recurrence_day = 'Le jour de récurrence doit être entre 1 et 28';
        }

        // Validate custom first occurrence date if enabled
        if (formData.use_custom_first_date && !formData.first_occurrence_date) {
            newErrors.first_occurrence_date = 'La date de première occurrence est requise lorsque la date personnalisée est activée';
        }

        // Validate items
        formData.items.forEach((item, index) => {
            if (!item.name.trim()) {
                newErrors[`item_${index}_name`] = 'Le nom de l\'article est requis';
            }
            if (!item.quantity || item.quantity <= 0) {
                newErrors[`item_${index}_quantity`] = 'La quantité doit être supérieure à 0';
            }
            if (item.unit_price < 0) {
                newErrors[`item_${index}_unit_price`] = 'Le prix unitaire ne peut pas être négatif';
            }
        });

        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        if (!validateForm()) {
            return;
        }

        try {
            setSaving(true);

            // Prepare data - remove use_custom_first_date flag and clear first_occurrence_date if not using custom
            const submitData = { ...formData };
            if (!submitData.use_custom_first_date) {
                submitData.first_occurrence_date = null;
            }
            delete submitData.use_custom_first_date;

            const response = await fetch('/zen/api/admin/recurrences', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
                body: JSON.stringify({ recurrence: submitData }),
            });

            const data = await response.json();

            if (data.success) {
                toast.success("Récurrence créée avec succès");
                router.push('/admin/invoice/recurrences');
            } else {
                toast.error(data.error || 'Échec de la création de la récurrence');
            }
        } catch (error) {
            console.error('Error creating recurrence:', error);
            toast.error("Échec de la création de la récurrence");
        } finally {
            setSaving(false);
        }
    };

    const firstDueDate = calculateFirstDueDate();
    const creationDate = calculateCreationDate();
    const totals = calculateTotals();

    return (
        <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
            {/* Header */}
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Créer une récurrence</h1>
                    <p className="mt-1 text-xs text-neutral-400">Configurer la génération automatique de factures</p>
                </div>
                <Button
                    variant="secondary"
                    size="sm"
                    onClick={() => router.push('/admin/invoice/recurrences')}
                >
                    ← Retour aux récurrences
                </Button>
            </div>

            {/* Form */}
            <form onSubmit={handleSubmit} className="space-y-6">
                {/* Recurrence Information */}
                <Card>
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Informations de la récurrence</h2>
                        
                        <Select
                            label="Client *"
                            value={formData.client_id}
                            onChange={(value) => handleInputChange('client_id', value)}
                            options={[
                                { value: '', label: 'Sélectionner un client' },
                                ...clients.map(client => ({ 
                                    value: client.id, 
                                    label: client.company_name || `${client.first_name} ${client.last_name}` 
                                }))
                            ]}
                            error={errors.client_id}
                            disabled={loading}
                        />
                    </div>
                </Card>

                {/* Schedule */}
                <Card>
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Planification</h2>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <Select
                                label="Type de fréquence *"
                                value={formData.frequency_type}
                                onChange={(value) => handleInputChange('frequency_type', value)}
                                options={frequencyTypeOptions}
                                error={errors.frequency_type}
                            />

                            <Select
                                label="Valeur de fréquence *"
                                value={formData.frequency_value}
                                onChange={(value) => handleInputChange('frequency_value', value)}
                                options={getFrequencyValueOptions()}
                                error={errors.frequency_value}
                            />

                            {formData.frequency_type !== 'days' && (
                                <Select
                                    label="Jour de récurrence (1-28) *"
                                    value={formData.recurrence_day}
                                    onChange={(value) => handleInputChange('recurrence_day', value)}
                                    options={dayOptions}
                                    error={errors.recurrence_day}
                                    description="Jour du mois pour créer la facture (limité à 1-28 pour cohérence)"
                                />
                            )}

                            <Select
                                label="Premier rappel (jours avant l'échéance)"
                                value={formData.first_reminder_days}
                                onChange={(value) => handleInputChange('first_reminder_days', value)}
                                options={reminderOptions}
                                description="La facture sera créée ce nombre de jours avant la date d'échéance"
                            />
                        </div>

                        {/* Custom First Occurrence Date */}
                        {formData.frequency_type !== 'days' && (
                            <div className="space-y-3">
                                <div className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        id="use_custom_first_date"
                                        checked={formData.use_custom_first_date}
                                        onChange={(e) => handleInputChange('use_custom_first_date', e.target.checked)}
                                        className="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-neutral-100 dark:bg-neutral-800 text-blue-500 focus:ring-blue-500 focus:ring-offset-neutral-900"
                                    />
                                    <label htmlFor="use_custom_first_date" className="text-sm text-neutral-700 dark:text-neutral-300">
                                        Indiquer une date de première occurrence personnalisée
                                    </label>
                                </div>

                                {formData.use_custom_first_date && (
                                    <Select
                                        label="Date de première occurrence *"
                                        value={formData.first_occurrence_date}
                                        onChange={(value) => handleInputChange('first_occurrence_date', value)}
                                        options={[
                                            { value: '', label: 'Sélectionner une date' },
                                            ...getFirstOccurrenceOptions()
                                        ]}
                                        error={errors.first_occurrence_date}
                                        description="Choisir quand la première facture doit être à échéance"
                                    />
                                )}
                            </div>
                        )}

                        {/* Real-time Preview */}
                        {firstDueDate && (
                            <div className="bg-blue-500/10 border border-blue-500/20 text-blue-400 px-4 py-3 rounded-lg space-y-2">
                                <div className="text-sm">
                                    <strong>Date d'échéance de la première facture :</strong> {formatDate(firstDueDate)}
                                    {formData.use_custom_first_date && formData.first_occurrence_date && (
                                        <span className="ml-2 text-xs">(Date personnalisée)</span>
                                    )}
                                </div>
                                {creationDate && (
                                    <div className="text-sm">
                                        <strong>Date de création de la facture :</strong> {formatDate(creationDate)}
                                        <span className="ml-2 text-xs">(Date d'échéance moins {formData.first_reminder_days} jours)</span>
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                </Card>

                {/* Items */}
                <Card>
                    <div className="space-y-4">
                        <div className="flex justify-between items-center">
                            <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Items</h2>
                        </div>

                        <div className="space-y-4">
                            {formData.items.map((item, index) => (
                                <div key={index} className="border border-neutral-200 dark:border-neutral-700/50 rounded-lg p-4 bg-neutral-50 dark:bg-neutral-900/20">
                                    <div className="flex justify-between items-start mb-4">
                                        <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Article {index + 1}</h3>
                                        {formData.items.length > 1 && (
                                            <Button
                                                type="button"
                                                variant="danger"
                                                size="sm"
                                                onClick={() => removeItem(index)}
                                            >
                                                Supprimer
                                            </Button>
                                        )}
                                    </div>

                                    <div className="space-y-4">
                                        <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
                                            <Select
                                                label="Item *"
                                                value={selectedItemIds[index] || 'custom'}
                                                onChange={(value) => handleSelectItem(index, value)}
                                                options={[
                                                    { value: 'custom', label: 'Custom' },
                                                    ...items.map(availableItem => {
                                                        let categoryDisplay = '';
                                                        if (availableItem.parent_category_title) {
                                                            categoryDisplay = `${availableItem.parent_category_title} - ${availableItem.category_title} - `;
                                                        } else if (availableItem.category_title) {
                                                            categoryDisplay = `${availableItem.category_title} - `;
                                                        }
                                                        
                                                        return {
                                                            value: availableItem.id, 
                                                            label: `${categoryDisplay}${availableItem.name} - $${parseFloat(availableItem.unit_price).toFixed(2)}` 
                                                        };
                                                    })
                                                ]}
                                                disabled={loading}
                                            />
                                            
                                            <Input
                                                label="Item Name *"
                                                value={item.name}
                                                onChange={(value) => handleItemChange(index, 'name', value)}
                                                placeholder="Enter item name..."
                                                error={errors[`item_${index}_name`]}
                                            />
                                        </div>

                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <Input
                                                label="Quantity *"
                                                type="number"
                                                step="0.01"
                                                min="0"
                                                value={item.quantity}
                                                onChange={(value) => handleItemChange(index, 'quantity', value)}
                                                error={errors[`item_${index}_quantity`]}
                                            />

                                            <Input
                                                label="Unit Price *"
                                                type="number"
                                                step="0.01"
                                                min="0"
                                                value={item.unit_price}
                                                onChange={(value) => handleItemChange(index, 'unit_price', value)}
                                                error={errors[`item_${index}_unit_price`]}
                                            />
                                        </div>

                                        <Textarea
                                            label="Description"
                                            value={item.description}
                                            onChange={(value) => handleItemChange(index, 'description', value)}
                                            rows={2}
                                            placeholder="Describe the item or service..."
                                        />

                                        <div className="text-right pt-2 border-t border-neutral-200 dark:border-neutral-700/50">
                                            <span className="text-sm text-neutral-400">Total article : </span>
                                            <span className="text-lg font-semibold text-green-400">
                                                ${calculateItemTotal(item).toLocaleString('en-US', {
                                                    minimumFractionDigits: 2,
                                                    maximumFractionDigits: 2
                                                })}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            ))}

                            <div className="flex justify-end items-center">
                                <Button
                                    type="button"
                                    variant="secondary"
                                    size="sm"
                                    onClick={addItem}
                                >
                                    + Add Item
                                </Button>
                            </div>
                        </div>

                        {/* Totals */}
                        <div className="pt-4 border-t border-neutral-200 dark:border-neutral-700/50">
                            <div className="flex justify-end">
                                <div className="w-full sm:w-80 space-y-2">
                                    <div className="flex justify-between text-neutral-600 dark:text-neutral-300">
                                        <span>Sous-total :</span>
                                        <span className="font-medium">
                                            ${totals.subtotal.toLocaleString('en-US', {
                                                minimumFractionDigits: 2,
                                                maximumFractionDigits: 2
                                            })}
                                        </span>
                                    </div>
                                    <div className="flex justify-between text-neutral-900 dark:text-white text-lg font-semibold pt-2 border-t border-neutral-200 dark:border-neutral-700/50">
                                        <span>Total :</span>
                                        <span>
                                            ${totals.total.toLocaleString('en-US', {
                                                minimumFractionDigits: 2,
                                                maximumFractionDigits: 2
                                            })}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Card>

                {/* Notes */}
                <Card>
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Notes</h2>
                        <Textarea
                            value={formData.notes}
                            onChange={(value) => handleInputChange('notes', value)}
                            rows={4}
                            placeholder="Add any additional notes or payment instructions..."
                        />
                    </div>
                </Card>

                {/* Actions */}
                <div className="flex items-center justify-end gap-3">
                    <Button
                        type="button"
                        variant="secondary"
                        onClick={() => router.push('/admin/invoice/recurrences')}
                        disabled={saving}
                    >
                        Annuler
                    </Button>
                    <Button
                        type="submit"
                        variant="success"
                        loading={saving}
                        disabled={saving}
                    >
                        {saving ? 'Création...' : 'Créer la récurrence'}
                    </Button>
                </div>
            </form>
        </div>
    );
};

export default RecurrenceCreatePage;