import React from "react";
import AddToPersonalizedButton from "../common/AddToPersonalizedButton";
import "../styles/TopSitesList.css";

const TopSitesList = ({ sites, widgetId }) => {
  const topFive = (sites && sites.length) ? sites.slice(0, 5) : [];

  return (
    <div className="top-sites-container top-sites-container--has-add-btn top-sites-enhanced">
      {widgetId && <AddToPersonalizedButton widgetId={widgetId} />}
      <div className="top-sites-header">
        <h2 className="top-sites-title">Top Sites by Compliance</h2>
        <p className="top-sites-subtitle">Top 5 sites by audit activity</p>
      </div>
      <div className="top-sites-list">
        {topFive.length === 0 ? (
          <p className="top-sites-empty">No site data yet. Audits will appear here.</p>
        ) : (
          topFive.map((site, index) => (
            <div key={`${site.name}-${index}`} className="top-site-item">
              <div className="top-site-body">
                <div className="top-site-main">
                  <div className="top-site-name">{site.name}</div>
                  <div className="top-site-meta">
                    {site.country && (
                      <span className="top-site-meta-item top-site-country">
                        <span className="top-site-meta-icon" aria-hidden>🌐</span>
                        {site.country}
                      </span>
                    )}
                    {site.workarea && (
                      <span className="top-site-meta-item top-site-workarea">
                        <span className="top-site-meta-icon" aria-hidden>◉</span>
                        {site.workarea}
                      </span>
                    )}
                  </div>
                </div>
                <div className="top-site-stats">
                  <div className="top-site-score">
                    <span className="top-site-score-value">{site.score}%</span>
                    <span className="top-site-score-label">Score</span>
                  </div>
                  {site.findings !== undefined && (
                    <div className="top-site-findings">{site.findings} open findings</div>
                  )}
                </div>
              </div>
              <div className="top-site-progress-bar">
                <div
                  className={`top-site-progress ${site.score >= 90 ? "high" : site.score >= 70 ? "mid" : "low"}`}
                  style={{ width: `${Math.min(100, site.score)}%` }}
                />
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

export default TopSitesList;
