'use client'

// apps/web/src/components/dashboard/meetings-trend-chart.tsx
// recharts 기반 회의/문서 추이 차트 (최근 14일).

import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
  Legend
} from 'recharts'
import { Box } from '@mui/material'
import { d3roPalette } from '@d3ro/ui/theme'

export interface TrendPoint {
  date: string
  meetings: number
  documents: number
}

interface MeetingsTrendChartProps {
  points: TrendPoint[]
}

export function MeetingsTrendChart({ points }: MeetingsTrendChartProps): React.ReactElement {
  return (
    <Box sx={{ width: '100%', height: 260 }}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={points} margin={{ top: 5, right: 12, left: -12, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" stroke={d3roPalette.border.subtle} />
          <XAxis
            dataKey="date"
            stroke={d3roPalette.text.muted}
            fontSize={11}
            tickLine={false}
          />
          <YAxis
            stroke={d3roPalette.text.muted}
            fontSize={11}
            tickLine={false}
            allowDecimals={false}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: d3roPalette.bg.elevated,
              border: `1px solid ${d3roPalette.border.default}`,
              borderRadius: 8,
              color: d3roPalette.text.primary,
              fontSize: 12
            }}
            labelStyle={{ color: d3roPalette.text.label }}
          />
          <Legend
            wrapperStyle={{ fontSize: 11, color: d3roPalette.text.secondary }}
            iconType="circle"
          />
          <Line
            type="monotone"
            dataKey="meetings"
            name="Meetings"
            stroke={d3roPalette.accent.main}
            strokeWidth={2}
            dot={{ r: 3 }}
            activeDot={{ r: 5 }}
          />
          <Line
            type="monotone"
            dataKey="documents"
            name="Documents"
            stroke={d3roPalette.tag.purple}
            strokeWidth={2}
            dot={{ r: 3 }}
            activeDot={{ r: 5 }}
          />
        </LineChart>
      </ResponsiveContainer>
    </Box>
  )
}