'use client';

import React from 'react';

interface IncidentsTrendChartProps {
  totalIncidents?: number;
}

export function IncidentsTrendChart({
  totalIncidents = 0,
}: IncidentsTrendChartProps) {
  // 7-day timeline trend
  const days = ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Today'];
  const dataPoints = totalIncidents > 0 ? [1, 2, 1, 3, 2, 4, totalIncidents] : [0, 0, 0, 0, 0, 0, 0];

  // Max value to scale heights
  const maxVal = Math.max(...dataPoints, 10);

  // SVG coordinates for wave
  const svgWidth = 320;
  const svgHeight = 90;
  const stepX = svgWidth / (dataPoints.length - 1);

  const points = dataPoints.map((val, idx) => ({
    x: idx * stepX,
    y: svgHeight - (val / maxVal) * (svgHeight - 20) - 10,
  }));

  // Build SVG path string
  const pathD = points.reduce((acc, p, idx) => {
    if (idx === 0) return `M ${p.x} ${p.y}`;
    // smooth cubic bezier curve
    const prev = points[idx - 1];
    const cp1x = prev.x + (p.x - prev.x) / 2;
    const cp1y = prev.y;
    const cp2x = prev.x + (p.x - prev.x) / 2;
    const cp2y = p.y;
    return `${acc} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p.x} ${p.y}`;
  }, '');

  const areaD = `${pathD} L ${points[points.length - 1].x} ${svgHeight} L ${points[0].x} ${svgHeight} Z`;

  return (
    <div className="bg-white rounded-xl border border-slate-200/90 p-4 shadow-xs">
      <div className="flex items-center justify-between pb-3 border-b border-slate-100">
        <div>
          <h3 className="text-sm font-black text-slate-900 tracking-tight">
            Incidents Reported (7-Day Trend)
          </h3>
          <p className="text-[11px] text-slate-500 font-medium">
            Daily logs &amp; rapid response escalation
          </p>
        </div>
        <div className="text-right">
          <span className="text-sm font-black text-slate-900 font-mono">
            {totalIncidents}
          </span>
          <span className="block text-[10px] text-emerald-600 font-bold font-mono">
            {totalIncidents > 0 ? `${totalIncidents} active today` : '0 active today • Calm'}
          </span>
        </div>
      </div>

      <div className="mt-3">
        <div className="w-full h-24 relative overflow-hidden rounded-lg bg-emerald-50/30 p-1">
          <svg
            viewBox={`0 0 ${svgWidth} ${svgHeight}`}
            preserveAspectRatio="none"
            className="w-full h-full overflow-visible"
          >
            <defs>
              <linearGradient id="incidentGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#10b981" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#10b981" stopOpacity="0.0" />
              </linearGradient>
            </defs>

            {/* Gradient filled area */}
            <path d={areaD} fill="url(#incidentGrad)" />

            {/* Line stroke */}
            <path
              d={pathD}
              fill="none"
              stroke="#059669"
              strokeWidth="2.5"
              strokeLinecap="round"
            />

            {/* Data point dots */}
            {points.map((p, idx) => (
              <circle
                key={idx}
                cx={p.x}
                cy={p.y}
                r={idx === points.length - 1 ? 4 : 2.5}
                fill={idx === points.length - 1 ? '#047857' : '#10b981'}
                stroke="#ffffff"
                strokeWidth="1.5"
              />
            ))}
          </svg>
        </div>

        {/* X-axis days label */}
        <div className="flex items-center justify-between text-[10px] font-mono text-slate-400 mt-2 px-1">
          {days.map((d, i) => (
            <span key={i} className={i === days.length - 1 ? 'font-bold text-slate-700' : ''}>
              {d}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}