import { useState } from "react";
import styles from "../../ChatbotSettings.module.css";
import { FiSearch, FiFilter, FiMoreVertical } from "react-icons/fi";
import EmptyBox from "../../../../../assets/images/empty_box.png";
import { useGetDiscounts, useSyncDiscounts } from "app/utils/api";

export default function DiscountsTab() {
    const [activeSubTab, setActiveSubTab] = useState("All");
    const [page, setPage] = useState(1);
    const [limit, setLimit] = useState(10);

    const { data: axiosRes, isLoading } = useGetDiscounts({ page, limit });
    const syncDiscountsMutation = useSyncDiscounts();
    
    const discounts = axiosRes?.data?.data || [];
    const totalPages = axiosRes?.data?.totalPages || 1;

    return (
        <div className={styles.trainingDataContainer}>
            <div className={styles.toggleCard}>
                <div className={styles.toggleInfo}>
                    <h3 className={styles.toggleTitle}>Discounts</h3>
                    <p className={styles.toggleDesc}>Enable your AI assistant to answer customer questions about discounts.</p>
                </div>
                <label className={styles.switch}>
                    <input type="checkbox" defaultChecked />
                    <span className={styles.slider}></span>
                </label>
            </div>

            <div className={styles.manageDataCard}>
                <div className={styles.manageHeader}>
                    <div className={styles.manageTitleGroup}>
                        <h3 className={styles.toggleTitle}>Sync data from Shopify</h3>
                        <p className={styles.toggleDesc}>Pull the latest discount data from your Shopify store including discount codes and automatic discounts</p>
                    </div>
                    <div style={{ display: 'flex', gap: '12px' }}>
                        <button className={styles.settingsBtn} style={{ background: 'white', border: '1px solid #7c3aed', color: '#7c3aed' }}>Manage</button>
                        <button 
                            className={styles.syncBtn} 
                            onClick={() => syncDiscountsMutation.mutate()} 
                            disabled={syncDiscountsMutation.isPending}
                        >
                            {syncDiscountsMutation.isPending ? "Syncing..." : "Sync now"}
                        </button>
                    </div>
                </div>

                <div className={styles.manageSubTabs}>
                    <div style={{ display: 'flex', gap: '24px' }}>
                        {["All", "Active", "Inactive"].map(tab => (
                            <div
                                key={tab}
                                className={`${styles.manageSubTab} ${activeSubTab === tab ? styles.manageSubTabActive : ""}`}
                                onClick={() => setActiveSubTab(tab)}
                            >
                                {tab}
                            </div>
                        ))}
                    </div>
                    <div className={styles.manageActions} style={{ marginLeft: 'auto' }}>
                        <div className={styles.actionIconBtn}>
                            <FiSearch size={18} />
                        </div>
                        <div className={styles.actionIconBtn}>
                            <FiFilter size={18} />
                        </div>
                    </div>
                </div>

                {isLoading ? (
                    <div style={{ padding: '40px', textAlign: 'center', color: '#6b7280' }}>Loading discounts...</div>
                ) : discounts.length === 0 ? (
                    <div className={styles.emptyStateBox}>
                        <img src={EmptyBox} alt="No items" className={styles.emptyStateImg} />
                        <p className={styles.emptyStateText}>No items found</p>
                    </div>
                ) : (
                    <>
                        <div className={styles.tableWrapper}>
                            <table className={styles.tableContainer}>
                                <thead>
                                    <tr>
                                        <th style={{ width: '40px' }}><input type="checkbox" /></th>
                                        <th>Title</th>
                                        <th>Method</th>
                                        <th>Type</th>
                                        <th>Start date</th>
                                        <th>End date</th>
                                        <th>Used</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {discounts.map((discount: any, i: number) => (
                                        <tr key={i}>
                                            <td><input type="checkbox" /></td>
                                            <td>
                                                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                                                    <span style={{ fontWeight: 700 }}>{discount.title}</span>
                                                    <span style={{ fontSize: '11px', color: '#6b7280' }}>
                                                        {discount.description || "No description provided"}
                                                    </span>
                                                </div>
                                            </td>
                                            <td>{discount.method || "Code"}</td>
                                            <td>{discount.type || "Discount"}</td>
                                            <td>{discount.starts_at ? new Date(discount.starts_at).toLocaleDateString() : "—"}</td>
                                            <td>{discount.ends_at ? new Date(discount.ends_at).toLocaleDateString() : "—"}</td>
                                            <td>{discount.usage_count || 0}</td>
                                            <td>
                                                <span className={`${styles.statusBadge} ${discount.status === 'active' ? styles.statusActive : styles.statusDisabled}`}>
                                                    {discount.status?.charAt(0).toUpperCase() + discount.status?.slice(1) || 'Active'}
                                                </span>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>

                        <div className={styles.paginationRow}>
                            <div className={styles.itemsPerPage}>
                                Items per page
                                <select 
                                    className={styles.selectSm}
                                    value={limit}
                                    onChange={(e) => setLimit(parseInt(e.target.value))}
                                >
                                    <option value={10}>10</option>
                                    <option value={20}>20</option>
                                    <option value={50}>50</option>
                                </select>
                            </div>
                            <div className={styles.toggleDesc}>
                                Page {page}/{totalPages}
                                <div style={{ display: 'inline-flex', gap: '8px', marginLeft: '12px' }}>
                                    <button 
                                        disabled={page === 1}
                                        onClick={() => setPage(prev => Math.max(1, prev - 1))}
                                        style={{ background: 'none', border: 'none', cursor: page === 1 ? 'not-allowed' : 'pointer', color: page === 1 ? '#cbd5e1' : '#7c3aed' }}
                                    >
                                        Prev
                                    </button>
                                    <button 
                                        disabled={page === totalPages}
                                        onClick={() => setPage(prev => Math.min(totalPages, prev + 1))}
                                        style={{ background: 'none', border: 'none', cursor: page === totalPages ? 'not-allowed' : 'pointer', color: page === totalPages ? '#cbd5e1' : '#7c3aed' }}
                                    >
                                        Next
                                    </button>
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </div>
        </div>
    );
}