import { useState } from "react";
import styles from "../../ChatbotSettings.module.css";
import { FiUpload } from "react-icons/fi";
import { HiOutlineSparkles } from "react-icons/hi";

interface GeneralTabProps {
    displayChatbox: boolean;
    setDisplayChatbox: (val: boolean) => void;
    focusMode: boolean;
    setFocusMode: (val: boolean) => void;
    setShowContactModal: (val: boolean) => void;
    logoUrl: string | null;
    setLogoUrl: (val: string | null) => void;
    language: string;
    setLanguage: (val: string) => void;
    heading: string;
    setHeading: (val: string) => void;
    description: string;
    setDescription: (val: string) => void;
    showLiveChat: boolean;
    setShowLiveChat: (val: boolean) => void;
    showContact: boolean;
    setShowContact: (val: boolean) => void;
    showOrderTracking: boolean;
    setShowOrderTracking: (val: boolean) => void;
    showFaqs: boolean;
    setShowFaqs: (val: boolean) => void;
    showCategories: boolean;
    setShowCategories: (val: boolean) => void;
    chatStatus: boolean;
    setChatStatus: (val: boolean) => void;
    onlineStatus: string;
    setOnlineStatus: (val: string) => void;
    offlineStatus: string;
    setOfflineStatus: (val: string) => void;
    showOnlineOutside: boolean;
    setShowOnlineOutside: (val: boolean) => void;
    showContactMethods: boolean;
    setShowContactMethods: (val: boolean) => void;
    contactMethods: any[];
    setContactMethods: (val: any[]) => void;
}

