"use client"

import React from 'react'

// type PayloadItem = {
//   color?: string
//   name?: string | number
//   value?: number | string
//   dataKey?: string
// }

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function ChartTooltip(props: any) {
  const {
    active,
    label,
    payload,
    title,
    valueLabel,
    valueSuffix,
    valueFormatter,
    labelFormatter,
  } = props || {}
  if (!active || !payload || !payload.length) return null

  const fmtLabel = () => {
    try {
      if (labelFormatter) return labelFormatter(label)
      return new Date(String(label)).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
    } catch {
      return String(label)
    }
  }

  const fmtValue = (v: number | string) => {
    const base = valueFormatter ? valueFormatter(v) : String(v)
    return valueSuffix ? `${base}${valueSuffix}` : base
  }

  return (
    <div
      className="rounded-md border shadow-sm px-3 py-2 text-xs"
      style={{
        background: 'var(--content-card-background)',
        borderColor: 'var(--icon-button-secondary)',
        color: 'var(--text-main)'
      }}
    >
      <div className="mb-1">
        {title ? (
          <div className="font-medium" style={{ color: 'var(--text-main)'}}>{title}</div>
        ) : null}
        <div style={{ color: 'var(--text-secondary)' }}>{fmtLabel()}</div>
      </div>
      <div className="space-y-1">
        {payload.map((item: { color?: string, name?: string | number, value?: number | string, dataKey?: string }, idx: number) => (
          <div key={idx} className="flex items-center justify-between gap-3">
            <div className="flex items-center gap-2">
              <span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: item.color || 'var(--icon-accent)' }} />
              <span style={{ color: 'var(--text-secondary)'}}>{String(item.name || item.dataKey)}</span>
            </div>
            <div className="font-medium" style={{ color: 'var(--text-main)'}}>
              {fmtValue(item.value ?? '')}
            </div>
          </div>
        ))}
        {valueLabel && payload.length === 1 ? (
          <div className="flex items-center justify-between gap-3">
            <span style={{ color: 'var(--text-secondary)'}}>{valueLabel}</span>
            <span className="font-medium" style={{ color: 'var(--text-main)'}}>
              {fmtValue(payload[0].value ?? '')}
            </span>
          </div>
        ) : null}
      </div>
    </div>
  )
}