import styles from "../../ChatbotSettings.module.css";
import { FiX, FiLink, FiUsers, FiMonitor, FiCopy, FiInfo, FiCheck } from "react-icons/fi";
import { useState } from "react";

interface AdvancedTabProps {
    displayDevices: string;
    setDisplayDevices: (v: string) => void;
    displayPages: string;
    setDisplayPages: (v: string) => void;
    includedPages: string[];
    setIncludedPages: (v: string[]) => void;
    excludedPages: string[];
    setExcludedPages: (v: string[]) => void;
    customUrlPattern: string;
    setCustomUrlPattern: (v: string) => void;
    continueAsEmail: boolean;
    setContinueAsEmail: (v: boolean) => void;
    customCss: string;
    setCustomCss: (v: string) => void;
}

export default function AdvancedTab({
    displayDevices, setDisplayDevices,
    displayPages, setDisplayPages,
    includedPages, setIncludedPages,
    excludedPages, setExcludedPages,
    customUrlPattern, setCustomUrlPattern,
    continueAsEmail, setContinueAsEmail,
    customCss, setCustomCss
}: AdvancedTabProps) {

    const [copiedId, setCopiedId] = useState<string | null>(null);

    const handleCopy = (text: string, id: string) => {
        navigator.clipboard.writeText(text);
        setCopiedId(id);
        setTimeout(() => setCopiedId(null), 2000);
    };

    const togglePage = (page: string, list: string[], setList: (v: string[]) => void) => {
        if (list.includes(page)) {
            setList(list.filter(p => p !== page));
        } else {
            setList([...list, page]);
        }
    };

    const pages = [
        { id: "homepage", label: "Homepage" },
        { id: "product", label: "Product pages" },
        { id: "collection", label: "Collection pages" },
        { id: "cart", label: "Cart pages" },
        { id: "blog", label: "Blog pages" }
    ];

    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
            {/* Deep links section */}
            <div className={styles.card}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                    <h2 className={styles.sectionTitle} style={{ margin: 0 }}>Deep links</h2>
                    <FiX color="#6b7280" style={{ cursor: 'pointer' }} />
                </div>
                <p className={styles.subtitle} style={{ marginBottom: '16px' }}>
                    Add these special links to your website to open specific chatbox sections. <span className={styles.blueLink}>Learn more.</span>
                </p>
                
                <div style={{ background: '#f0f9ff', padding: '12px 16px', borderRadius: '12px', display: 'flex', gap: '12px', alignItems: 'center', marginBottom: '16px', border: '1px solid #e0f2fe' }}>
                    <FiInfo color="#0ea5e9" size={20} />
                    <p style={{ color: '#0369a1', fontSize: '13px', margin: 0 }}>
                        Copy a link → Add it to a button or URL → Customers open that chat section instantly.
                    </p>
                    <FiX color="#0ea5e9" style={{ marginLeft: 'auto', cursor: 'pointer' }} size={14} />
                </div>

                <div className={styles.advancedTableWrapper}>
                    <table className={styles.advancedTable}>
                        <thead>
                            <tr>
                                <th>Chatbot section</th>
                                <th>Deeplink</th>
                                <th style={{ textAlign: 'right' }}>Copy</th>
                            </tr>
                        </thead>
                        <tbody>
                            {[
                                { name: "Home", link: "#qixs-home" },
                                { name: "Message", link: "#qixs-chat" },
                                { name: "Order tracking", link: "#qixs-tracking" },
                                { name: "Help", link: "#qixs-help" }
                            ].map((row) => (
                                <tr key={row.name}>
                                    <td>{row.name}</td>
                                    <td style={{ color: '#6b7280' }}>{row.link}</td>
                                    <td style={{ textAlign: 'right' }}>
                                        <div 
                                            className={styles.copyBtn} 
                                            onClick={() => handleCopy(row.link, row.name)}
                                            style={{ color: copiedId === row.name ? '#10b981' : undefined }}
                                        >
                                            {copiedId === row.name ? (
                                                <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                                                    <span style={{ fontSize: '11px' }}>Copied!</span>
                                                    <FiCheck size={16} />
                                                </div>
                                            ) : (
                                                <FiCopy size={16} />
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            {/* Display settings section */}
            <div className={styles.card}>
                <h2 className={styles.sectionTitle} style={{ marginBottom: '20px' }}>Display settings</h2>
                
                <div style={{ marginBottom: "24px" }}>
                    <p className={styles.subtitle} style={{ marginBottom: "12px", color: '#111827', fontWeight: 600 }}>Display devices</p>
                    <div className={styles.visualRadioGrid}>
                        {[
                            { id: "all", label: "All devices", icon: <FiUsers /> },
                            { id: "desktop", label: "Desktop only", icon: <FiMonitor /> },
                            { id: "mobile", label: "Mobile only", icon: <FiUsers /> }
                        ].map(device => (
                            <div 
                                key={device.id}
                                className={`${styles.visualCard} ${displayDevices === device.id ? styles.visualCardActive : ""}`}
                                onClick={() => setDisplayDevices(device.id)}
                                style={{ flex: 1, padding: '16px' }}
                            >
                                <div style={{ fontSize: '24px', color: displayDevices === device.id ? '#7c3aed' : '#6b7280' }}>
                                    {device.icon}
                                </div>
                                <span className={styles.visualLabel}>{device.label}</span>
                            </div>
                        ))}
                    </div>
                </div>

                <div>
                    <p className={styles.subtitle} style={{ marginBottom: "12px", color: '#111827', fontWeight: 600 }}>Display pages</p>
                    <div className={styles.radioGrid}>
                        <div 
                            className={`${styles.radioCard} ${displayPages === "all_pages" ? styles.radioCardActive : ""}`}
                            onClick={() => setDisplayPages("all_pages")}
                        >
                            <div className={`${styles.radioDot} ${displayPages === "all_pages" ? styles.radioDotActive : ""}`}>
                                {displayPages === "all_pages" && <div className={styles.radioDotInner}></div>}
                            </div>
                            <span className={styles.choiceTitle}>Show on all pages</span>
                        </div>

                        <div 
                            className={`${styles.radioCard} ${displayPages === "show_specific" ? styles.radioCardActive : ""}`}
                            onClick={() => setDisplayPages("show_specific")}
                            style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '16px' }}
                        >
                            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                <div className={`${styles.radioDot} ${displayPages === "show_specific" ? styles.radioDotActive : ""}`}>
                                    {displayPages === "show_specific" && <div className={styles.radioDotInner}></div>}
                                </div>
                                <span className={styles.choiceTitle}>Show on specific pages</span>
                            </div>
                            {displayPages === "show_specific" && (
                                <div className={styles.checkboxGrid} onClick={e => e.stopPropagation()}>
                                    {pages.map(p => (
                                        <label key={p.id} className={styles.checkItem}>
                                            <input 
                                                type="checkbox" 
                                                checked={includedPages.includes(p.id)}
                                                onChange={() => togglePage(p.id, includedPages, setIncludedPages)}
                                            /> 
                                            {p.label}
                                        </label>
                                    ))}
                                    <label className={styles.checkItem}>
                                        <input 
                                            type="checkbox" 
                                            checked={!!customUrlPattern && displayPages === "show_specific"}
                                            readOnly
                                        /> 
                                        Custom URL page
                                    </label>
                                    <input 
                                        type="text" 
                                        className={styles.advancedInput} 
                                        placeholder="E.g. /abc/def/page-faqs"
                                        value={customUrlPattern}
                                        onChange={(e) => setCustomUrlPattern(e.target.value)}
                                        onClick={e => e.stopPropagation()}
                                    />
                                </div>
                            )}
                        </div>

                        <div 
                            className={`${styles.radioCard} ${displayPages === "hide_specific" ? styles.radioCardActive : ""}`}
                            onClick={() => setDisplayPages("hide_specific")}
                            style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '16px' }}
                        >
                            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                <div className={`${styles.radioDot} ${displayPages === "hide_specific" ? styles.radioDotActive : ""}`}>
                                    {displayPages === "hide_specific" && <div className={styles.radioDotInner}></div>}
                                </div>
                                <span className={styles.choiceTitle}>Hide on specific pages</span>
                            </div>
                            {displayPages === "hide_specific" && (
                                <div className={styles.checkboxGrid} onClick={e => e.stopPropagation()}>
                                    {pages.map(p => (
                                        <label key={p.id} className={styles.checkItem}>
                                            <input 
                                                type="checkbox" 
                                                checked={excludedPages.includes(p.id)}
                                                onChange={() => togglePage(p.id, excludedPages, setExcludedPages)}
                                            /> 
                                            {p.label}
                                        </label>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            {/* Continue as email section */}
            <div className={styles.card}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                        <h2 className={styles.sectionTitle} style={{ margin: 0, marginBottom: '4px' }}>Continue as email</h2>
                        <p className={styles.subtitle} style={{ margin: 0 }}>Allow customers keep conversations going by email. <span className={styles.blueLink}>Learn more</span></p>
                    </div>
                    <label className={styles.switch}>
                        <input 
                            type="checkbox" 
                            checked={continueAsEmail}
                            onChange={(e) => setContinueAsEmail(e.target.checked)}
                        />
                        <span className={styles.slider}></span>
                    </label>
                </div>
            </div>

            {/* Custom CSS section */}
            <div className={styles.card}>
                <h2 className={styles.sectionTitle} style={{ marginBottom: '12px' }}>Custom CSS</h2>
                <textarea 
                    className={styles.cssArea} 
                    placeholder="Add custom CSS to style your chatbot"
                    value={customCss}
                    onChange={(e) => setCustomCss(e.target.value)}
                    style={{ minHeight: '120px' }}
                ></textarea>
                <p className={styles.subtitle} style={{ marginTop: '12px' }}>
                    <span className={styles.blueLink}>Chat with us</span> for custom options to your chatbot.
                </p>
            </div>

            <div style={{ textAlign: 'center', marginTop: '32px' }}>
                <div className={styles.createdBadge}>
                    <FiInfo size={14} /> Created by <span style={{ fontWeight: 700, color: '#4c1d95' }}>Chatty</span> with love
                </div>
            </div>
        </div>
    );
}