import React from 'react';
import { COLORS, GRADIENTS, SHADOWS, RADII, apexFontFamily } from './chartTokens';
import ChartSkeleton from './ChartSkeleton';
import EmptyState from './EmptyState';
import './ChartCard.css';

// ─────────────────────────────────────────────────────────────
// ChartCard – Reusable premium card wrapper for all charts
// Props:
//   title:        string
//   icon:         string (emoji)
//   description:  string
//   badge:        string  (optional top-right pill, e.g. "5 of 12 modules")
//   loading:      bool
//   isEmpty:      bool
//   skeletonType: 'bars' | 'lines' | 'cards'
//   skeletonRows: number
//   emptyIcon:    string
//   emptyTitle:   string
//   emptyMessage: string
//   accentColor:  string  (optional, defaults to primary)
//   children:     ReactNode (the actual chart)
//   minHeight:    string
// ─────────────────────────────────────────────────────────────

const ChartCard = ({
  title = 'Chart',
  icon = '📊',
  description = '',
  badge = null,
  loading = false,
  isEmpty = false,
  skeletonType = 'lines',
  skeletonRows = 5,
  emptyIcon = '📊',
  emptyTitle = 'No Data Available',
  emptyMessage = 'Select filters to view this chart.',
  accentColor = '#6366F1',
  minHeight = '420px',
  children,
}) => {
  const accentGrad = `linear-gradient(180deg, ${accentColor} 0%, ${accentColor}88 100%)`;

  return (
    <div className="chart-card-root">
        {/* ── Header ──────────────────────────────────────────── */}
        <div className="chart-card-header">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }}>
              {/* Accent bar */}
              <div className="chart-card-accent" style={{ background: accentGrad }} />

              {/* Icon + text */}
              <div style={{ display: 'flex', alignItems: 'center', gap: '10px', minWidth: 0 }}>
                <div style={{
                  width: '38px', height: '38px', borderRadius: '10px', flexShrink: 0,
                  background: `linear-gradient(135deg, ${accentColor}22 0%, ${accentColor}44 100%)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px',
                  border: `1px solid ${accentColor}33`,
                }}>
                  {icon}
                </div>
                <div style={{ minWidth: 0 }}>
                  <h3 style={{
                    margin: 0, fontSize: '15px', fontWeight: '700',
                    color: COLORS.text, lineHeight: '1.2',
                    fontFamily: apexFontFamily,
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>
                    {title}
                  </h3>
                  {description && (
                    <p style={{
                      margin: 0, fontSize: '12px', color: COLORS.textMuted, marginTop: '2px',
                      fontFamily: apexFontFamily, lineHeight: '1.4',
                      whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>
                      {description}
                    </p>
                  )}
                </div>
              </div>
            </div>

            {/* Badge */}
            {badge && <div className="chart-card-badge">{badge}</div>}
          </div>
        </div>

        {/* ── Body ─────────────────────────────────────────────── */}
        <div className="chart-card-body" style={{ minHeight }}>
          {loading ? (
            <ChartSkeleton type={skeletonType} rows={skeletonRows} />
          ) : isEmpty ? (
            <EmptyState icon={emptyIcon} title={emptyTitle} message={emptyMessage} minHeight={minHeight} />
          ) : (
            children
          )}
        </div>
    </div>
  );
};

export default ChartCard;