lti-web-client/src/components/pages/dashboard/chart/StandardLineChart.tsx

'use client';

import { useState } from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';

// Type definitions for API data
interface FlockData {
  id: number;
  name: string;
  data: number;
}

interface StandardData {
  name: string;
  value: number;
}

interface StandardChartItem {
  week: number;
  standards: StandardData[];
  flocks: FlockData[];
}

// Sample data in API format
const sampleApiData: StandardChartItem[] = [
  {
    week: 18,
    standards: [
      { name: 'hen_day', value: 40 },
      { name: 'hen_house', value: 38 },
      { name: 'uniformity', value: 85 },
      { name: 'egg_weight', value: 52 },
      { name: 'egg_mass', value: 20 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 38 },
      { id: 2, name: 'Flock A-002', data: 37 },
      { id: 3, name: 'Flock B-001', data: 39 },
      { id: 4, name: 'Flock B-002', data: 36 },
    ],
  },
  {
    week: 20,
    standards: [
      { name: 'hen_day', value: 45 },
      { name: 'hen_house', value: 43 },
      { name: 'uniformity', value: 86 },
      { name: 'egg_weight', value: 54 },
      { name: 'egg_mass', value: 24 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 43 },
      { id: 2, name: 'Flock A-002', data: 42 },
      { id: 3, name: 'Flock B-001', data: 44 },
      { id: 4, name: 'Flock B-002', data: 41 },
    ],
  },
  {
    week: 22,
    standards: [
      { name: 'hen_day', value: 48 },
      { name: 'hen_house', value: 46 },
      { name: 'uniformity', value: 87 },
      { name: 'egg_weight', value: 55 },
      { name: 'egg_mass', value: 26 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 47 },
      { id: 2, name: 'Flock A-002', data: 46 },
      { id: 3, name: 'Flock B-001', data: 48 },
      { id: 4, name: 'Flock B-002', data: 45 },
    ],
  },
  {
    week: 24,
    standards: [
      { name: 'hen_day', value: 50 },
      { name: 'hen_house', value: 48 },
      { name: 'uniformity', value: 88 },
      { name: 'egg_weight', value: 56 },
      { name: 'egg_mass', value: 28 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 49 },
      { id: 2, name: 'Flock A-002', data: 48 },
      { id: 3, name: 'Flock B-001', data: 50 },
      { id: 4, name: 'Flock B-002', data: 47 },
    ],
  },
  {
    week: 26,
    standards: [
      { name: 'hen_day', value: 52 },
      { name: 'hen_house', value: 50 },
      { name: 'uniformity', value: 89 },
      { name: 'egg_weight', value: 57 },
      { name: 'egg_mass', value: 30 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 50 },
      { id: 2, name: 'Flock A-002', data: 49 },
      { id: 3, name: 'Flock B-001', data: 51 },
      { id: 4, name: 'Flock B-002', data: 48 },
    ],
  },
  {
    week: 28,
    standards: [
      { name: 'hen_day', value: 55 },
      { name: 'hen_house', value: 53 },
      { name: 'uniformity', value: 90 },
      { name: 'egg_weight', value: 58 },
      { name: 'egg_mass', value: 32 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 53 },
      { id: 2, name: 'Flock A-002', data: 52 },
      { id: 3, name: 'Flock B-001', data: 54 },
      { id: 4, name: 'Flock B-002', data: 51 },
    ],
  },
  {
    week: 30,
    standards: [
      { name: 'hen_day', value: 58 },
      { name: 'hen_house', value: 56 },
      { name: 'uniformity', value: 91 },
      { name: 'egg_weight', value: 59 },
      { name: 'egg_mass', value: 34 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 55 },
      { id: 2, name: 'Flock A-002', data: 54 },
      { id: 3, name: 'Flock B-001', data: 56 },
      { id: 4, name: 'Flock B-002', data: 53 },
    ],
  },
  {
    week: 32,
    standards: [
      { name: 'hen_day', value: 60 },
      { name: 'hen_house', value: 58 },
      { name: 'uniformity', value: 92 },
      { name: 'egg_weight', value: 60 },
      { name: 'egg_mass', value: 36 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 58 },
      { id: 2, name: 'Flock A-002', data: 57 },
      { id: 3, name: 'Flock B-001', data: 59 },
      { id: 4, name: 'Flock B-002', data: 56 },
    ],
  },
  {
    week: 34,
    standards: [
      { name: 'hen_day', value: 62 },
      { name: 'hen_house', value: 60 },
      { name: 'uniformity', value: 92 },
      { name: 'egg_weight', value: 61 },
      { name: 'egg_mass', value: 38 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 60 },
      { id: 2, name: 'Flock A-002', data: 59 },
      { id: 3, name: 'Flock B-001', data: 61 },
      { id: 4, name: 'Flock B-002', data: 58 },
    ],
  },
  {
    week: 36,
    standards: [
      { name: 'hen_day', value: 64 },
      { name: 'hen_house', value: 62 },
      { name: 'uniformity', value: 93 },
      { name: 'egg_weight', value: 62 },
      { name: 'egg_mass', value: 40 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 62 },
      { id: 2, name: 'Flock A-002', data: 61 },
      { id: 3, name: 'Flock B-001', data: 63 },
      { id: 4, name: 'Flock B-002', data: 60 },
    ],
  },
  {
    week: 38,
    standards: [
      { name: 'hen_day', value: 66 },
      { name: 'hen_house', value: 64 },
      { name: 'uniformity', value: 93 },
      { name: 'egg_weight', value: 63 },
      { name: 'egg_mass', value: 42 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 64 },
      { id: 2, name: 'Flock A-002', data: 63 },
      { id: 3, name: 'Flock B-001', data: 65 },
      { id: 4, name: 'Flock B-002', data: 62 },
    ],
  },
  {
    week: 40,
    standards: [
      { name: 'hen_day', value: 68 },
      { name: 'hen_house', value: 66 },
      { name: 'uniformity', value: 94 },
      { name: 'egg_weight', value: 64 },
      { name: 'egg_mass', value: 44 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 66 },
      { id: 2, name: 'Flock A-002', data: 65 },
      { id: 3, name: 'Flock B-001', data: 67 },
      { id: 4, name: 'Flock B-002', data: 64 },
    ],
  },
  {
    week: 42,
    standards: [
      { name: 'hen_day', value: 70 },
      { name: 'hen_house', value: 68 },
      { name: 'uniformity', value: 94 },
      { name: 'egg_weight', value: 65 },
      { name: 'egg_mass', value: 46 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 68 },
      { id: 2, name: 'Flock A-002', data: 67 },
      { id: 3, name: 'Flock B-001', data: 69 },
      { id: 4, name: 'Flock B-002', data: 66 },
    ],
  },
  {
    week: 44,
    standards: [
      { name: 'hen_day', value: 72 },
      { name: 'hen_house', value: 70 },
      { name: 'uniformity', value: 95 },
      { name: 'egg_weight', value: 66 },
      { name: 'egg_mass', value: 48 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 70 },
      { id: 2, name: 'Flock A-002', data: 69 },
      { id: 3, name: 'Flock B-001', data: 71 },
      { id: 4, name: 'Flock B-002', data: 68 },
    ],
  },
  {
    week: 46,
    standards: [
      { name: 'hen_day', value: 74 },
      { name: 'hen_house', value: 72 },
      { name: 'uniformity', value: 95 },
      { name: 'egg_weight', value: 67 },
      { name: 'egg_mass', value: 50 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 72 },
      { id: 2, name: 'Flock A-002', data: 71 },
      { id: 3, name: 'Flock B-001', data: 73 },
      { id: 4, name: 'Flock B-002', data: 70 },
    ],
  },
  {
    week: 48,
    standards: [
      { name: 'hen_day', value: 76 },
      { name: 'hen_house', value: 74 },
      { name: 'uniformity', value: 95 },
      { name: 'egg_weight', value: 68 },
      { name: 'egg_mass', value: 52 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 74 },
      { id: 2, name: 'Flock A-002', data: 73 },
      { id: 3, name: 'Flock B-001', data: 75 },
      { id: 4, name: 'Flock B-002', data: 72 },
    ],
  },
  {
    week: 50,
    standards: [
      { name: 'hen_day', value: 78 },
      { name: 'hen_house', value: 76 },
      { name: 'uniformity', value: 96 },
      { name: 'egg_weight', value: 69 },
      { name: 'egg_mass', value: 54 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 76 },
      { id: 2, name: 'Flock A-002', data: 75 },
      { id: 3, name: 'Flock B-001', data: 77 },
      { id: 4, name: 'Flock B-002', data: 74 },
    ],
  },
  {
    week: 52,
    standards: [
      { name: 'hen_day', value: 80 },
      { name: 'hen_house', value: 78 },
      { name: 'uniformity', value: 96 },
      { name: 'egg_weight', value: 70 },
      { name: 'egg_mass', value: 56 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 78 },
      { id: 2, name: 'Flock A-002', data: 77 },
      { id: 3, name: 'Flock B-001', data: 79 },
      { id: 4, name: 'Flock B-002', data: 76 },
    ],
  },
  {
    week: 54,
    standards: [
      { name: 'hen_day', value: 82 },
      { name: 'hen_house', value: 80 },
      { name: 'uniformity', value: 96 },
      { name: 'egg_weight', value: 71 },
      { name: 'egg_mass', value: 58 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 80 },
      { id: 2, name: 'Flock A-002', data: 79 },
      { id: 3, name: 'Flock B-001', data: 81 },
      { id: 4, name: 'Flock B-002', data: 78 },
    ],
  },
  {
    week: 56,
    standards: [
      { name: 'hen_day', value: 84 },
      { name: 'hen_house', value: 82 },
      { name: 'uniformity', value: 97 },
      { name: 'egg_weight', value: 72 },
      { name: 'egg_mass', value: 60 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 82 },
      { id: 2, name: 'Flock A-002', data: 81 },
      { id: 3, name: 'Flock B-001', data: 83 },
      { id: 4, name: 'Flock B-002', data: 80 },
    ],
  },
  {
    week: 58,
    standards: [
      { name: 'hen_day', value: 86 },
      { name: 'hen_house', value: 84 },
      { name: 'uniformity', value: 97 },
      { name: 'egg_weight', value: 73 },
      { name: 'egg_mass', value: 62 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 84 },
      { id: 2, name: 'Flock A-002', data: 83 },
      { id: 3, name: 'Flock B-001', data: 85 },
      { id: 4, name: 'Flock B-002', data: 82 },
    ],
  },
  {
    week: 60,
    standards: [
      { name: 'hen_day', value: 88 },
      { name: 'hen_house', value: 86 },
      { name: 'uniformity', value: 97 },
      { name: 'egg_weight', value: 74 },
      { name: 'egg_mass', value: 64 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 86 },
      { id: 2, name: 'Flock A-002', data: 85 },
      { id: 3, name: 'Flock B-001', data: 87 },
      { id: 4, name: 'Flock B-002', data: 84 },
    ],
  },
  {
    week: 62,
    standards: [
      { name: 'hen_day', value: 90 },
      { name: 'hen_house', value: 88 },
      { name: 'uniformity', value: 98 },
      { name: 'egg_weight', value: 75 },
      { name: 'egg_mass', value: 66 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 88 },
      { id: 2, name: 'Flock A-002', data: 87 },
      { id: 3, name: 'Flock B-001', data: 89 },
      { id: 4, name: 'Flock B-002', data: 86 },
    ],
  },
  {
    week: 64,
    standards: [
      { name: 'hen_day', value: 92 },
      { name: 'hen_house', value: 90 },
      { name: 'uniformity', value: 98 },
      { name: 'egg_weight', value: 76 },
      { name: 'egg_mass', value: 68 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 90 },
      { id: 2, name: 'Flock A-002', data: 89 },
      { id: 3, name: 'Flock B-001', data: 91 },
      { id: 4, name: 'Flock B-002', data: 88 },
    ],
  },
  {
    week: 66,
    standards: [
      { name: 'hen_day', value: 94 },
      { name: 'hen_house', value: 92 },
      { name: 'uniformity', value: 98 },
      { name: 'egg_weight', value: 77 },
      { name: 'egg_mass', value: 70 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 92 },
      { id: 2, name: 'Flock A-002', data: 91 },
      { id: 3, name: 'Flock B-001', data: 93 },
      { id: 4, name: 'Flock B-002', data: 90 },
    ],
  },
  {
    week: 68,
    standards: [
      { name: 'hen_day', value: 95 },
      { name: 'hen_house', value: 93 },
      { name: 'uniformity', value: 98 },
      { name: 'egg_weight', value: 78 },
      { name: 'egg_mass', value: 72 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 93 },
      { id: 2, name: 'Flock A-002', data: 92 },
      { id: 3, name: 'Flock B-001', data: 94 },
      { id: 4, name: 'Flock B-002', data: 91 },
    ],
  },
  {
    week: 70,
    standards: [
      { name: 'hen_day', value: 96 },
      { name: 'hen_house', value: 94 },
      { name: 'uniformity', value: 99 },
      { name: 'egg_weight', value: 79 },
      { name: 'egg_mass', value: 74 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 94 },
      { id: 2, name: 'Flock A-002', data: 93 },
      { id: 3, name: 'Flock B-001', data: 95 },
      { id: 4, name: 'Flock B-002', data: 92 },
    ],
  },
  {
    week: 72,
    standards: [
      { name: 'hen_day', value: 97 },
      { name: 'hen_house', value: 95 },
      { name: 'uniformity', value: 99 },
      { name: 'egg_weight', value: 80 },
      { name: 'egg_mass', value: 76 },
    ],
    flocks: [
      { id: 1, name: 'Flock A-001', data: 95 },
      { id: 2, name: 'Flock A-002', data: 94 },
      { id: 3, name: 'Flock B-001', data: 96 },
      { id: 4, name: 'Flock B-002', data: 93 },
    ],
  },
];

