'use client';

import React, { useState } from 'react';

const DOMAINS = ['Law & Policy (42)', 'Cognitive Science (28)', 'Environmental Studies (35)', 'History & Humanities (50)', 'Economics (19)'];
const STATUSES = ['Active', 'Data Collection', 'Review', 'Completed'];
const TYPES = ['Researchers', 'Labs', 'Projects', 'Institutes'];

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 ResearchSearchSidebar = () => {
    const [isDomainOpen, setIsDomainOpen] = useState(true);
    const [isStatusOpen, setIsStatusOpen] = useState(true);
    const [isTypeOpen, setIsTypeOpen] = useState(true);

    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">Clear All</button>
                </div>

                <div className="pub-accordion">

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

                    {/* Project Status */}
                    <AccordionSection title="Project Status" open={isStatusOpen} onToggle={() => setIsStatusOpen(!isStatusOpen)}>
                        <div className="pub-filter-list">
                            {STATUSES.map((s) => (
                                <label key={s} className="pub-filter-label">
                                    <input type="checkbox" className="pub-checkbox" />
                                    <span>{s}</span>
                                </label>
                            ))}
                        </div>
                    </AccordionSection>

                    {/* Type */}
                    <AccordionSection title="Type" open={isTypeOpen} onToggle={() => setIsTypeOpen(!isTypeOpen)}>
                        <div className="pub-filter-list">
                            {TYPES.map((t) => (
                                <label key={t} className="pub-filter-label">
                                    <input type="checkbox" className="pub-checkbox" />
                                    <span>{t}</span>
                                </label>
                            ))}
                        </div>
                    </AccordionSection>

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

export default ResearchSearchSidebar;