'use client';

import React, { useState } from 'react';

const YEARS = ['2024 (1,245)', '2023 (3,412)', '2022 (2,890)'];
const DOMAINS = ['Liberal Arts (4,521)', 'Social Sciences (3,210)', 'Humanities (2,980)', 'Political Science (1,840)'];
const ACCESS_TYPES = ['Open Access', 'Institutional Login', 'Request Access'];

const AccordionSection = ({
    title,
    open,
    onToggle,
    children,
}: {
    title: string;
    open: boolean;
    onToggle: () => void;
    children: React.ReactNode;
}) => (
    <div className="pub-accordion-item">
        <button
            className={`pub-accordion-trigger ${open ? 'open' : ''}`}
            onClick={onToggle}
        >
            {title}
            <i className="fa-solid fa-chevron-down"></i>
        </button>
        <div className={`pub-accordion-body ${open ? 'open' : ''}`}>
            {children}
        </div>
    </div>
);

const PublicationSidebar = () => {
    const [isYearOpen, setIsYearOpen] = useState(true);
    const [isDomainOpen, setIsDomainOpen] = useState(true);
    const [isAccessOpen, setIsAccessOpen] = useState(true);
    const [minYear, setMinYear] = useState('');
    const [maxYear, setMaxYear] = useState('');

    return (
        <aside className="pub-sidebar">
            <div className="pub-sidebar-inner">

                <div className="pub-sidebar-header">
                    <h2>
                        <i className="fa-solid fa-filter"></i> Filters
                    </h2>
                    <button
                        className="pub-clear-btn"
                        onClick={() => { setMinYear(''); setMaxYear(''); }}
                    >
                        Clear All
                    </button>
                </div>

                <div className="pub-accordion">

                    {/* Publication Year */}
                    <AccordionSection title="Publication Year" open={isYearOpen} onToggle={() => setIsYearOpen(!isYearOpen)}>
                        <div className="pub-filter-list">
                            {YEARS.map((year, idx) => (
                                <label key={year} className="pub-filter-label">
                                    <input
                                        type="checkbox"
                                        className="pub-checkbox"
                                        defaultChecked={idx === 0}
                                    />
                                    <span>{year}</span>
                                </label>
                            ))}
                            <div className="pub-year-range">
                                <input
                                    type="number"
                                    placeholder="Min"
                                    value={minYear}
                                    onChange={(e) => setMinYear(e.target.value)}
                                />
                                <input
                                    type="number"
                                    placeholder="Max"
                                    value={maxYear}
                                    onChange={(e) => setMaxYear(e.target.value)}
                                />
                            </div>
                        </div>
                    </AccordionSection>

                    {/* Research Domain */}
                    <AccordionSection title="Research Domain" open={isDomainOpen} onToggle={() => setIsDomainOpen(!isDomainOpen)}>
                        <div className="pub-filter-list">
                            {DOMAINS.map((domain, idx) => (
                                <label key={domain} className="pub-filter-label">
                                    <input
                                        type="checkbox"
                                        className="pub-checkbox"
                                        defaultChecked={idx === 0}
                                    />
                                    <span>{domain}</span>
                                </label>
                            ))}
                        </div>
                    </AccordionSection>

                    {/* Access Type */}
                    <AccordionSection title="Access Type" open={isAccessOpen} onToggle={() => setIsAccessOpen(!isAccessOpen)}>
                        <div className="pub-filter-list">
                            {ACCESS_TYPES.map((type) => (
                                <label key={type} className="pub-filter-label">
                                    <input type="checkbox" className="pub-checkbox" />
                                    <span>{type}</span>
                                </label>
                            ))}
                        </div>
                    </AccordionSection>

                </div>
            </div>
        </aside>
    );
};

export default PublicationSidebar;