"use client";

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface DayData {
  date: string;
  impressions: number;
  likes: number;
  retweets: number;
  replies: number;
}

interface EngagementRateChartProps {
  data: DayData[];
  title: string;
  loading?: boolean;
}

function formatDateLabel(dateStr: string): string {
  const d = new Date(dateStr + "T00:00:00");
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}

export function EngagementRateChart({ data, title, loading }: EngagementRateChartProps) {
  if (loading || data.length === 0) {
    return (
      <Card className="bg-white border border-gray-200 rounded-xl shadow-none">
        <CardHeader>
          <CardTitle className="text-base font-semibold text-gray-900">{title}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-center h-[300px] text-sm text-gray-400">
            {loading ? "Loading..." : "No analytics data yet. Publish posts and check back later."}
          </div>
        </CardContent>
      </Card>
    );
  }

  const chartData = data.map((d) => {
    const engagements = d.likes + d.retweets + d.replies;
    const rate = d.impressions > 0 ? (engagements / d.impressions) * 100 : 0;
    return {
      date: d.date,
      rate: Math.round(rate * 100) / 100,
    };
  });

  return (
    <Card className="bg-white border border-gray-200 rounded-xl shadow-none">
      <CardHeader>
        <CardTitle className="text-base font-semibold text-gray-900">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div role="img" aria-label={`${title} - line chart showing engagement rate percentage over time`}>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={chartData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
            <XAxis
              dataKey="date"
              tickFormatter={formatDateLabel}
              tick={{ fontSize: 11, fill: "#9ca3af" }}
              axisLine={{ stroke: "#e5e7eb" }}
              tickLine={false}
            />
            <YAxis
              tick={{ fontSize: 11, fill: "#9ca3af" }}
              axisLine={false}
              tickLine={false}
              width={50}
              tickFormatter={(v: number) => `${v}%`}
            />
            <Tooltip
              formatter={(value) => [`${value}%`, "Engagement Rate"]}
              labelFormatter={(label) => formatDateLabel(String(label))}
            />
            <Line
              type="monotone"
              dataKey="rate"
              stroke="#10b981"
              strokeWidth={2}
              dot={false}
              activeDot={{ r: 4, fill: "#10b981" }}
            />
          </LineChart>
        </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}