'use client'

import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

const COLORS = ['#f97316', '#111827', '#64748b', '#f59e0b', '#10b981', '#6366f1']

export function DashboardCharts({
  weeklyUsers,
  weeklyRoutes,
  weeklyTrips,
  userTypes,
  topCities,
  serviceCategories,
  rewardsActivity,
}: {
  weeklyUsers: Array<Record<string, string | number>>
  weeklyRoutes: Array<Record<string, string | number>>
  weeklyTrips: Array<Record<string, string | number>>
  userTypes: Array<Record<string, string | number>>
  topCities: Array<Record<string, string | number>>
  serviceCategories: Array<Record<string, string | number>>
  rewardsActivity: Array<Record<string, string | number>>
}) {
  return (
    <div className="grid gap-4 xl:grid-cols-2">
      <ChartCard title="Croissance utilisateurs">
        <AreaChart data={weeklyUsers}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis allowDecimals={false} />
          <Tooltip />
          <Area type="monotone" dataKey="count" stroke="#f97316" fill="#fed7aa" />
        </AreaChart>
      </ChartCard>

      <ChartCard title="Routes et trajets par semaine">
        <BarChart data={mergeSeries(weeklyRoutes, weeklyTrips)}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis allowDecimals={false} />
          <Tooltip />
          <Bar dataKey="routes" fill="#111827" radius={[4, 4, 0, 0]} />
          <Bar dataKey="trips" fill="#f97316" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ChartCard>

      <ChartCard title="Repartition auto / moto">
        <PieChart>
          <Pie data={userTypes} dataKey="count" nameKey="label" outerRadius={92} label>
            {userTypes.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip />
        </PieChart>
      </ChartCard>

      <ChartCard title="Top villes">
        <BarChart data={topCities} layout="vertical">
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis type="number" allowDecimals={false} />
          <YAxis dataKey="label" type="category" width={90} />
          <Tooltip />
          <Bar dataKey="count" fill="#f97316" radius={[0, 4, 4, 0]} />
        </BarChart>
      </ChartCard>

      <ChartCard title="Top categories services">
        <BarChart data={serviceCategories}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis allowDecimals={false} />
          <Tooltip />
          <Bar dataKey="count" fill="#111827" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ChartCard>

      <ChartCard title="Activite rewards">
        <AreaChart data={rewardsActivity}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis allowDecimals={false} />
          <Tooltip />
          <Area type="monotone" dataKey="count" stroke="#f97316" fill="#fed7aa" />
        </AreaChart>
      </ChartCard>
    </div>
  )
}

function ChartCard({ title, children }: { title: string; children: React.ReactElement }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-72">
          <ResponsiveContainer width="100%" height="100%">
            {children}
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}

function mergeSeries(routes: Array<Record<string, string | number>>, trips: Array<Record<string, string | number>>) {
  const labels = new Set([...routes.map((item) => String(item.label)), ...trips.map((item) => String(item.label))])
  return Array.from(labels).map((label) => ({
    label,
    routes: Number(routes.find((item) => item.label === label)?.count ?? 0),
    trips: Number(trips.find((item) => item.label === label)?.count ?? 0),
  }))
}