import styles from "../../ChatbotSettings.module.css";
import { FiUpload, FiHome, FiMessageCircle, FiTruck, FiHelpCircle } from "react-icons/fi";
import { HiOutlineSparkles } from "react-icons/hi";

// Import local icons
import Message1 from "../../../../../assets/chat_icons/message-1.svg";
import Message2 from "../../../../../assets/chat_icons/message-2.svg";
import Messages3 from "../../../../../assets/chat_icons/messages-3.svg";
import Messenger from "../../../../../assets/chat_icons/messenger.svg";
import Call from "../../../../../assets/chat_icons/call.svg";
import Send2 from "../../../../../assets/chat_icons/send-2.svg";

interface AppearanceTabProps {
    brandColor: string;
    setBrandColor: (val: string) => void;
    isCustomColorTab: boolean;
    setIsCustomColorTab: (val: boolean) => void;
    isGradientHeader: boolean;
    setIsGradientHeader: (val: boolean) => void;
    headerColor1: string;
    setHeaderColor1: (val: string) => void;
    headerColor2: string;
    setHeaderColor2: (val: string) => void;
    headerTextColor: string;
    setHeaderTextColor: (val: string) => void;
    chatboxTextColor: string;
    setChatboxTextColor: (val: string) => void;
    buttonBgColor: string;
    setButtonBgColor: (val: string) => void;
    buttonTextColor: string;
    setButtonTextColor: (val: string) => void;
    alignment: string;
    setAlignment: (val: string) => void;
    chatboxStyle: string;
    setChatboxStyle: (val: string) => void;
    launcher: string;
    setLauncher: (val: string) => void;
    buttonIcon: string;
    setButtonIcon: (val: string) => void;
    buttonSize: string;
    setButtonSize: (val: string) => void;
    mobileRatio: string;
    setMobileRatio: (val: string) => void;
}

