'use client';

import React, { useState } from 'react';

const SORT_OPTIONS = ['Relevance', 'Newest First', 'Most Active', 'Alphabetical'];

const RESULTS = [
    {
        type: 'Project',
        badgeClass: 'pub-badge-open',
        badgeIcon: 'fa-flask',
        badgeLabel: 'Active Project',
        statusClass: 'pub-badge-peer',
        statusLabel: 'Environmental Studies',
        title: 'Urban Microclimate Modeling',
        lead: 'Dr. Alan Turing',
        updated: 'Updated 2 days ago',
        center: 'Institute for Climate Research',
        desc: 'Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning and satellite data.',
        tags: ['Climate', 'Machine Learning', 'Urban Studies'],
        progress: 65,
    },
    {
        type: 'Lab',
        badgeClass: 'pub-badge-institutional',
        badgeIcon: 'fa-building-user',
        badgeLabel: 'Research Lab',
        statusClass: 'pub-badge-peer',
        statusLabel: 'Cognitive Science',
        title: 'Cognitive Sciences Lab',
        lead: 'Prof. Marie Curie',
        updated: 'Updated 1 week ago',
        center: 'Center for Digital Humanities',
        desc: 'Exploring the intersection of artificial intelligence and human psychology, with a focus on decision-making processes and behavioral modeling.',
        tags: ['AI', 'Psychology', 'Neuroscience'],
        progress: null,
    },
    {
        type: 'Project',
        badgeClass: 'pub-badge-request',
        badgeIcon: 'fa-gavel',
        badgeLabel: 'Data Collection',
        statusClass: 'pub-badge-peer',
        statusLabel: 'Law & Policy',
        title: 'Digital Rights in the EU Framework',
        lead: 'Dr. Elena Rostova',
        updated: 'Updated 1 week ago',
        center: 'Institute for Advanced European Studies',
        desc: 'A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties across the EU.',
        tags: ['Digital Rights', 'EU Law', 'Privacy'],
        progress: 30,
    },
];

const ResearchSearchResults = () => {
    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>340</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>

            {/* Result cards */}
            <div className="pub-card-list">
                {RESULTS.map((item, idx) => (
                    <div key={idx} className="pub-card">
                        <div className="pub-card-top">
                            <h3 className="pub-card-title">
                                <a href="#">{item.title}</a>
                            </h3>
                            <div className="pub-badges">
                                <span className={`pub-badge ${item.badgeClass}`}>
                                    <i className={`fa-solid ${item.badgeIcon}`}></i> {item.badgeLabel}
                                </span>
                                <span className="pub-badge pub-badge-peer">{item.statusLabel}</span>
                            </div>
                        </div>

                        <div className="pub-card-meta">
                            <div className="pub-meta-item">
                                <i className="fa-solid fa-user"></i>
                                <strong>{item.lead}</strong>
                            </div>
                            <div className="pub-meta-item">
                                <i className="fa-regular fa-clock"></i> {item.updated}
                            </div>
                            <div className="pub-meta-item">
                                <i className="fa-solid fa-building-columns"></i> {item.center}
                            </div>
                        </div>

                        <p className="pub-card-abstract">{item.desc}</p>

                        <div className="pub-keywords">
                            <span className="pub-keywords-label">Tags:</span>
                            {item.tags.map((tag) => (
                                <span key={tag} className="pub-keyword-tag">{tag}</span>
                            ))}
                        </div>

                        {item.progress !== null && (
                            <div style={{ marginBottom: '1rem' }}>
                                <div className="flex justify-between text-xs mb-1" style={{ color: 'var(--pub-muted)' }}>
                                    <span>Progress</span>
                                    <span style={{ fontWeight: 600, color: 'var(--pub-text)' }}>{item.progress}%</span>
                                </div>
                                <div style={{ width: '100%', height: '6px', backgroundColor: 'var(--pub-bg)', borderRadius: '9999px' }}>
                                    <div style={{ width: `${item.progress}%`, height: '6px', backgroundColor: 'var(--pub-blue)', borderRadius: '9999px' }}></div>
                                </div>
                            </div>
                        )}

                        <div className="pub-card-actions">
                            <button className="pub-action-btn pub-action-btn-primary">
                                <i className="fa-solid fa-arrow-right"></i> View Details
                            </button>
                            <button className="pub-action-btn pub-action-btn-secondary">
                                <i className="fa-regular fa-bookmark"></i> Save
                            </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">34</button>
                </div>
                <button className="pub-page-btn">
                    Next <i className="fa-solid fa-arrow-right"></i>
                </button>
            </div>

        </div>
    );
};

export default ResearchSearchResults;