'use client';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend, LineChart, Line } from 'recharts';
import { Truck, Users, Eye, TrendingUp } from 'lucide-react';
import { useLanguage } from '@/lib/i18n/language-context';

const COLORS = ['#DC2626', '#60B5FF', '#FF9149', '#80D8C3', '#A19AD3', '#FF6363'];

export default function ReportsCharts({ stats }: { stats: any }) {
  const { t } = useLanguage();

  const vehicleStatusData = [
    { name: t.admin.reports.availableLabel, value: stats?.availableVehicles ?? 0 },
    { name: t.admin.reports.soldLabel, value: stats?.soldVehicles ?? 0 },
  ];

  const leadsBySourceData = (stats?.leadsBySource ?? [])?.map((s: any) => ({
    name: s?.source ?? 'Other',
    value: s?._count?.id ?? 0,
  }));

  const leadsByMonthData = (stats?.leadsByMonth ?? [])?.map((m: any) => ({
    month: m?.month ?? '',
    count: m?.count ?? 0,
  }));

  const topViewedData = (stats?.topViewed ?? [])?.map((v: any) => ({
    name: (v?.title ?? '').length > 20 ? (v.title ?? '').substring(0, 20) + '...' : (v?.title ?? ''),
    views: v?.viewCount ?? 0,
  }));

  return (
    <div className="space-y-6">
      {/* Summary cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl p-4 shadow-sm">
          <div className="flex items-center gap-2 text-gray-500 text-sm mb-2"><Truck className="w-4 h-4" /> {t.admin.reports.inventory}</div>
          <p className="text-2xl font-bold">{stats?.totalVehicles ?? 0}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm">
          <div className="flex items-center gap-2 text-gray-500 text-sm mb-2"><TrendingUp className="w-4 h-4" /> {t.admin.reports.soldCount}</div>
          <p className="text-2xl font-bold text-red-600">{stats?.soldVehicles ?? 0}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm">
          <div className="flex items-center gap-2 text-gray-500 text-sm mb-2"><Users className="w-4 h-4" /> {t.admin.reports.totalLeads}</div>
          <p className="text-2xl font-bold">{stats?.totalLeads ?? 0}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm">
          <div className="flex items-center gap-2 text-gray-500 text-sm mb-2"><Eye className="w-4 h-4" /> {t.admin.reports.newLeads}</div>
          <p className="text-2xl font-bold text-orange-600">{stats?.newLeads ?? 0}</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Vehicle status pie */}
        <div className="bg-white rounded-xl p-6 shadow-sm">
          <h3 className="font-semibold text-lg mb-4">{t.admin.reports.vehicleStatus}</h3>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie data={vehicleStatusData} cx="50%" cy="50%" outerRadius={80} dataKey="value" label={({ name, value }: any) => `${name ?? ''}: ${value ?? 0}`}>
                  {(vehicleStatusData ?? [])?.map((_: any, i: number) => <Cell key={i} fill={COLORS?.[i % COLORS.length] ?? '#ccc'} />)}
                </Pie>
                <Tooltip contentStyle={{ fontSize: 11 }} />
                <Legend verticalAlign="top" wrapperStyle={{ fontSize: 11 }} />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* Leads by source */}
        <div className="bg-white rounded-xl p-6 shadow-sm">
          <h3 className="font-semibold text-lg mb-4">{t.admin.reports.leadsBySource}</h3>
          <div className="h-64">
            {(leadsBySourceData?.length ?? 0) > 0 ? (
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie data={leadsBySourceData} cx="50%" cy="50%" outerRadius={80} dataKey="value" label={({ name, value }: any) => `${name ?? ''}: ${value ?? 0}`}>
                    {(leadsBySourceData ?? [])?.map((_: any, i: number) => <Cell key={i} fill={COLORS?.[(i + 2) % COLORS.length] ?? '#ccc'} />)}
                  </Pie>
                  <Tooltip contentStyle={{ fontSize: 11 }} />
                  <Legend verticalAlign="top" wrapperStyle={{ fontSize: 11 }} />
                </PieChart>
              </ResponsiveContainer>
            ) : <p className="text-sm text-gray-400 text-center pt-20">{t.admin.dashboard.noData}</p>}
          </div>
        </div>

        {/* Top viewed vehicles */}
        <div className="bg-white rounded-xl p-6 shadow-sm">
          <h3 className="font-semibold text-lg mb-4">{t.admin.reports.topViewed}</h3>
          <div className="h-64">
            {(topViewedData?.length ?? 0) > 0 ? (
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={topViewedData} margin={{ bottom: 40, left: 10 }}>
                  <XAxis dataKey="name" tickLine={false} tick={{ fontSize: 10 }} angle={-45} textAnchor="end" height={60} />
                  <YAxis tickLine={false} tick={{ fontSize: 10 }} />
                  <Tooltip contentStyle={{ fontSize: 11 }} />
                  <Bar dataKey="views" fill="#DC2626" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            ) : <p className="text-sm text-gray-400 text-center pt-20">{t.admin.dashboard.noData}</p>}
          </div>
        </div>

        {/* Leads by month */}
        <div className="bg-white rounded-xl p-6 shadow-sm">
          <h3 className="font-semibold text-lg mb-4">{t.admin.reports.leadsByMonth}</h3>
          <div className="h-64">
            {(leadsByMonthData?.length ?? 0) > 0 ? (
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={leadsByMonthData} margin={{ bottom: 20, left: 10 }}>
                  <XAxis dataKey="month" tickLine={false} tick={{ fontSize: 10 }} />
                  <YAxis tickLine={false} tick={{ fontSize: 10 }} />
                  <Tooltip contentStyle={{ fontSize: 11 }} />
                  <Line type="monotone" dataKey="count" stroke="#DC2626" strokeWidth={2} dot={{ fill: '#DC2626' }} />
                </LineChart>
              </ResponsiveContainer>
            ) : <p className="text-sm text-gray-400 text-center pt-20">{t.admin.dashboard.noData}</p>}
          </div>
        </div>
      </div>
    </div>
  );
}