import { useState } from "react";
import { FiX } from "react-icons/fi";
import styles from "../../../chatbot/components/ChatbotSettings.module.css";
import { useUpdateFAQSystem, useGetFAQSystem } from "app/utils/api";
import { useToast } from "app/components/providers/use-toast";

interface AddCategoryModalProps {
    onClose: () => void;
    category?: any;
    nextPosition?: number;
}

export function AddCategoryModal({ onClose, category, nextPosition }: AddCategoryModalProps) {
    const [name, setName] = useState(category?.category_name || "");
    const [icon, setIcon] = useState(category?.icon_identifier || "shopping_cart");
    const [status, setStatus] = useState(category?.status || "published");
    const [isFeatured, setIsFeatured] = useState(category?.is_featured || false);

    // For new category: default to nextPosition (end of list)
    // For editing: default to existing position
    const totalPositions = nextPosition || 1; // nextPosition = categories.length + 1 for new, categories.length for edit
    const [position, setPosition] = useState<number>(category?.display_position || totalPositions);

    const updateFaqMutation = useUpdateFAQSystem();
    const { data: faqRes } = useGetFAQSystem();
    const { showSuccess, showError } = useToast();

    const handleSave = async () => {
        if (!name.trim()) {
            showError("Category name is required.");
            return;
        }

        try {
            const existingCategories: any[] = faqRes?.data?.content?.categories || [];

            const categoryData = {
                category_id: category?.category_id || `cat_${Date.now()}`,
                category_name: name,
                icon_identifier: icon,
                status: status.toLowerCase(),
                display_position: position,
                is_featured: isFeatured,
                faq_count: category?.faq_count || 0,
                faqs: category?.faqs || []
            };

            let newCategories: any[];

            if (category?.category_id) {
                // Editing: replace in place then re-sort
                newCategories = existingCategories.map(c =>
                    c.category_id === category.category_id ? categoryData : c
                );
            } else {
                // Adding new: insert at chosen position, shift others down
                newCategories = existingCategories.map(c => ({
                    ...c,
                    display_position: c.display_position >= position
                        ? c.display_position + 1
                        : c.display_position
                }));
                newCategories.push(categoryData);
            }

            // Sort by display_position then renumber sequentially 1..N
            newCategories.sort((a, b) => a.display_position - b.display_position);
            newCategories = newCategories.map((c, i) => ({ ...c, display_position: i + 1 }));

            await updateFaqMutation.mutateAsync({ categories: newCategories });
            showSuccess(category?.category_id ? "Category updated!" : "Category created!");
            onClose();
        } catch (err) {
            showError("Failed to save category.");
        }
    };

    return (
        <div className={styles.modalOverlay} onClick={onClose}>
            <div className={styles.modalContent} style={{ width: '500px', borderRadius: '16px' }} onClick={e => e.stopPropagation()}>
                <div className={styles.modalHeader}>
                    <h2 className={styles.modalTitle} style={{ margin: 0 }}>{category?.category_id ? "Edit category" : "Add category"}</h2>
                    <button className={styles.closeButton} onClick={onClose}>&times;</button>
                </div>

                <div className={styles.modalBody} style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '24px' }}>
                    <div>
                        <label className={styles.settingsInputLabel}>Category name</label>
                        <input 
                            type="text" 
                            className={styles.chatInput} 
                            placeholder="New category" 
                            style={{ textAlign: 'left', width: '100%', maxWidth: '100%', marginTop: '8px' }} 
                            value={name}
                            onChange={e => setName(e.target.value)}
                        />
                    </div>

                    <div>
                        <label className={styles.settingsInputLabel}>Icon</label>
                        <div style={{ display: 'flex', gap: '12px', marginTop: '8px' }}>
                            {[
                                { id: 'shopping_cart', char: '🛒' },
                                { id: 'exchange', char: '🔄' },
                                { id: 'payment', char: '💳' },
                                { id: 'other', char: '📁' }
                            ].map(item => (
                                <div 
                                    key={item.id} 
                                    onClick={() => setIcon(item.id)}
                                    style={{ 
                                        width: '40px', 
                                        height: '40px', 
                                        borderRadius: '8px', 
                                        background: icon === item.id ? '#7c3aed' : '#f9fafb', 
                                        color: icon === item.id ? 'white' : 'inherit',
                                        display: 'flex', 
                                        alignItems: 'center', 
                                        justifyContent: 'center', 
                                        cursor: 'pointer', 
                                        fontSize: '20px', 
                                        border: '1px solid #e5e7eb' 
                                    }}
                                >
                                    {item.char}
                                </div>
                            ))}
                        </div>
                    </div>

                    <div>
                        <label className={styles.settingsInputLabel}>Position</label>
                        <select 
                            className={styles.chatInput} 
                            style={{ textAlign: 'left', width: '100%', maxWidth: '100%', marginTop: '8px' }}
                            value={position}
                            onChange={e => setPosition(parseInt(e.target.value))}
                        >
                            {Array.from({ length: totalPositions }, (_, i) => i + 1).map(p => (
                                <option key={p} value={p}>
                                    Position {p}{p === totalPositions && !category?.category_id ? " (last)" : ""}
                                </option>
                            ))}
                        </select>
                    </div>

                    <div>
                        <label className={styles.settingsInputLabel}>Status</label>
                        <select 
                            className={styles.chatInput} 
                            style={{ textAlign: 'left', width: '100%', maxWidth: '100%', marginTop: '8px' }}
                            value={status}
                            onChange={e => setStatus(e.target.value)}
                        >
                            <option value="published">Published</option>
                            <option value="draft">Draft</option>
                        </select>
                    </div>

                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', background: '#f9fafb', padding: '16px', borderRadius: '12px' }}>
                        <input 
                            type="checkbox" 
                            style={{ marginTop: '4px' }} 
                            checked={isFeatured}
                            onChange={e => setIsFeatured(e.target.checked)}
                        />
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                            <span style={{ fontSize: '14px', fontWeight: 600 }}>Feature category</span>
                            <span style={{ fontSize: '12px', color: '#6b7280' }}>
                                Enable to show this category on the first page of FAQs chatbox. If not, it will only be shown when viewing all categories.
                            </span>
                        </div>
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '10px' }}>
                        <button className={styles.settingsBtn} style={{ background: 'white', color: '#111111', border: '1px solid #e5e7eb' }} onClick={onClose}>Cancel</button>
                        <button 
                            className={styles.syncBtn} 
                            style={{ background: '#7c3aed' }}
                            onClick={handleSave}
                            disabled={updateFaqMutation.isPending}
                        >
                            {updateFaqMutation.isPending ? "Saving..." : (category?.category_id ? "Save" : "Create Category")}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}