export default function GeneralTab({
    displayChatbox,
    setDisplayChatbox,
    focusMode,
    setFocusMode,
    setShowContactModal,
    logoUrl,
    setLogoUrl,
    language,
    setLanguage,
    heading,
    setHeading,
    description,
    setDescription,
    showLiveChat,
    setShowLiveChat,
    showContact,
    setShowContact,
    showOrderTracking,
    setShowOrderTracking,
    showFaqs,
    setShowFaqs,
    showCategories,
    setShowCategories,
    chatStatus,
    setChatStatus,
    onlineStatus,
    setOnlineStatus,
    offlineStatus,
    setOfflineStatus,
    showOnlineOutside,
    setShowOnlineOutside,
    showContactMethods,
    setShowContactMethods,
    contactMethods,
    setContactMethods
}: GeneralTabProps) {
    return (
        <>
            <div className={styles.card}>
                <div className={styles.toggleRow}>
                    <span className={styles.toggleLabel}>Display chatbox on your store</span>
                    <label className={styles.switch}>
                        <input
                            type="checkbox"
                            checked={displayChatbox}
                            onChange={(e) => setDisplayChatbox(e.target.checked)}
                        />
                        <span className={styles.slider}></span>
                    </label>
                </div>
            </div>

            <div className={styles.card}>
                <div className={styles.toggleRow}>
                    <div className={styles.chatFocusMode}>
                        <span className={styles.chatFocusTitle}>Chat focus mode</span>
                        <p className={styles.chatFocusDesc}>
                            Automatically open the chat page when the chatbot starts.
                            Works only when Live Chat is enabled.
                        </p>
                    </div>
                    <label className={styles.switch}>
                        <input
                            type="checkbox"
                            checked={focusMode}
                            onChange={(e) => setFocusMode(e.target.checked)}
                        />
                        <span className={styles.slider}></span>
                    </label>
                </div>
            </div>

            <div className={styles.card}>
                <h2 className={styles.sectionTitle}>Header</h2>

                <div>
                    <div className={styles.labelRow}>
                        <span className={styles.labelText}>Logo</span>
                        <span className={styles.upgradeBadge}>
                            <HiOutlineSparkles size={12} />
                            Upgrade
                        </span>
                    </div>
                    <label className={styles.uploadArea}>
                        <input
                            type="file"
                            accept="image/png, image/jpeg, image/gif, image/svg+xml, image/webp"
                            style={{ display: 'none' }}
                            onChange={(e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                    setLogoUrl(URL.createObjectURL(file));
                                }
                            }}
                        />
                        {logoUrl ? (
                            <img src={logoUrl} alt="Logo" style={{ maxHeight: '60px', borderRadius: '8px' }} />
                        ) : (
                            <>
                                <FiUpload className={styles.uploadIcon} />
                                <p className={styles.uploadText}>
                                    PNG, JPG, JPEG, GIF, SVG, Or WEBP<br />
                                    And Less Than 1MB.
                                </p>
                            </>
                        )}
                    </label>
                </div>

                <div className={styles.inputGroup}>
                    <label className={styles.inputLabel}>Heading</label>
                    <input
                        type="text"
                        className={styles.inputField}
                        value={heading}
                        onChange={(e) => setHeading(e.target.value)}
                    />
                </div>

                <div className={styles.inputGroup}>
                    <label className={styles.inputLabel}>Description</label>
                    <input
                        type="text"
                        className={styles.inputField}
                        value={description}
                        onChange={(e) => setDescription(e.target.value)}
                    />
                </div>
            </div>

            <div className={styles.card}>
                <h2 className={styles.sectionTitle}>Language</h2>
                <div className={styles.inputGroupConfiguration}>
                    <label className={styles.inputLabel}>What language do your customers mainly speak?</label>
                    <select className={styles.selectField} value={language} onChange={(e) => setLanguage(e.target.value)}>
                        <option>English</option>
                        <option>Spanish</option>
                        <option>French</option>
                    </select>
                </div>
            </div>

            <div className={styles.card}>
                <h2 className={styles.sectionTitle}>Blocks</h2>

                <div className={styles.blockRow}>
                    <div className={styles.blockInfo}>
                        <span className={styles.blockTitle}>Live chat</span>
                        <span className={styles.blockDesc}>Chat with customers in real time.</span>
                    </div>
                    <label className={styles.switch}>
                        <input type="checkbox" checked={showLiveChat} onChange={(e) => setShowLiveChat(e.target.checked)} />
                        <span className={styles.slider}></span>
                    </label>
                </div>

                <div className={styles.blockRow}>
                    <div className={styles.blockInfo}>
                        <span className={styles.blockTitle}>Contact</span>
                        <span className={styles.blockDesc}>Let customers send you a message when you're offline.</span>
                    </div>
                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                        <button
                            className={styles.editButton}
                            onClick={() => setShowContactModal(true)}
                        >
                            Edit
                        </button>
                        <label className={styles.switch}>
                            <input type="checkbox" checked={showContact} onChange={(e) => setShowContact(e.target.checked)} />
                            <span className={styles.slider}></span>
                        </label>
                    </div>
                </div>

                <div className={styles.blockRow}>
                    <div className={styles.blockInfo}>
                        <span className={styles.blockTitle}>Order tracking</span>
                        <span className={styles.blockDesc}>Show the Order Tracking block to let customers track their orders.</span>
                    </div>
                    <label className={styles.switch}>
                        <input type="checkbox" checked={showOrderTracking} onChange={(e) => setShowOrderTracking(e.target.checked)} />
                        <span className={styles.slider}></span>
                    </label>
                </div>

                <div className={styles.blockRow}>
                    <div className={styles.blockInfo}>
                        <span className={styles.blockTitle}>FAQs</span>
                        <span className={styles.blockDesc}>Show featured questions set up in FAQs settings.</span>
                    </div>
                    <label className={styles.switch}>
                        <input type="checkbox" checked={showFaqs} onChange={(e) => setShowFaqs(e.target.checked)} />
                        <span className={styles.slider}></span>
                    </label>
                </div>

                <div className={styles.blockRow}>
                    <div className={styles.blockInfo}>
                        <span className={styles.blockTitle}>Categories</span>
                        <span className={styles.blockDesc}>Show featured categories set up in Categories settings.</span>
                    </div>
                    <label className={styles.switch}>
                        <input type="checkbox" checked={showCategories} onChange={(e) => setShowCategories(e.target.checked)} />
                        <span className={styles.slider}></span>
                    </label>
                </div>
            </div>
        </>
    );
}