// Transform API data to Recharts format
const transformStandardData = (
  apiData: StandardChartItem[],
  selectedStandards: string[] = [
    'hen_day',
    'hen_house',
    'uniformity',
    'egg_weight',
    'egg_mass',
  ]
) => {
  return apiData.map((item) => {
    const transformed: Record<string, number> = {
      week: item.week,
    };

    // Add selected standards as properties
    selectedStandards.forEach((standardName) => {
      const standardData = item.standards.find((s) => s.name === standardName);
      if (standardData) {
        transformed[standardName] = standardData.value;
      }
    });

    // Add each flock's data as a property
    item.flocks.forEach((flock) => {
      transformed[flock.name] = flock.data;
    });

    return transformed;
  });
};

interface StandardLineChartProps {
  data?: StandardChartItem[];
  selectedStandards?: string[];
}

const StandardLineChart = ({
  data: apiData,
  selectedStandards = [
    'hen_day',
    'hen_house',
    'uniformity',
    'egg_weight',
    'egg_mass',
  ],
}: StandardLineChartProps) => {
  // State to track which lines are hidden
  const [hiddenLines, setHiddenLines] = useState<string[]>([]);

  // Use API data if provided, otherwise use sample data
  const chartData = apiData
    ? transformStandardData(apiData, selectedStandards)
    : transformStandardData(sampleApiData, selectedStandards);

  // Handle legend click to show/hide lines
  const handleLegendClick = (dataKey: string) => {
    setHiddenLines((prev) =>
      prev.includes(dataKey)
        ? prev.filter((key) => key !== dataKey)
        : [...prev, dataKey]
    );
  };

  // Standard line colors mapping
  const standardColors: Record<string, string> = {
    hen_day: '#94a3b8',
    hen_house: '#64748b',
    uniformity: '#475569',
    egg_weight: '#334155',
    egg_mass: '#1e293b',
  };

  // Standard names mapping for display
  const standardLabels: Record<string, string> = {
    hen_day: 'Hen Day',
    hen_house: 'Hen House',
    uniformity: 'Uniformity',
    egg_weight: 'Egg Weight',
    egg_mass: 'Egg Mass',
  };

  return (
    <div className='w-full h-full'>
      <h3 className='text-lg font-semibold mb-4'>
        Perbandingan Henday per Umur
      </h3>
      <ResponsiveContainer width='100%' height={400}>
        <LineChart
          data={chartData}
          margin={{
            top: 5,
            right: 30,
            left: 0,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
          <XAxis
            dataKey='week'
            tick={{ fontSize: 12 }}
            tickLine={false}
            axisLine={{ stroke: '#e5e7eb' }}
            label={{
              value: 'Umur (minggu)',
              position: 'insideBottom',
              offset: -5,
              style: { fontSize: 12 },
            }}
          />
          <YAxis
            tick={{ fontSize: 12 }}
            tickLine={false}
            axisLine={{ stroke: '#e5e7eb' }}
            domain={[0, 100]}
            label={{
              value: 'Henday (%)',
              angle: -90,
              position: 'insideLeft',
              style: { fontSize: 12 },
            }}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: 'white',
              border: '1px solid #e5e7eb',
              borderRadius: '8px',
              padding: '8px 12px',
            }}
            formatter={(value: number | undefined) =>
              value !== undefined ? [`${value}%`, ''] : ['', '']
            }
            labelFormatter={(label) => `Minggu ${label}`}
          />
          <Legend
            wrapperStyle={{
              paddingTop: '20px',
            }}
            iconType='circle'
            onClick={(e) => {
              if (e.dataKey) handleLegendClick(e.dataKey as string);
            }}
            style={{ cursor: 'pointer' }}
          />
          {/* Dynamic Standard Lines */}
          {selectedStandards.map((standardName) => (
            <Line
              key={standardName}
              type='monotone'
              dataKey={standardName}
              name={standardLabels[standardName] || standardName}
              stroke={standardColors[standardName] || '#94a3b8'}
              strokeWidth={2}
              strokeDasharray='5 5'
              dot={{ r: 3, fill: standardColors[standardName] || '#94a3b8' }}
              activeDot={{ r: 5 }}
              hide={hiddenLines.includes(standardName)}
            />
          ))}
          {/* Flock Lines */}
          <Line
            type='monotone'
            dataKey='Flock A-002'
            stroke='#3b82f6'
            strokeWidth={2}
            dot={{ r: 4, fill: '#3b82f6' }}
            activeDot={{ r: 6 }}
            hide={hiddenLines.includes('Flock A-002')}
          />
          <Line
            type='monotone'
            dataKey='Flock A-001'
            stroke='#10b981'
            strokeWidth={2}
            dot={{ r: 4, fill: '#10b981' }}
            activeDot={{ r: 6 }}
            hide={hiddenLines.includes('Flock A-001')}
          />
          <Line
            type='monotone'
            dataKey='Flock B-001'
            stroke='#f59e0b'
            strokeWidth={2}
            dot={{ r: 4, fill: '#f59e0b' }}
            activeDot={{ r: 6 }}
            hide={hiddenLines.includes('Flock B-001')}
          />
          <Line
            type='monotone'
            dataKey='Flock B-002'
            stroke='#ef4444'
            strokeWidth={2}
            dot={{ r: 4, fill: '#ef4444' }}
            activeDot={{ r: 6 }}
            hide={hiddenLines.includes('Flock B-002')}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

export default StandardLineChart;

// Export types for external use
export type { FlockData, StandardData, StandardChartItem };