"use client";
import { Bar, BarChart, CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

const tk = (n: number) => `৳${Math.round(n).toLocaleString("en-IN")}`;

export function DailyChart({ data }: { data: { date: string; orders: number; cash: number }[] }) {
  return (
    <div role="img" aria-label="Daily order value and verified cash collected" className="h-[280px]">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ left: 8, right: 8, top: 8 }}>
          <CartesianGrid stroke="#E3D4C2" strokeDasharray="3 3" />
          <XAxis dataKey="date" tickFormatter={(d: string) => d.slice(5)} fontSize={12} minTickGap={24} />
          <YAxis tickFormatter={(v: number) => (v >= 1000 ? `${Math.round(v / 1000)}k` : String(v))} fontSize={12} width={44} />
          <Tooltip formatter={(v: number) => tk(v)} />
          <Legend />
          <Line type="linear" dataKey="orders" name="Order value" stroke="#1E1914" dot={false} strokeWidth={2} />
          <Line type="linear" dataKey="cash" name="Verified cash" stroke="#A57A32" dot={false} strokeWidth={2} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export function BarsChart({ data, label }: { data: { name: string; value: number }[]; label: string }) {
  return (
    <div role="img" aria-label={label} className="h-[260px]">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} layout="vertical" margin={{ left: 8, right: 16 }}>
          <CartesianGrid stroke="#E3D4C2" strokeDasharray="3 3" horizontal={false} />
          <XAxis type="number" tickFormatter={(v: number) => (v >= 1000 ? `${Math.round(v / 1000)}k` : String(v))} fontSize={12} />
          <YAxis type="category" dataKey="name" fontSize={12} width={120} />
          <Tooltip formatter={(v: number) => tk(v)} />
          <Bar dataKey="value" fill="#A57A32" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}