"use client";

import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import type { DailyPoint } from "@/lib/analytics/dashboardQueries";

const ACCENT = "#8b616d"; // matches the existing admin CSS modules' accent color
const ACCENT_MUTED = "#c9a8ae";

function fmtDay(iso: string): string {
  return new Date(`${iso}T00:00:00Z`).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit" });
}

export function AnalyticsChart({ series }: { series: DailyPoint[] }) {
  if (series.length === 0) {
    return <p style={{ color: "#888", fontSize: 14 }}>Noch keine Daten in diesem Zeitraum.</p>;
  }

  const data = series.map((p) => ({ ...p, label: fmtDay(p.date) }));

  return (
    <ResponsiveContainer width="100%" height={260}>
      <LineChart data={data} margin={{ top: 8, right: 16, bottom: 0, left: 0 }}>
        <CartesianGrid stroke="#eee" vertical={false} />
        <XAxis dataKey="label" tick={{ fontSize: 12, fill: "#888" }} axisLine={{ stroke: "#e2e2e2" }} tickLine={false} />
        <YAxis tick={{ fontSize: 12, fill: "#888" }} axisLine={false} tickLine={false} allowDecimals={false} width={36} />
        <Tooltip
          contentStyle={{ borderRadius: 8, border: "1px solid #e2e2e2", fontSize: 13 }}
          labelFormatter={(label) => `Tag: ${label}`}
        />
        <Line type="monotone" dataKey="pageViews" name="Seitenaufrufe" stroke={ACCENT} strokeWidth={2} dot={false} />
        <Line type="monotone" dataKey="sessions" name="Sessions" stroke={ACCENT_MUTED} strokeWidth={2} dot={false} />
      </LineChart>
    </ResponsiveContainer>
  );
}