export default function AppearanceTab({
    brandColor,
    setBrandColor,
    isCustomColorTab,
    setIsCustomColorTab,
    isGradientHeader,
    setIsGradientHeader,
    headerColor1,
    setHeaderColor1,
    headerColor2,
    setHeaderColor2,
    headerTextColor,
    setHeaderTextColor,
    chatboxTextColor,
    setChatboxTextColor,
    buttonBgColor,
    setButtonBgColor,
    buttonTextColor,
    setButtonTextColor,
    alignment,
    setAlignment,
    chatboxStyle,
    setChatboxStyle,
    launcher,
    setLauncher,
    buttonIcon,
    setButtonIcon,
    buttonSize,
    setButtonSize,
    mobileRatio,
    setMobileRatio
}: AppearanceTabProps) {
    const themeColor = isCustomColorTab ? buttonBgColor : brandColor;

    function IconPreview({ id, size, style }: { id: string, size: number, style?: any }) {
        const icons: any = {
            'msg1': Message1,
            'msg2': Message2,
            'msg3': Messages3,
            'messenger': Messenger,
            'call': Call,
            'send': Send2
        };
        const src = icons[id] || Message1;
        return <img src={src} alt="" width={size} height={size} className={styles.whiteIcon} style={style} />;
    }
    return (
        <>
            <div className={styles.card}>
                <h2 className={styles.sectionTitle}>Brand colors</h2>
                <div className={styles.tabs} style={{ borderBottom: 'none', marginBottom: '12px' }}>
                    <div 
                        className={`${styles.tab} ${!isCustomColorTab ? styles.tabActive : ""}`} 
                        style={{ padding: '6px 12px', fontSize: '13px' }}
                        onClick={() => setIsCustomColorTab(false)}
                    >
                        Preset
                    </div>
                    <div 
                        className={`${styles.tab} ${isCustomColorTab ? styles.tabActive : ""}`} 
                        style={{ padding: '6px 12px', fontSize: '13px' }}
                        onClick={() => setIsCustomColorTab(true)}
                    >
                        Custom
                    </div>
                    <div className={styles.upgradeBadge} style={{ marginLeft: 'auto' }}>
                        <HiOutlineSparkles size={12} /> Upgrade
                    </div>
                </div>

                {!isCustomColorTab ? (
                    <div className={styles.colorGrid}>
                        {[
                            { name: "Cloud", color: "linear-gradient(135deg, #e2e8f0, #cbd5e1)" },
                            { name: "Midnight", color: "#1e293b" },
                            { name: "Volcano", color: "#7f1d1d" },
                            { name: "Amethyst", color: "#6d28d9" },
                            { name: "Cherry Blossom", color: "#fca5a5" },
                            { name: "Forest", color: "linear-gradient(135deg, #86efac, #22c55e)" },
                            { name: "Woodland", color: "#78350f" },
                            { name: "Sunset", color: "linear-gradient(135deg, #fbbf24, #f59e0b)" },
                            { name: "Twilight", color: "linear-gradient(135deg, #a5b4fc, #6366f1)" },
                            { name: "Ocean", color: "#0ea5e9" }
                        ].map((c) => (
                            <div
                                key={c.name}
                                className={`${styles.colorItem} ${c.color === themeColor ? styles.colorItemActive : ""}`}
                                onClick={() => {
                                    setBrandColor(c.color);
                                    // Also update custom colors to match preset for consistency if user switches to custom
                                    if (!c.color.includes('gradient')) {
                                        setHeaderColor1(c.color);
                                        setButtonBgColor(c.color);
                                        setIsGradientHeader(false);
                                    }
                                }}
                            >
                                <div className={styles.colorCircle} style={{ background: c.color }}></div>
                                <span className={styles.colorName}>{c.name}</span>
                            </div>
                        ))}
                    </div>
                ) : (
                    <div className={styles.customColorSection}>
                        <div className={styles.customColorGroup}>
                            <p className={styles.customColorLabel}>Chatbox header</p>
                            <label className={styles.checkboxOption}>
                                <input 
                                    type="checkbox" 
                                    checked={isGradientHeader} 
                                    onChange={(e) => setIsGradientHeader(e.target.checked)} 
                                />
                                <span>Gradient header</span>
                            </label>
                            <div className={styles.colorPickerGrid}>
                                <div className={styles.colorPickerItem}>
                                    <input type="color" value={headerColor1} onChange={(e) => setHeaderColor1(e.target.value)} />
                                    <div>
                                        <span>Gradient color 1</span>
                                        <small>{headerColor1.toUpperCase()}</small>
                                    </div>
                                </div>
                                {isGradientHeader && (
                                    <div className={styles.colorPickerItem}>
                                        <input type="color" value={headerColor2} onChange={(e) => setHeaderColor2(e.target.value)} />
                                        <div>
                                            <span>Gradient color 2</span>
                                            <small>{headerColor2.toUpperCase()}</small>
                                        </div>
                                    </div>
                                )}
                                <div className={styles.colorPickerItem}>
                                    <input type="color" value={headerTextColor} onChange={(e) => setHeaderTextColor(e.target.value)} />
                                    <div>
                                        <span>Header text color</span>
                                        <small>{headerTextColor.toUpperCase()}</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className={styles.customColorGroup}>
                            <p className={styles.customColorLabel}>Chatbox body</p>
                            <div className={styles.colorPickerItem}>
                                <input type="color" value={chatboxTextColor} onChange={(e) => setChatboxTextColor(e.target.value)} />
                                <div>
                                    <span>Text color</span>
                                    <small>{chatboxTextColor.toUpperCase()}</small>
                                </div>
                            </div>
                        </div>

                        <div className={styles.customColorGroup}>
                            <p className={styles.customColorLabel}>Chatbox button</p>
                            <div className={styles.colorPickerGrid}>
                                <div className={styles.colorPickerItem}>
                                    <input type="color" value={buttonBgColor} onChange={(e) => setButtonBgColor(e.target.value)} />
                                    <div>
                                        <span>Button background color</span>
                                        <small>{buttonBgColor.toUpperCase()}</small>
                                    </div>
                                </div>
                                <div className={styles.colorPickerItem}>
                                    <input type="color" value={buttonTextColor} onChange={(e) => setButtonTextColor(e.target.value)} />
                                    <div>
                                        <span>Button label color</span>
                                        <small>{buttonTextColor.toUpperCase()}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>

            <div className={styles.card}>
                <h2 className={styles.sectionTitle}>Chatbox button</h2>
                <div style={{ marginBottom: "20px" }}>
                    <p className={styles.subtitle} style={{ marginBottom: "12px" }}>Launcher</p>
                    <div className={styles.visualGrid}>
                        <div
                            className={`${styles.visualCard} ${launcher === "icon_only" ? styles.visualCardActive : ""}`}
                            onClick={() => setLauncher("icon_only")}
                        >
                            <div className={styles.visualGraphic}>
                                <div className={styles.iconOnly} style={{ background: themeColor }}>
                                    {buttonIcon.startsWith('data:') || buttonIcon.startsWith('http') ? (
                                        <img src={buttonIcon} alt="" style={{ width: '24px', height: '24px', borderRadius: '50%', objectFit: 'cover' }} />
                                    ) : (
                                        <IconPreview id={buttonIcon} size={20} />
                                    )}
                                </div>
                            </div>
                            <span className={styles.visualLabel}>Icon only</span>
                        </div>
                        <div
                            className={`${styles.visualCard} ${launcher === "label_only" ? styles.visualCardActive : ""}`}
                            onClick={() => setLauncher("label_only")}
                        >
                            <div className={styles.visualGraphic}>
                                <div className={styles.launcherBtn} style={{ background: themeColor }}>Chat with us</div>
                            </div>
                            <span className={styles.visualLabel}>Label only</span>
                        </div>
                        <div
                            className={`${styles.visualCard} ${launcher === "icon_label" ? styles.visualCardActive : ""}`}
                            onClick={() => setLauncher("icon_label")}
                        >
                            <div className={styles.visualGraphic}>
                                <div className={styles.launcherBtn} style={{ background: themeColor, display: 'flex', alignItems: 'center', gap: '6px' }}>
                                    {buttonIcon.startsWith('data:') || buttonIcon.startsWith('http') ? (
                                        <img src={buttonIcon} alt="" style={{ width: '20px', height: '20px', borderRadius: '50%', objectFit: 'cover' }} />
                                    ) : (
                                        <IconPreview id={buttonIcon} size={16} />
                                    )}
                                    Chat with us
                                </div>
                            </div>
                            <span className={styles.visualLabel}>Icon & label</span>
                        </div>
                    </div>
                </div>

                <div style={{ marginBottom: "24px" }}>
                    <p className={styles.subtitle} style={{ marginBottom: "12px" }}>Button icon</p>
                    <div className={styles.iconRow}>
                        {[
                            { id: 'msg1', icon: Message1 },
                            { id: 'msg2', icon: Message2 },
                            { id: 'msg3', icon: Messages3 },
                            { id: 'messenger', icon: Messenger },
                            { id: 'call', icon: Call },
                            { id: 'send', icon: Send2 },
                        ].map((item, index) => (
                            <div
                                key={item.id}
                                className={`${styles.iconSelectionCircular} ${item.id === buttonIcon ? styles.iconSelectionCircleActive : ""}`}
                                style={item.id === buttonIcon ? { background: brandColor } : {}}
                                onClick={() => setButtonIcon(item.id)}
                            >
                                <img src={item.icon} alt="" width={18} height={18} className={styles.whiteIcon} />
                            </div>
                        ))}
                        <div 
                            className={`${styles.iconSelectionUpload} ${buttonIcon.startsWith('data:') ? styles.iconSelectionCircleActive : ""}`}
                            style={buttonIcon.startsWith('data:') ? { background: brandColor, borderColor: brandColor } : {}}
                            onClick={() => document.getElementById('icon-upload')?.click()}
                        >
                            {buttonIcon.startsWith('data:') ? (
                                <img src={buttonIcon} alt="" width={18} height={18} style={{ borderRadius: '50%', objectFit: 'cover' }} />
                            ) : (
                                <FiUpload size={16} />
                            )}
                            <input 
                                type="file" 
                                id="icon-upload" 
                                style={{ display: 'none' }} 
                                accept="image/*"
                                onChange={(e) => {
                                    const file = e.target.files?.[0];
                                    if (file) {
                                        const reader = new FileReader();
                                        reader.onload = (event) => {
                                            if (event.target?.result) {
                                                setButtonIcon(event.target.result as string);
                                            }
                                        };
                                        reader.readAsDataURL(file);
                                    }
                                }}
                            />
                        </div>
                    </div>
                </div>

                <div style={{ marginBottom: "24px" }}>
                    <p className={styles.subtitle} style={{ marginBottom: "12px" }}>Button size</p>
                    <div className={styles.radioLabelRow}>
                        <label className={styles.radioOption} onClick={() => setButtonSize("Small")}>
                            <div className={`${styles.radioDot} ${buttonSize === "Small" ? styles.radioDotActive : ""}`} style={buttonSize === "Small" ? { borderColor: brandColor } : {}}>
                                {buttonSize === "Small" && <div className={styles.radioDotInner} style={{ background: brandColor }}></div>}
                            </div>
                            <input type="radio" name="size" style={{ display: 'none' }} onChange={() => { }} />
                            <span>Small</span>
                        </label>
                        <label className={styles.radioOption} onClick={() => setButtonSize("Medium")}>
                            <div className={`${styles.radioDot} ${buttonSize === "Medium" ? styles.radioDotActive : ""}`} style={buttonSize === "Medium" ? { borderColor: brandColor } : {}}>
                                {buttonSize === "Medium" && <div className={styles.radioDotInner} style={{ background: brandColor }}></div>}
                            </div>
                            <input type="radio" name="size" style={{ display: 'none' }} onChange={() => { }} />
                            <span>Medium</span>
                        </label>
                        <label className={styles.radioOption} onClick={() => setButtonSize("Large")}>
                            <div className={`${styles.radioDot} ${buttonSize === "Large" ? styles.radioDotActive : ""}`} style={buttonSize === "Large" ? { borderColor: brandColor } : {}}>
                                {buttonSize === "Large" && <div className={styles.radioDotInner} style={{ background: brandColor }}></div>}
                            </div>
                            <input type="radio" name="size" style={{ display: 'none' }} onChange={() => { }} />
                            <span>Large</span>
                        </label>
                    </div>
                </div>

                <div>
                    <p className={styles.subtitle} style={{ marginBottom: "12px" }}>Alignment</p>
                    <div className={styles.visualGrid} style={{ width: '220px' }}>
                        <div
                            className={`${styles.visualCardCompact} ${alignment === "Left" ? styles.visualCardActive : ""}`}
                            onClick={() => setAlignment("Left")}
                        >
                            <div className={styles.visualGraphicCompact}>
                                <div style={{ position: 'absolute', bottom: '12px', left: '12px', width: '24px', height: '24px', background: alignment === "Left" ? brandColor : '#e5e7eb', borderRadius: '50%' }}></div>
                            </div>
                            <span className={styles.visualLabel}>Left</span>
                        </div>
                        <div
                            className={`${styles.visualCardCompact} ${alignment === "Right" ? styles.visualCardActive : ""}`}
                            onClick={() => setAlignment("Right")}
                        >
                            <div className={styles.visualGraphicCompact}>
                                <div style={{ position: 'absolute', bottom: '12px', right: '12px', width: '24px', height: '24px', background: alignment === "Right" ? brandColor : '#e5e7eb', borderRadius: '50%' }}></div>
                            </div>
                            <span className={styles.visualLabel}>Right</span>
                        </div>
                    </div>
                </div>
            </div>

            <div className={styles.card}>
                <h2 className={styles.sectionTitle}>Chatbox style</h2>
                <div style={{ marginBottom: "20px" }}>
                    <p className={styles.subtitle} style={{ marginBottom: "12px" }}>Chatbox display style</p>
                    <div className={styles.visualGrid} style={{ width: '300px' }}>
                        <div
                            className={`${styles.visualCard} ${chatboxStyle === "No navigation" ? styles.visualCardActive : ""}`}
                            onClick={() => setChatboxStyle("No navigation")}
                        >
                            <div className={styles.visualGraphic}>
                                <div style={{ width: '70%', height: '80%', background: 'white', border: `1px solid ${chatboxStyle === "No navigation" ? '#7c3aed' : '#e5e7eb'}`, borderRadius: '4px' }}></div>
                            </div>
                            <span className={styles.visualLabel}>No navigation</span>
                        </div>
                        <div
                            className={`${styles.visualCard} ${chatboxStyle === "Show navigation" ? styles.visualCardActive : ""}`}
                            onClick={() => setChatboxStyle("Show navigation")}
                        >
                            <div className={styles.visualGraphic}>
                                <div style={{ width: '70%', height: '80%', background: 'white', border: `1px solid ${chatboxStyle === "Show navigation" ? '#7c3aed' : '#e5e7eb'}`, borderRadius: '4px', position: 'relative' }}>
                                    <div style={{ position: 'absolute', bottom: '0', width: '100%', height: '12px', background: chatboxStyle === "Show navigation" ? '#7c3aed' : '#e5e7eb' }}></div>
                                </div>
                            </div>
                            <span className={styles.visualLabel}>Show navigation</span>
                        </div>
                    </div>
                </div>

                <div>
                    <p className={styles.subtitle} style={{ marginBottom: "12px" }}>Mobile ratio</p>
                    <div className={styles.visualGrid}>
                        <div 
                            className={`${styles.visualCard} ${mobileRatio === "full-screen" ? styles.visualCardActive : ""}`}
                            onClick={() => setMobileRatio("full-screen")}
                            style={{ borderColor: mobileRatio === "full-screen" ? themeColor : undefined }}
                        >
                            <div className={styles.visualGraphic}>
                                <div style={{ width: '60%', height: '90%', background: mobileRatio === "full-screen" ? themeColor : '#d1d5db', borderRadius: '4px' }}></div>
                            </div>
                            <span className={styles.visualLabel} style={{ color: mobileRatio === "full-screen" ? themeColor : undefined }}>Full-screen</span>
                        </div>
                        <div 
                            className={`${styles.visualCard} ${mobileRatio === "90%" ? styles.visualCardActive : ""}`}
                            onClick={() => setMobileRatio("90%")}
                            style={{ borderColor: mobileRatio === "90%" ? themeColor : undefined }}
                        >
                            <div className={styles.visualGraphic}>
                                <div style={{ width: '60%', height: '80%', background: mobileRatio === "90%" ? themeColor : '#d1d5db', borderRadius: '4px 4px 0 0' }}></div>
                            </div>
                            <span className={styles.visualLabel} style={{ color: mobileRatio === "90%" ? themeColor : undefined }}>90%</span>
                        </div>
                        <div 
                            className={`${styles.visualCard} ${mobileRatio === "80%" ? styles.visualCardActive : ""}`}
                            onClick={() => setMobileRatio("80%")}
                            style={{ borderColor: mobileRatio === "80%" ? themeColor : undefined }}
                        >
                            <div className={styles.visualGraphic}>
                                <div style={{ width: '60%', height: '70%', background: mobileRatio === "80%" ? themeColor : '#d1d5db', borderRadius: '4px 4px 0 0' }}></div>
                            </div>
                            <span className={styles.visualLabel} style={{ color: mobileRatio === "80%" ? themeColor : undefined }}>80%</span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}