import React, { useState, useEffect } from "react";
import { FiUpload, FiMessageSquare, FiSave, FiInfo, FiTrash2, FiSearch, FiChevronDown } from 'react-icons/fi';
import styles from '../../chatbot/components/ChatbotSettings.module.css';
import { useGetGeneralSettings, useUpdateGeneralSettings } from "app/utils/api";
import { useToast } from "app/components/providers/use-toast";

interface SettingsGeneralProps {
    onManageChatAvailability: () => void;
    onManageReports: () => void;
}

export function SettingsGeneral({ onManageChatAvailability, onManageReports }: SettingsGeneralProps) {
    const { data: response, isLoading } = useGetGeneralSettings();
    const updateMutation = useUpdateGeneralSettings();
    const { showSuccess, showError } = useToast();
    const [formData, setFormData] = useState<any>(null);
    const [isFontDropdownOpen, setIsFontDropdownOpen] = useState(false);
    const [fontSearch, setFontSearch] = useState('');

    const appFonts = ['Noto Sans', 'Roboto', 'Open Sans', 'Montserrat', 'Inter', 'Lato', 'SF Pro Text'];
    const otherFonts = [
        'Source Sans Pro', 'Oswald', 'Roboto Mono', 'Raleway', 'Poppins', 'Roboto Slab', 
        'Merriweather', 'PT Sans', 'Playfair Display', 'Ubuntu', 'Muli', 'PT Serif', 
        'Open Sans Condensed', 'Lora'
    ];

    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const yyyy = today.getFullYear();
    const yy = String(yyyy).slice(-2);
    const mmm = today.toLocaleString('default', { month: 'short' });

    const defaultData = {
        app_embedding: { status: 'off', label: 'Embed app to your theme' },
        language: { selected: 'English', options: ['English'] },
        store_information: { name: 'Qixs-Design', avatar_url: null },
        appearance: { font: 'Noto Sans' },
        date_format: 'DD MMM YYYY'
    };

    useEffect(() => {
        if (response?.data) {
            setFormData({ ...defaultData, ...response.data });
        } else if (!isLoading) {
            setFormData(defaultData);
        }
    }, [response, isLoading]);

    if (isLoading || !formData) return <div style={{ padding: '24px' }}>Loading settings...</div>;

    const handleSave = async () => {
        try {
            await updateMutation.mutateAsync(formData);
            showSuccess("Settings updated successfully");
        } catch (err) {
            showError("Failed to update settings");
        }
    };

    const updateNested = (path: string[], value: any) => {
        setFormData((prev: any) => {
            const next = { ...prev };
            let curr = next;
            for (let i = 0; i < path.length - 1; i++) {
                if (!curr[path[i]]) curr[path[i]] = {};
                curr = curr[path[i]];
            }
            curr[path[path.length - 1]] = value;
            return next;
        });
    };

    return (
        <div className={styles.settingsLayout}>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
                <button
                    className={styles.syncBtn}
                    style={{ background: '#7c3aed', gap: '8px', display: 'flex', alignItems: 'center' }}
                    onClick={handleSave}
                    disabled={updateMutation.isPending}
                >
                    <FiSave /> {updateMutation.isPending ? 'Saving...' : 'Save changes'}
                </button>
            </div>

            {/* Embed App */}
            <div className={styles.appearanceCard}>
                <div className={styles.settingsFlexHeader}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                        <div style={{ background: '#7c3aed', color: 'white', padding: '10px', borderRadius: '10px', display: 'flex' }}>
                            <FiMessageSquare size={20} />
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                            <span style={{ fontWeight: 600, fontSize: '15px' }}>{formData.app_embedding?.label || "Embed app to your theme"}</span>
                            <span style={{ 
                                background: formData.app_embedding?.status === 'on' ? '#dcfce7' : '#e5e7eb', 
                                color: formData.app_embedding?.status === 'on' ? '#166534' : '#6b7280', 
                                padding: '2px 8px', borderRadius: '4px', fontSize: '11px', fontWeight: 600,
                                textTransform: 'uppercase'
                            }}>
                                {formData.app_embedding?.status || 'Off'}
                            </span>
                        </div>
                    </div>
                    <button 
                        className={styles.syncBtn} 
                        style={{ background: formData.app_embedding?.status === 'on' ? '#dc2626' : '#7c3aed', transition: 'all 0.2s' }}
                        onClick={() => updateNested(['app_embedding', 'status'], formData.app_embedding?.status === 'on' ? 'off' : 'on')}
                    >
                        {formData.app_embedding?.status === 'on' ? 'Turn Off' : 'Turn On'}
                    </button>
                </div>
            </div>

            {/* Language */}
            <div className={styles.appearanceCard}>
                <div className={styles.settingsGrid}>
                    <div>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>Language</h3>
                        <p style={{ fontSize: '13px', color: '#6b7280' }}>Select the language for your app</p>
                    </div>
                    <div>
                        <label style={{ fontSize: '13px', color: '#6b7280', display: 'block', marginBottom: '8px' }}>Language</label>
                        <select 
                            className={styles.chatInput} 
                            style={{ width: '100%', textAlign: 'left', background: 'white', border: '1px solid #d1d5db' }}
                            value={formData.language?.selected || 'English'}
                            onChange={(e) => updateNested(['language', 'selected'], e.target.value)}
                        >
                            <option>English</option>
                            <option>Spanish</option>
                            <option>French</option>
                        </select>
                    </div>
                </div>
            </div>

            {/* Store Information */}
            <div className={styles.appearanceCard}>
                <div className={styles.settingsGrid}>
                    <div>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>Store information</h3>
                        <p style={{ fontSize: '13px', color: '#6b7280' }}>Name and avatar will be shown in conversations with customers</p>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                        <div>
                            <label style={{ fontSize: '13px', color: '#6b7280', display: 'block', marginBottom: '12px' }}>Name</label>
                            <input 
                                type="text" 
                                className={styles.chatInput} 
                                style={{ width: '100%', textAlign: 'left', background: 'white', border: '1px solid #d1d5db' }} 
                                value={formData.store_information?.name || ""}
                                onChange={(e) => updateNested(['store_information', 'name'], e.target.value)}
                            />
                        </div>
                        <div>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
                                <label style={{ fontSize: '13px', color: '#6b7280', fontWeight: 500 }}>Avatar</label>
                                <FiInfo size={14} color="#9ca3af" />
                            </div>
                            
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                                {formData.store_information?.avatar_url && (
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                        <img 
                                            src={formData.store_information.avatar_url} 
                                            alt="Avatar" 
                                            style={{ width: '56px', height: '56px', borderRadius: '50%', objectFit: 'cover', border: '1px solid #e5e7eb' }} 
                                        />
                                        <button 
                                            onClick={() => updateNested(['store_information', 'avatar_url'], null)}
                                            style={{ background: 'none', border: 'none', color: '#dc2626', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '6px', cursor: 'pointer', padding: 0 }}
                                        >
                                            <FiTrash2 size={16} /> Remove
                                        </button>
                                    </div>
                                )}
                                
                                <div style={{ position: 'relative' }}>
                                    <input 
                                        type="file" 
                                        id="avatar-upload" 
                                        hidden 
                                        onChange={(e) => {
                                            const file = e.target.files?.[0];
                                            if (file) {
                                                const url = URL.createObjectURL(file);
                                                updateNested(['store_information', 'avatar_url'], url);
                                            }
                                        }}
                                    />
                                    <label 
                                        htmlFor="avatar-upload"
                                        style={{ 
                                            display: 'inline-flex', 
                                            alignItems: 'center', 
                                            gap: '8px', 
                                            padding: '8px 16px', 
                                            background: 'white', 
                                            border: '1px solid #d1d5db', 
                                            borderRadius: '8px', 
                                            fontSize: '13px', 
                                            fontWeight: 500, 
                                            cursor: 'pointer' 
                                        }}
                                    >
                                        <FiUpload size={16} /> Upload avatar
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Font Selection */}
            <div className={styles.appearanceCard}>
                <div className={styles.settingsGrid}>
                    <div>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>Font</h3>
                        <p style={{ fontSize: '13px', color: '#6b7280' }}>Apply to your chatbox, FAQs block and FAQs page</p>
                    </div>
                    <div style={{ position: 'relative' }}>
                        <label style={{ fontSize: '13px', color: '#6b7280', display: 'block', marginBottom: '8px' }}>Font</label>
                        <div 
                            className={styles.chatInput} 
                            style={{ 
                                width: '100%', 
                                textAlign: 'left', 
                                background: 'white', 
                                border: '1px solid #d1d5db', 
                                cursor: 'pointer',
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center'
                            }}
                            onClick={() => setIsFontDropdownOpen(!isFontDropdownOpen)}
                        >
                            <span style={{ fontSize: '13px' }}>{formData.appearance?.font || 'Noto Sans'}</span>
                            <FiChevronDown />
                        </div>

                        {isFontDropdownOpen && (
                            <div style={{ 
                                position: 'absolute', 
                                top: 'calc(100% + 4px)', 
                                left: 0, 
                                right: 0, 
                                background: 'white', 
                                border: '1px solid #e5e7eb', 
                                borderRadius: '8px', 
                                boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)', 
                                zIndex: 50,
                                maxHeight: '400px',
                                overflowY: 'auto'
                            }}>
                                {/* Store Theme's Font */}
                                <div style={{ padding: '12px 16px', fontSize: '11px', color: '#9ca3af', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.025em' }}>
                                    Store theme's font
                                </div>
                                <div 
                                    style={{ padding: '8px 16px', fontSize: '13px', cursor: 'pointer' }}
                                    onClick={() => { updateNested(['appearance', 'font'], 'ShopifySans'); setIsFontDropdownOpen(false); }}
                                >
                                    ShopifySans
                                </div>

                                <div style={{ height: '1px', background: '#f3f4f6', margin: '4px 0' }} />

                                {/* App Theme's Font */}
                                <div style={{ padding: '12px 16px', fontSize: '11px', color: '#9ca3af', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.025em' }}>
                                    App theme's font
                                </div>
                                {appFonts.map(font => (
                                    <div 
                                        key={font}
                                        style={{ 
                                            padding: '8px 16px', 
                                            fontSize: '13px', 
                                            cursor: 'pointer',
                                            background: formData.appearance?.font === font ? '#f3f4f6' : 'transparent',
                                            fontWeight: formData.appearance?.font === font ? 600 : 400
                                        }}
                                        onClick={() => { updateNested(['appearance', 'font'], font); setIsFontDropdownOpen(false); }}
                                    >
                                        {font}
                                    </div>
                                ))}

                                <div style={{ height: '1px', background: '#f3f4f6', margin: '4px 0' }} />

                                {/* Other fonts */}
                                <div style={{ padding: '12px 16px', fontSize: '11px', color: '#9ca3af', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.025em' }}>
                                    Other fonts
                                </div>
                                <div style={{ padding: '0 12px 12px' }}>
                                    <div style={{ position: 'relative' }}>
                                        <div style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: '#9ca3af' }}>
                                            <FiSearch size={14} />
                                        </div>
                                        <input 
                                            type="text" 
                                            placeholder="Search fonts" 
                                            style={{ 
                                                width: '100%', 
                                                height: '36px', 
                                                border: '1px solid #e5e7eb', 
                                                borderRadius: '6px', 
                                                padding: '0 12px 0 34px', 
                                                fontSize: '13px',
                                                outline: 'none'
                                            }}
                                            value={fontSearch}
                                            onChange={(e) => setFontSearch(e.target.value)}
                                            onClick={(e) => e.stopPropagation()}
                                        />
                                    </div>
                                </div>
                                {otherFonts.filter(f => f.toLowerCase().includes(fontSearch.toLowerCase())).map(font => (
                                    <div 
                                        key={font}
                                        style={{ 
                                            padding: '8px 16px', 
                                            fontSize: '13px', 
                                            cursor: 'pointer',
                                            background: formData.appearance?.font === font ? '#f3f4f6' : 'transparent'
                                        }}
                                        onClick={() => { updateNested(['appearance', 'font'], font); setIsFontDropdownOpen(false); }}
                                    >
                                        {font}
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {/* Date Format Selection */}
            <div className={styles.appearanceCard}>
                <div className={styles.settingsGrid}>
                    <div>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>Date format</h3>
                        <p style={{ fontSize: '13px', color: '#6b7280' }}>Apply throughout the app</p>
                    </div>
                    <div>
                        <label style={{ fontSize: '13px', color: '#6b7280', display: 'block', marginBottom: '8px' }}>Date format</label>
                        <select 
                            className={styles.chatInput} 
                            style={{ width: '100%', textAlign: 'left', background: 'white', border: '1px solid #d1d5db' }}
                            value={formData.date_format || 'DD MMM YYYY'}
                            onChange={(e) => updateNested(['date_format'], e.target.value)}
                        >
                            <option value="DD MMM YYYY">DD MMM YYYY ({dd} {mmm} {yyyy})</option>
                            <option value="MM/DD/YYYY">MM/DD/YYYY ({mm}/{dd}/{yyyy})</option>
                            <option value="DD/MM/YYYY">DD/MM/YYYY ({dd}/{mm}/{yyyy})</option>
                            <option value="MM/DD/YY">MM/DD/YY ({mm}/{dd}/{yy})</option>
                            <option value="YYYY-MM-DD">YYYY-MM-DD ({yyyy}-{mm}-{dd})</option>
                        </select>
                    </div>
                </div>
            </div>

            {/* Chat availability */}
            <div className={styles.appearanceCard} style={{ padding: '20px 24px' }}>
                <div className={styles.settingsFlexHeader}>
                    <div style={{ flex: 1 }}>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '4px' }}>Chat availability</h3>
                        <p style={{ fontSize: '13px', color: '#6b7280' }}>Display your online status during these hours and when you are active in the inbox.</p>
                    </div>
                    <button
                        className={styles.syncBtn}
                        style={{ background: '#7c3aed' }}
                        onClick={onManageChatAvailability}
                    >
                        Manage
                    </button>
                </div>
            </div>

            {/* Reports */}
            <div className={styles.appearanceCard} style={{ padding: '20px 24px' }}>
                <div className={styles.settingsFlexHeader}>
                    <div style={{ flex: 1 }}>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '4px' }}>Reports</h3>
                        <p style={{ fontSize: '13px', color: '#6b7280' }}>Manage how to send reports to update app performance.</p>
                    </div>
                    <button
                        className={styles.syncBtn}
                        style={{ background: '#7c3aed' }}
                        onClick={onManageReports}
                    >
                        Manage
                    </button>
                </div>
            </div>
        </div>
    );
}