import { useMemo } from 'react'
import ReactECharts from 'echarts-for-react'
import { buildCostByResourceOption } from '@/lib/chart-options'
import type { ActivitySimResult, Resource } from '@/domain/types'

interface CostByResourceChartProps {
  perActivity: ActivitySimResult[]
  resources: Resource[]
  currency: string
}

export function CostByResourceChart({ perActivity, resources, currency }: CostByResourceChartProps) {
  const option = useMemo(
    () => buildCostByResourceOption(perActivity, resources, currency),
    [perActivity, resources, currency]
  )

  if (!option) {
    return (
      <div className="flex flex-col items-center justify-center h-64 text-center px-4">
        <p className="text-xs text-slate-400 mb-1">Sin recursos asignados</p>
        <p className="text-xs text-slate-300">Asigná recursos a las actividades en el workspace para ver este gráfico</p>
      </div>
    )
  }

  return <ReactECharts option={option} style={{ height: 300 }} notMerge />
}
