nextcraft/apps/web/components/employer/analytics-charts.tsx

'use client';

import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Line,
  LineChart,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import { colors } from '@nextcraft/ui';

/* -------------------------------------------------------------------------- */
/*  Mock chart data                                                           */
/* -------------------------------------------------------------------------- */

const postingsData = [
  { month: 'Apr', postings: 4, applications: 38 },
  { month: 'May', postings: 6, applications: 62 },
  { month: 'Jun', postings: 5, applications: 51 },
  { month: 'Jul', postings: 8, applications: 84 },
  { month: 'Aug', postings: 9, applications: 112 },
  { month: 'Sep', postings: 7, applications: 142 },
];

const sourceData = [
  { name: 'Direct', value: 40, color: colors.primary[500] },
  { name: 'AI Match', value: 30, color: colors.accent[500] },
  { name: 'Referral', value: 20, color: colors.violet[400] },
  { name: 'Job Board', value: 10, color: colors.amber[400] },
];

const placementData = [
  { month: 'Apr', placements: 2 },
  { month: 'May', placements: 5 },
  { month: 'Jun', placements: 9 },
  { month: 'Jul', placements: 14 },
  { month: 'Aug', placements: 21 },
  { month: 'Sep', placements: 28 },
];

/* -------------------------------------------------------------------------- */
/*  Shared styling                                                            */
/* -------------------------------------------------------------------------- */

const tooltipStyle = {
  borderRadius: 8,
  border: `1px solid ${colors.neutral[200]}`,
  fontSize: 12,
  background: '#ffffff',
} as const;

const axisTick = { fontSize: 12, fill: colors.neutral[500] } as const;

/* -------------------------------------------------------------------------- */
/*  Component                                                                 */
/* -------------------------------------------------------------------------- */

export function AnalyticsCharts() {
  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
      {/* Bar chart — Postings vs Applications */}
      <div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
        <h3 className="mb-1 text-sm font-semibold text-slate-900 dark:text-slate-100">
          Postings vs Applications
        </h3>
        <p className="mb-4 text-xs text-slate-500 dark:text-slate-400">Last 6 months</p>
        <div className="h-56 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={postingsData} margin={{ top: 4, right: 8, left: -16, bottom: 0 }}>
              <CartesianGrid strokeDasharray="3 3" stroke={colors.neutral[200]} className="dark:opacity-20" />
              <XAxis dataKey="month" tick={axisTick} stroke={colors.neutral[300]} />
              <YAxis tick={axisTick} stroke={colors.neutral[300]} />
              <Tooltip
                contentStyle={tooltipStyle}
                cursor={{ fill: 'rgba(99,102,241,0.06)' }}
              />
              <Legend wrapperStyle={{ fontSize: 12 }} />
              <Bar dataKey="postings" fill={colors.primary[500]} radius={[4, 4, 0, 0]} name="Postings" />
              <Bar dataKey="applications" fill={colors.accent[500]} radius={[4, 4, 0, 0]} name="Applications" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Donut chart — Applicant Sources */}
      <div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
        <h3 className="mb-1 text-sm font-semibold text-slate-900 dark:text-slate-100">
          Applicant Sources
        </h3>
        <p className="mb-4 text-xs text-slate-500 dark:text-slate-400">Where candidates come from</p>
        <div className="h-56 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={sourceData}
                dataKey="value"
                nameKey="name"
                cx="50%"
                cy="50%"
                innerRadius={50}
                outerRadius={80}
                paddingAngle={3}
              >
                {sourceData.map((entry) => (
                  <Cell key={entry.name} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip contentStyle={tooltipStyle} formatter={(v: number) => `${v}%`} />
              <Legend wrapperStyle={{ fontSize: 12 }} />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Line chart — Placement Trends */}
      <div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
        <h3 className="mb-1 text-sm font-semibold text-slate-900 dark:text-slate-100">
          Placement Trends
        </h3>
        <p className="mb-4 text-xs text-slate-500 dark:text-slate-400">Cumulative placements</p>
        <div className="h-56 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={placementData} margin={{ top: 4, right: 8, left: -16, bottom: 0 }}>
              <defs>
                <linearGradient id="placementStroke" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stopColor={colors.primary[500]} />
                  <stop offset="100%" stopColor={colors.accent[500]} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke={colors.neutral[200]} />
              <XAxis dataKey="month" tick={axisTick} stroke={colors.neutral[300]} />
              <YAxis tick={axisTick} stroke={colors.neutral[300]} />
              <Tooltip contentStyle={tooltipStyle} />
              <Line
                type="monotone"
                dataKey="placements"
                stroke="url(#placementStroke)"
                strokeWidth={3}
                dot={{ r: 4, fill: colors.primary[600] }}
                activeDot={{ r: 6 }}
                name="Cumulative placements"
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
}