import styles from "../../ChatbotSettings.module.css";
import { useGetAssistant, useUpdateShoppingSkills, useUpdateCustomerSupportSkills } from "app/utils/api";
import { useToast } from "app/components/providers/use-toast";

interface AssistantSkillsTabProps {
    onManage: (skill: string) => void;
}

export default function AssistantSkillsTab({ onManage }: AssistantSkillsTabProps) {
    const { data: assistantData, isLoading } = useGetAssistant();
    const updateShoppingSkills = useUpdateShoppingSkills();
    const updateSupportSkills = useUpdateCustomerSupportSkills();
    const { showSuccess, showError } = useToast();

    const assistant = assistantData?.data || {};
    const shopping = assistant.assistant_skills?.shopping_skills || assistant.shopping_skills || {
        product_recommendations: { enabled: false, system_recommendations: [], custom_recommendations: [] },
        inventory_status: { enabled: false, instructions: { in_stock: "", sold_out: "", backorder: "" } },
        product_question_suggestions: true
    };
    const support = assistant.assistant_skills?.customer_support_skills || assistant.customer_support_skills || {
        human_handover: { enabled: false },
        after_sales_support: false,
        order_tracking: true
    };

    const handleShoppingToggle = async (payload: any) => {
        try {
            await updateShoppingSkills.mutateAsync(payload);
            showSuccess("Shopping skill updated!");
        } catch (error) {
            showError("Failed to update shopping skill.");
        }
    };

    const handleSupportToggle = async (payload: any) => {
        try {
            await updateSupportSkills.mutateAsync(payload);
            showSuccess("Support skill updated!");
        } catch (error) {
            showError("Failed to update support skill.");
        }
    };

    if (isLoading) return <div style={{ padding: '20px', textAlign: 'center' }}>Loading skills...</div>;

    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
            {/* Shopping Skills Card */}
            <div className={styles.instructionCard}>
                <h3 className={styles.skillSectionTitle}>Shopping skills</h3>
                <p className={styles.instructionDesc} style={{ marginBottom: '0' }}>AI agent uses these skills to recommend and describe products.</p>

                <div className={styles.skillItem}>
                    <div className={styles.skillInfo}>
                        <span className={styles.skillTitle}>Product recommendations</span>
                        <span className={styles.skillDesc}>Suggest the right products for each customer</span>
                    </div>
                    <div className={styles.skillActions}>
                        <button
                            className={styles.syncBtn}
                            style={{ background: '#7c3aed' }}
                            onClick={() => onManage("recommendations")}
                        >
                            Manage
                        </button>
                        <label className={styles.switch}>
                            <input 
                                type="checkbox" 
                                checked={shopping.product_recommendations?.enabled || false}
                                onChange={(e) => handleShoppingToggle({
                                    ...shopping,
                                    product_recommendations: {
                                        ...(shopping.product_recommendations || {}),
                                        enabled: e.target.checked
                                    }
                                })}
                            />
                            <span className={styles.slider}></span>
                        </label>
                    </div>
                </div>

                <div className={styles.skillItem}>
                    <div className={styles.skillInfo}>
                        <span className={styles.skillTitle}>Inventory status</span>
                        <span className={styles.skillDesc}>Customize AI responses for in-stock, sold out, and backorder products</span>
                    </div>
                    <div className={styles.skillActions}>
                        <button
                            className={styles.syncBtn}
                            style={{ background: '#7c3aed' }}
                            onClick={() => onManage("inventory")}
                        >
                            Manage
                        </button>
                        <label className={styles.switch}>
                            <input 
                                type="checkbox" 
                                checked={shopping.inventory_status?.enabled || false}
                                onChange={(e) => handleShoppingToggle({
                                    ...shopping,
                                    inventory_status: {
                                        ...(shopping.inventory_status || {}),
                                        enabled: e.target.checked
                                    }
                                })}
                            />
                            <span className={styles.slider}></span>
                        </label>
                    </div>
                </div>

                <div className={styles.skillItem}>
                    <div className={styles.skillInfo}>
                        <span className={styles.skillTitle}>Product question suggestions</span>
                        <span className={styles.skillDesc}>Suggest next questions to help customers find what they need</span>
                    </div>
                    <div className={styles.skillActions}>
                        <label className={styles.switch}>
                            <input 
                                type="checkbox" 
                                checked={shopping.product_question_suggestions !== false}
                                onChange={(e) => handleShoppingToggle({
                                    ...shopping,
                                    product_question_suggestions: e.target.checked
                                })}
                            />
                            <span className={styles.slider}></span>
                        </label>
                    </div>
                </div>
            </div>

            {/* Customer Support Skills Card */}
            <div className={styles.instructionCard}>
                <h3 className={styles.skillSectionTitle}>Customer support skills</h3>
                <p className={styles.instructionDesc} style={{ marginBottom: '0' }}>AI agent uses these skills to handle specific customer scenarios</p>

                <div className={styles.skillItem}>
                    <div className={styles.skillInfo}>
                        <span className={styles.skillTitle}>Human handover</span>
                        <span className={styles.skillDesc}>Connect customers to your team when needed</span>
                    </div>
                    <div className={styles.skillActions}>
                        <button
                            className={styles.settingsBtn}
                            style={{ background: 'white', border: '1px solid #7c3aed', color: '#7c3aed' }}
                            onClick={() => onManage("handover")}
                        >
                            Manage
                        </button>
                        <label className={styles.switch}>
                            <input 
                                type="checkbox" 
                                checked={support?.human_handover?.enabled || false} 
                                onChange={(e) => handleSupportToggle({
                                    ...support,
                                    human_handover: {
                                        ...(support.human_handover || {}),
                                        enabled: e.target.checked
                                    }
                                })}
                            />
                            <span className={styles.slider}></span>
                        </label>
                    </div>
                </div>

                <div className={styles.skillItem}>
                    <div className={styles.skillInfo}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span className={styles.skillTitle}>After-sales support</span>
                            <span className={styles.comingSoon}>Coming soon</span>
                        </div>
                        <span className={styles.skillDesc}>Handle refunds, returns, and order changes</span>
                    </div>
                </div>

                <div className={styles.skillItem}>
                    <div className={styles.skillInfo}>
                        <span className={styles.skillTitle}>Order tracking</span>
                        <span className={styles.skillDesc}>
                            Customers must provide order details to track their orders. Set required fields in <span className={styles.purpleLink}>Order Tracking Settings</span>.
                        </span>
                    </div>
                    <div className={styles.skillActions}>
                        <label className={styles.switch}>
                            <input 
                                type="checkbox" 
                                checked={support.order_tracking !== false}
                                onChange={(e) => handleSupportToggle({
                                    ...support,
                                    order_tracking: e.target.checked
                                })}
                            />
                            <span className={styles.slider}></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    );
}