'use client';
import React, { useState } from 'react';
import Link from 'next/link';

const SORT_OPTIONS = ['Relevance', 'Newest First', 'Oldest First', 'Most Cited'];

const PublicationResults = () => {
    const [isSortOpen, setIsSortOpen] = useState(false);
    const [selectedSort, setSelectedSort] = useState('Relevance');

    return (
        <div className="pub-results">

            {/* Toolbar */}
            <div className="pub-results-toolbar">
                <p className="pub-results-count">
                    Showing <strong>1-10</strong> of <strong>12,450</strong> results
                </p>

                <div className="pub-sort-wrap">
                    <label>Sort by:</label>
                    <div className="pub-sort-dropdown">
                        <button
                            className={`pub-sort-dropdown-btn ${isSortOpen ? 'open' : ''}`}
                            onClick={() => setIsSortOpen(!isSortOpen)}
                        >
                            <span>{selectedSort}</span>
                            <i className="fa-solid fa-chevron-down"></i>
                        </button>
                        {isSortOpen && (
                            <div className="pub-sort-dropdown-menu">
                                {SORT_OPTIONS.map((opt) => (
                                    <div
                                        key={opt}
                                        className={`pub-sort-dropdown-option ${selectedSort === opt ? 'selected' : ''}`}
                                        onClick={() => { setSelectedSort(opt); setIsSortOpen(false); }}
                                    >
                                        {opt}
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {/* Cards */}
            <div className="pub-card-list">

                {/* Card 1 */}
                <div className="pub-card">
                    <div className="pub-card-top">
                        <h3 className="pub-card-title">
                            <Link href="#">The Evolution of Democratic Institutions in Post-War Europe</Link>
                        </h3>
                        <div className="pub-badges">
                            <span className="pub-badge pub-badge-open">
                                <i className="fa-solid fa-lock-open"></i> Open Access
                            </span>
                            <span className="pub-badge pub-badge-peer">Peer Reviewed</span>
                        </div>
                    </div>

                    <div className="pub-card-meta">
                        <div className="pub-meta-item">
                            <i className="fa-solid fa-user"></i>
                            <strong>Dr. Elena Rostova</strong>, Prof. Marcus Chen
                        </div>
                        <div className="pub-meta-item">
                            <i className="fa-regular fa-calendar"></i> October 2024
                        </div>
                        <div className="pub-meta-item">
                            <i className="fa-solid fa-link"></i> DOI: 10.1038/s41586-024
                        </div>
                        <div className="pub-meta-item">
                            <i className="fa-solid fa-building-columns"></i> Center for Political Studies
                        </div>
                    </div>

                    <p className="pub-card-abstract">
                        This paper examines the structural shifts in Western European democratic frameworks from 1945 to 1980. By analyzing institutional archives across France, Germany, and Italy, the research identifies a distinct divergence in how parliamentary powers were consolidated versus distributed. The findings challenge traditional narratives of a uniform democratic resurgence, suggesting instead that local historical contexts heavily dictated the adoption of specific liberal norms.
                    </p>

                    <div className="pub-keywords">
                        <span className="pub-keywords-label">Keywords:</span>
                        <span className="pub-keyword-tag">Democracy</span>
                        <span className="pub-keyword-tag">European History</span>
                        <span className="pub-keyword-tag">Institutions</span>
                    </div>

                    <div className="pub-card-actions">
                        <button className="pub-action-btn pub-action-btn-primary">
                            <i className="fa-solid fa-file-pdf"></i> View PDF
                        </button>
                        <button className="pub-action-btn pub-action-btn-secondary">
                            <i className="fa-solid fa-quote-right"></i> Cite
                        </button>
                        <button className="pub-action-btn pub-action-btn-secondary">
                            <i className="fa-regular fa-bookmark"></i> Save
                        </button>
                    </div>
                </div>

                {/* Card 2 */}
                <div className="pub-card">
                    <div className="pub-card-top">
                        <h3 className="pub-card-title">
                            <Link href="#">Cognitive Linguistics and the Framing of Modern Ethics</Link>
                        </h3>
                        <div className="pub-badges">
                            <span className="pub-badge pub-badge-institutional">
                                <i className="fa-solid fa-building-user"></i> Institutional
                            </span>
                        </div>
                    </div>

                    <div className="pub-card-meta">
                        <div className="pub-meta-item">
                            <i className="fa-solid fa-user"></i>
                            <strong>Dr. Sarah Jenkins</strong>
                        </div>
                        <div className="pub-meta-item">
                            <i className="fa-regular fa-calendar"></i> August 2024
                        </div>
                        <div className="pub-meta-item">
                            <i className="fa-solid fa-link"></i> DOI: 10.1016/j.cogling.2024
                        </div>
                    </div>

                    <p className="pub-card-abstract">
                        An exploration into how metaphor and cognitive framing shape contemporary ethical debates. The study utilizes computational linguistics to analyze over 10,000 policy documents and public speeches, demonstrating a significant correlation between specific metaphorical structures and the resulting ethical policy frameworks adopted by legislative bodies.
                    </p>

                    <div className="pub-card-actions">
                        <button className="pub-action-btn pub-action-btn-primary">
                            <i className="fa-solid fa-arrow-right-to-bracket"></i> Login to Access
                        </button>
                        <button className="pub-action-btn pub-action-btn-secondary">
                            <i className="fa-solid fa-quote-right"></i> Cite
                        </button>
                    </div>
                </div>

            </div>

            {/* Pagination */}
            <div className="pub-pagination">
                <button className="pub-page-btn" disabled>
                    <i className="fa-solid fa-arrow-left"></i> Previous
                </button>

                <div className="pub-page-numbers">
                    <button className="pub-page-num active">1</button>
                    <button className="pub-page-num">2</button>
                    <button className="pub-page-num">3</button>
                    <span className="pub-page-ellipsis">...</span>
                    <button className="pub-page-num">124</button>
                </div>

                <button className="pub-page-btn">
                    Next <i className="fa-solid fa-arrow-right"></i>
                </button>
            </div>

        </div>
    );
};

export default PublicationResults;