import React from 'react';
import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import type { UtilizationRow } from '../types';

/**
 * بهره‌وری هر منبع در یک نگاه.
 *
 * جدول شش ستون عدد دارد و برای مقایسه ساخته نشده؛ چشم نمی‌تواند بگوید کدام منبع
 * عقب است. نمودار دقیقاً همان یک سؤال را جواب می‌دهد و بقیه‌اش زیرش در جدول می‌ماند.
 *
 * منبعِ بدون تقویم اینجا **نمی‌آید**: `null` صفر نیست و ستون صفر دروغ می‌گوید.
 */
export default function ResourceUtilizationChart({ rows }: { rows: UtilizationRow[] }) {
  const data = rows
    .filter((r) => r.utilization !== null)
    .map((r) => ({
      name: r.resource_name,
      percent: Math.round((r.utilization ?? 0) * 100),
      wasted: r.wasted_capacity,
    }));

  if (data.length === 0) return null;

  return (
    <div className="card card-pad" style={{ marginBottom: 16 }}>
      <h3 style={{ fontSize: 14, margin: '0 0 12px' }}>بهره‌وری منابع</h3>

      <div style={{ width: '100%', height: Math.max(180, data.length * 42) }}>
        <ResponsiveContainer>
          <BarChart data={data} layout="vertical" margin={{ right: 16, left: 8 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" horizontal={false} />
            <XAxis type="number" domain={[0, 100]} unit="٪" stroke="var(--text-3)" fontSize={12} />
            <YAxis
              type="category"
              dataKey="name"
              width={120}
              stroke="var(--text-3)"
              fontSize={12}
              orientation="right"
            />
            <Tooltip
              formatter={(v) => [`${Number(v ?? 0)}٪`, 'بهره‌وری'] as [string, string]}
              contentStyle={{
                background: 'var(--surface)',
                border: '1px solid var(--border)',
                borderRadius: 8,
                fontSize: 12,
              }}
            />
            <Bar dataKey="percent" radius={[0, 6, 6, 0]}>
              {/* رنگ از توکن‌ها می‌آید نه از hex — دارک‌مود همین‌جا شکسته می‌شد. */}
              {data.map((row) => (
                <Cell
                  key={row.name}
                  fill={row.wasted ? 'var(--danger)' : 'var(--primary)'}
                />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>

      <p style={{ fontSize: 12, color: 'var(--text-3)', margin: '8px 0 0', lineHeight: 1.8 }}>
        منبعی که تقویم ندارد در نمودار نمی‌آید — بهره‌وری‌اش صفر نیست، تعریف‌نشده است.
      </p>
    </div>
  );
}