import React, { useCallback, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";

import {
  Box,
  Button,
  Checkbox,
  Chip,
  LinearProgress,
  Menu,
  MenuItem,
  Paper,
  Stack,
  Typography,
} from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";
import { alpha, useTheme } from "@mui/material/styles";
import TuneIcon from "@mui/icons-material/Tune";
import TrendingUpIcon from "@mui/icons-material/TrendingUp";
import MailOutlineIcon from "@mui/icons-material/MailOutline";
import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
import AutoGraphIcon from "@mui/icons-material/AutoGraph";

import { api } from "../api";
import ViewStateNotice from "./ViewStateNotice";
import OnboardingChecklist from "./OnboardingChecklist";
import { getUserKeyFromToken } from "../themePrefs";
import { useI18n } from "../i18n/I18nProvider";
import { statusLabel } from "../pipeline";
import { buildWorkflowPath, getWorkflowAction } from "../jobWorkflowSignals";
import { JobApplication } from "../types";
import { useViewResource } from "../hooks/useViewResource";

interface JobStats {
  total: number;
  active: number;
  deleted: number;
  byStatus: Record<string, number>;
  appliedLast30Days: number;
  averageDaysSinceApplied: number;
}

type ReminderJob = JobApplication;

type AnalyticsPoint = { month: string; applied: number; responses: number };
type TagPoint = { tag: string; count: number };
type OverviewAnalytics = {
  funnel: { label: string; count: number }[];
  responseRateBySource: { label: string; total: number; responses: number; rate: number }[];
  topCompanies: { companyId: number; company: string; count: number; responses: number; responseRate: number }[];
  medianDaysToFirstResponse?: number | null;
  totalResponses: number;
  totalActive: number;
  timeInStage?: { stage: string; medianDays: number; count: number }[];
};
type TagTrendResponse = { months: string[]; series: { tag: string; counts: number[] }[] };

type Prefs = {
  cards: boolean;
  activity: boolean;
  funnel: boolean;
  companies: boolean;
  skills: boolean;
};

function prefsKey() {
  return `dashboardPrefs:${getUserKeyFromToken()}`;
}

function loadPrefs(): Prefs {
  try {
    const raw = window.localStorage.getItem(prefsKey());
    if (!raw) return { cards: true, activity: true, funnel: true, companies: true, skills: true };
    return { cards: true, activity: true, funnel: true, companies: true, skills: true, ...JSON.parse(raw) };
  } catch {
    return { cards: true, activity: true, funnel: true, companies: true, skills: true };
  }
}

function savePrefs(next: Prefs) {
  window.localStorage.setItem(prefsKey(), JSON.stringify(next));
}

function clamp(n: number, a: number, b: number) {
  return Math.max(a, Math.min(b, n));
}

function buildLinePath(values: number[], width: number, height: number) {
  if (!values.length) return "";
  const min = Math.min(...values);
  const max = Math.max(...values);
  const step = width / Math.max(1, values.length - 1);
  const yFor = (value: number) => {
    const t = max === min ? 0.5 : (value - min) / (max - min);
    return height - t * height;
  };

  return values
    .map((value, index) => `${index === 0 ? "M" : "L"} ${Math.round(index * step)} ${Math.round(yFor(value))}`)
    .join(" ");
}

function MiniSpark({ values, color }: { values: number[]; color: string }) {
  const width = 180;
  const height = 52;
  const path = buildLinePath(values, width, height);

  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <path d={path} fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}

function SectionCard({ children, sx = {} }: { children: React.ReactNode; sx?: any }) {
  return (
    <Paper
      sx={{
        p: { xs: 1.5, sm: 2.25 },
        borderRadius: 4,
        border: "1px solid",
        borderColor: "divider",
        background: "background.paper",
        boxShadow: "0 18px 50px rgba(15, 23, 42, 0.06)",
        ...sx,
      }}
    >
      {children}
    </Paper>
  );
}

export default function DashboardView() {
  const theme = useTheme();
  const isMobile = useMediaQuery("(max-width:767.95px)");
  const navigate = useNavigate();
  const { t } = useI18n();
  const [months, setMonths] = useState<6 | 12 | 24>(12);
  const [prefs, setPrefs] = useState<Prefs>(() => loadPrefs());
  const [prefsAnchor, setPrefsAnchor] = useState<HTMLElement | null>(null);
  const loadSummary = useCallback(async () => {
    const [statsResponse, overviewResponse, remindersResponse] = await Promise.all([
      api.get<JobStats>("/jobapplications/stats"),
      api.get<OverviewAnalytics>("/jobapplications/analytics-overview"),
      api.get<ReminderJob[]>("/jobapplications/reminders", { params: { upcomingDays: 14 } }),
    ]);

    return {
      stats: statsResponse.data,
      overview: overviewResponse.data,
      reminderJobs: Array.isArray(remindersResponse.data) ? remindersResponse.data : [],
    };
  }, []);

  const summaryResource = useViewResource(
    loadSummary,
    {
      initialData: { stats: null as JobStats | null, overview: null as OverviewAnalytics | null, reminderJobs: [] as ReminderJob[] },
      errorMessage: "Unable to load dashboard summary data right now.",
      deps: [],
    },
  );

  const loadTrends = useCallback(async () => {
    const params = { months };
    const [analyticsResponse, tagsResponse, trendsResponse] = await Promise.all([
      api.get<AnalyticsPoint[]>("/jobapplications/analytics", { params }),
      api.get<TagPoint[]>("/jobapplications/tags", { params: { limit: 10, ...params } }),
      api.get<TagTrendResponse>("/jobapplications/tag-trends", { params: { months, limit: 5 } }),
    ]);

    return {
      analytics: analyticsResponse.data ?? [],
      tags: tagsResponse.data ?? [],
      tagTrends: trendsResponse.data,
    };
  }, [months]);

  const trendsResource = useViewResource(
    loadTrends,
    {
      initialData: { analytics: [] as AnalyticsPoint[], tags: [] as TagPoint[], tagTrends: null as TagTrendResponse | null },
      errorMessage: "Unable to load dashboard trends right now.",
      deps: [months],
    },
  );

  const stats = summaryResource.data.stats;
  const overview = summaryResource.data.overview;
  const reminderJobs = summaryResource.data.reminderJobs;
  const analytics = trendsResource.data.analytics;
  const tags = trendsResource.data.tags;
  const tagTrends = trendsResource.data.tagTrends;

  const tagColors = useMemo(
    () => [theme.palette.primary.main, theme.palette.success.main, theme.palette.warning.main, theme.palette.info.main, theme.palette.error.main],
    [theme.palette.error.main, theme.palette.info.main, theme.palette.primary.main, theme.palette.success.main, theme.palette.warning.main],
  );

  const summaryView = useMemo(() => {
    const topSource = overview?.responseRateBySource?.[0];
    const missingCvCount = reminderJobs.filter((job) => job.workflowSignal?.hasPackageGap).length;

    return {
      funnelMax: overview?.funnel?.length ? Math.max(...overview.funnel.map((item) => item.count)) : 0,
      topSource,
      missingCvCount,
      priorityJobs: reminderJobs.slice(0, 5),
    };
  }, [overview, reminderJobs]);

  const trendsView = useMemo(() => {
    const appliedValues = analytics.map((x) => x.applied);
    const responseValues = analytics.map((x) => x.responses);
    const chartWidth = isMobile ? Math.max(420, analytics.length * 70) : 860;
    const chartHeight = isMobile ? 210 : 250;
    const totalApplied = appliedValues.reduce((sum, value) => sum + value, 0);
    const totalResponses = responseValues.reduce((sum, value) => sum + value, 0);
    const maxTagCount = Math.max(...tags.map((item) => item.count), 1);

    return {
      appliedValues,
      responseValues,
      chartWidth,
      chartHeight,
      appliedPath: buildLinePath(appliedValues, chartWidth, chartHeight),
      responsePath: buildLinePath(responseValues, chartWidth, chartHeight),
      totalApplied,
      totalResponses,
      responseRate: totalApplied > 0 ? Math.round((totalResponses / totalApplied) * 100) : 0,
      maxTagCount,
    };
  }, [analytics, isMobile, tags]);

  const metricCards = useMemo(() => ([
    {
      label: t("dashboardActiveApplications"),
      value: stats?.active ?? 0,
      sub: t("dashboardCurrentlyInProgress"),
      icon: <TrendingUpIcon fontSize="small" />,
      tone: theme.palette.primary.main,
      spark: trendsView.appliedValues,
    },
    {
      label: t("dashboardApplied30Days"),
      value: stats?.appliedLast30Days ?? 0,
      sub: t("dashboardNewApplications"),
      icon: <AutoGraphIcon fontSize="small" />,
      tone: theme.palette.success.main,
      spark: trendsView.appliedValues.slice(-6),
    },
    {
      label: t("dashboardMedianFirstResponse"),
      value: overview?.medianDaysToFirstResponse ?? "—",
      sub: t("dashboardDaysUntilFirstReply"),
      icon: <MailOutlineIcon fontSize="small" />,
      tone: theme.palette.info.main,
      spark: trendsView.responseValues,
    },
    {
      label: t("dashboardResponsesLogged"),
      value: overview?.totalResponses ?? 0,
      sub: t("dashboardAcrossActiveJobs"),
      icon: <BusinessOutlinedIcon fontSize="small" />,
      tone: theme.palette.warning.main,
      spark: trendsView.responseValues.slice(-6),
    },
  ]), [overview?.medianDaysToFirstResponse, overview?.totalResponses, stats?.active, stats?.appliedLast30Days, t, theme.palette.info.main, theme.palette.primary.main, theme.palette.success.main, theme.palette.warning.main, trendsView.appliedValues, trendsView.responseValues]);

  const togglePref = useCallback((key: keyof Prefs) => {
    setPrefs((current) => {
      const next = { ...current, [key]: !current[key] };
      savePrefs(next);
      return next;
    });
  }, []);

  const getReminderAction = useCallback((job: ReminderJob) => getWorkflowAction(job, {
    packageWork: t("jobTablePackageWork"),
    followUp: t("jobTableFollowUp"),
    interviewPrep: t("jobTableInterviewStage"),
    readiness: t("jobTableReadiness"),
  }), [t]);

  const openReminderJob = useCallback((job: ReminderJob) => {
    navigate(buildWorkflowPath(job));
  }, [navigate]);

  return (
    <Box>
      <OnboardingChecklist hasJobs={(stats?.total ?? 0) > 0} />
      <SectionCard
        sx={{
          backgroundColor: "background.paper",
          borderColor: theme.palette.mode === "dark" ? alpha(theme.palette.primary.main, 0.22) : "divider",
          boxShadow: theme.palette.mode === "dark"
            ? `0 20px 48px ${alpha(theme.palette.common.black, 0.34)}`
            : "0 18px 50px rgba(15, 23, 42, 0.06)",
          overflow: "hidden",
          position: "relative",
          '&::before': {
            content: '""',
            position: 'absolute',
            inset: 0,
            pointerEvents: 'none',
            background: theme.palette.mode === 'dark'
              ? `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.14)}, transparent 42%)`
              : `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)}, transparent 42%)`,
          },
        }}
      >
        <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "flex-start" }}>
          <Box sx={{ maxWidth: 760 }}>
            <Typography variant="overline" sx={{ color: theme.palette.primary.main, fontWeight: 800 }}>
              {t("dashboardHeroLabel")}
            </Typography>
            <Typography variant="h4" sx={{ fontWeight: 950, mt: 0.5, letterSpacing: -0.6, color: "text.primary", overflowWrap: "anywhere" }}>
              {t("dashboardOverviewTitle")}
            </Typography>
            <Typography variant="body1" sx={{ color: "text.secondary", mt: 1.25, maxWidth: 680 }}>
              {t("dashboardOverviewBody")}
            </Typography>

            <Stack direction={{ xs: "column", md: "row" }} spacing={1.25} sx={{ mt: 2.25, flexWrap: "wrap" }}>
              <Chip color="primary" variant="outlined" label={t("dashboardResponseRate", { rate: trendsView.responseRate })} />
              <Chip variant="outlined" label={`${summaryView.missingCvCount} ${t("dashboardMissingTailoredCv").toLowerCase()}`} />
              <Chip variant="outlined" label={summaryView.topSource ? `${summaryView.topSource.label}: ${summaryView.topSource.rate}%` : t("dashboardResponseSources")} />
            </Stack>
          </Box>

          <Box
            sx={{
              display: "flex",
              gap: 1,
              flexWrap: "wrap",
              alignItems: "center",
              width: { xs: "100%", sm: "auto" },
              '& .MuiButton-root': {
                flex: { xs: '1 1 calc(50% - 8px)', sm: '0 0 auto' },
              },
            }}
          >
            {([6, 12, 24] as const).map((m) => (
              <Button key={m} size="small" variant={months === m ? "contained" : "outlined"} onClick={() => setMonths(m)}>
                {t("dashboardMonthsShort", { count: m })}
              </Button>
            ))}
            <Button variant="outlined" startIcon={<TuneIcon />} onClick={(e) => setPrefsAnchor(e.currentTarget)}>
              {t("dashboardCustomize")}
            </Button>
            <Menu anchorEl={prefsAnchor} open={Boolean(prefsAnchor)} onClose={() => setPrefsAnchor(null)}>
              {[
                ["cards", t("dashboardSummaryCards")],
                ["activity", t("dashboardActivityChart")],
                ["funnel", t("dashboardConversionFunnel")],
                ["companies", t("dashboardTopCompanies")],
                ["skills", t("dashboardSkillsInsights")],
              ].map(([key, label]) => (
                <MenuItem key={key} onClick={() => togglePref(key as keyof Prefs)}>
                  <Checkbox checked={prefs[key as keyof Prefs]} />
                  {label}
                </MenuItem>
              ))}
            </Menu>
          </Box>
        </Box>
      </SectionCard>

      <ViewStateNotice
        loading={summaryResource.loading}
        error={summaryResource.error}
        title="Unable to load dashboard summary"
        description="The dashboard summary is unavailable right now."
        onRetry={summaryResource.reload}
      />
      <ViewStateNotice
        loading={trendsResource.loading}
        error={trendsResource.error}
        title="Unable to load dashboard trends"
        description="Charts and trend panels could not reach the API."
        onRetry={trendsResource.reload}
        compact
      />

      {!summaryResource.loading && !summaryResource.error && prefs.cards ? (
        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)", xl: "repeat(4, 1fr)" }, gap: 2, mt: 2 }}>
          {metricCards.map((card) => (
            <SectionCard key={card.label}>
              <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2 }}>
                <Box>
                  <Typography variant="overline" sx={{ color: "text.secondary" }}>{card.label}</Typography>
                  <Typography variant="h4" sx={{ fontWeight: 950, mt: 0.5 }}>{card.value}</Typography>
                  <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.75 }}>{card.sub}</Typography>
                </Box>
                <Box sx={{ width: 42, height: 42, borderRadius: 3, display: "grid", placeItems: "center", backgroundColor: alpha(card.tone, 0.12), color: card.tone }}>
                  {card.icon}
                </Box>
              </Box>
              <Box sx={{ mt: 1.5, overflowX: "auto" }}>
                <MiniSpark values={card.spark.length ? card.spark : [0, 0, 0]} color={alpha(card.tone, 0.95)} />
              </Box>
            </SectionCard>
          ))}
        </Box>
      ) : null}

      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", xl: "minmax(0, 1.8fr) minmax(320px, 0.9fr)" }, gap: 2, mt: 2 }}>
        {!summaryResource.loading && !summaryResource.error && prefs.activity ? (
          <SectionCard>
            <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "flex-start" }}>
              <Box>
                <Typography variant="h6" sx={{ fontWeight: 950 }}>{t("dashboardApplicationActivity")}</Typography>
                <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("dashboardMonthlyApplicationsResponses")}</Typography>
              </Box>
              <Stack direction="row" spacing={1} flexWrap="wrap">
                <Chip size="small" label={t("dashboardAppliedCount", { count: trendsView.totalApplied })} variant="outlined" />
                <Chip size="small" label={t("dashboardResponsesCount", { count: trendsView.totalResponses })} variant="outlined" />
              </Stack>
            </Box>

            <Box sx={{ mt: 2, overflowX: "auto", mx: isMobile ? -0.5 : 0, px: isMobile ? 0.5 : 0 }}>
              <Box sx={{ minWidth: trendsView.chartWidth }}>
                <svg width={trendsView.chartWidth} height={trendsView.chartHeight} viewBox={`0 0 ${trendsView.chartWidth} ${trendsView.chartHeight}`}>
                  {[0.2, 0.4, 0.6, 0.8].map((tick) => (
                    <line
                      key={tick}
                      x1="0"
                      x2={trendsView.chartWidth}
                      y1={Math.round(trendsView.chartHeight * tick)}
                      y2={Math.round(trendsView.chartHeight * tick)}
                      stroke={alpha(theme.palette.text.primary, 0.08)}
                      strokeDasharray="6 6"
                    />
                  ))}
                  {trendsView.responsePath ? <path d={trendsView.responsePath} fill="none" stroke={alpha(theme.palette.info.main, 0.95)} strokeWidth="3" strokeLinecap="round" /> : null}
                  {trendsView.appliedPath ? <path d={trendsView.appliedPath} fill="none" stroke={alpha(theme.palette.success.main, 0.95)} strokeWidth="3" strokeLinecap="round" /> : null}
                </svg>
                <Box sx={{ display: "flex", justifyContent: "space-between", mt: 1 }}>
                  {analytics.map((point) => (
                    <Typography key={point.month} variant="caption" sx={{ width: `${100 / Math.max(1, analytics.length)}%`, textAlign: "center", color: "text.secondary" }}>
                      {point.month.slice(5)}
                    </Typography>
                  ))}
                </Box>
              </Box>
            </Box>
          </SectionCard>
        ) : null}

        {!summaryResource.loading && !summaryResource.error ? (
          <SectionCard>
          <Typography variant="h6" sx={{ fontWeight: 950 }}>{t("dashboardConversionFunnelTitle")}</Typography>
          <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("dashboardResponseSources")}</Typography>
          <Stack spacing={1.2}>
            {(overview?.funnel ?? []).map((item) => {
              const width = summaryView.funnelMax ? clamp((item.count / summaryView.funnelMax) * 100, 0, 100) : 0;
              return (
                <Box key={item.label}>
                  <Box sx={{ display: "flex", justifyContent: "space-between", mb: 0.5, gap: 1 }}>
                    <Typography variant="body2" sx={{ fontWeight: 700 }}>{statusLabel(t, item.label)}</Typography>
                    <Typography variant="body2" sx={{ color: "text.secondary" }}>{item.count}</Typography>
                  </Box>
                  <LinearProgress
                    variant="determinate"
                    value={width}
                    sx={{
                      height: 10,
                      borderRadius: 999,
                      backgroundColor: alpha(theme.palette.primary.main, 0.08),
                      '& .MuiLinearProgress-bar': {
                        borderRadius: 999,
                        background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${alpha(theme.palette.success.main, 0.85)})`,
                      },
                    }}
                  />
                </Box>
              );
            })}
          </Stack>

          {overview?.timeInStage?.length ? (
            <Box sx={{ mt: 2.25 }}>
              <Typography variant="body2" sx={{ fontWeight: 800, mb: 1 }}>{t("dashboardTimeInStageTitle")}</Typography>
              <Stack spacing={0.75}>
                {overview.timeInStage.map((item) => (
                  <Box key={item.stage} sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1 }}>
                    <Typography variant="body2" sx={{ fontWeight: 700 }}>{statusLabel(t, item.stage)}</Typography>
                    <Typography variant="body2" sx={{ color: "text.secondary" }}>
                      {t("dashboardTimeInStageValue", { days: item.medianDays, count: item.count })}
                    </Typography>
                  </Box>
                ))}
              </Stack>
            </Box>
          ) : null}

          <Box sx={{ mt: 2.25, p: 1.5, borderRadius: 3, backgroundColor: alpha(theme.palette.primary.main, 0.05) }}>
            <Typography variant="body2" sx={{ fontWeight: 800 }}>{summaryView.topSource?.label ?? t("dashboardResponseSources")}</Typography>
            <Typography variant="h5" sx={{ fontWeight: 950, mt: 0.5 }}>{summaryView.topSource ? `${summaryView.topSource.rate}%` : "—"}</Typography>
            <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
              {summaryView.topSource ? t("dashboardResponseConversion", { responses: summaryView.topSource.responses, total: summaryView.topSource.total }) : t("dashboardNoSourceData")}
            </Typography>
          </Box>
        </SectionCard>
        ) : null}
      </Box>

      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", xl: "1.15fr 0.85fr" }, gap: 2, mt: 2 }}>
        {!summaryResource.loading && !summaryResource.error ? (
        <SectionCard>
          <Typography variant="h6" sx={{ fontWeight: 950, mb: 1 }}>{t("remindersTitle")}</Typography>
          <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("remindersSubtitle")}</Typography>
          {summaryView.priorityJobs.length === 0 ? (
            <Typography sx={{ color: "text.secondary" }}>{t("remindersNothing")}</Typography>
          ) : (
            <Stack spacing={1.1}>
              {summaryView.priorityJobs.map((job) => {
                const action = getReminderAction(job);
                return (
                  <Box key={job.id} sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: alpha(theme.palette.primary.main, 0.03), display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
                    <Box sx={{ minWidth: 0 }}>
                      <Typography sx={{ fontWeight: 900, overflowWrap: "anywhere" }}>{job.company?.name ?? t("jobTableCompany")} • {job.jobTitle}</Typography>
                      <Typography variant="body2" sx={{ color: "text.secondary", overflowWrap: "anywhere" }}>{action?.detail ?? job.workflowSignal?.reason ?? job.followUpReason ?? t("remindersFollowUpLabel")}</Typography>
                    </Box>
                    <Button variant="outlined" onClick={() => openReminderJob(job)} sx={{ width: { xs: "100%", sm: "auto" } }}>
                      {action?.label ?? t("remindersOpen")}
                    </Button>
                  </Box>
                );
              })}
            </Stack>
          )}
          <Box sx={{ mt: 1.5 }}>
            <Button variant="text" onClick={() => navigate('/reminders')}>{t("reminders")}</Button>
          </Box>
        </SectionCard>
        ) : null}

        {!summaryResource.loading && !summaryResource.error && prefs.companies ? (
          <SectionCard>
            <Typography variant="h6" sx={{ fontWeight: 950, mb: 1 }}>{t("dashboardTopCompaniesByActivity")}</Typography>
            <Stack spacing={1.25}>
              {(overview?.topCompanies ?? []).map((item, index) => (
                <Box key={item.companyId} sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: alpha(theme.palette.primary.main, index === 0 ? 0.05 : 0.02) }}>
                  <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
                    <Box sx={{ minWidth: 0 }}>
                      <Typography sx={{ fontWeight: 900, overflowWrap: "anywhere" }}>{item.company}</Typography>
                      <Typography variant="body2" sx={{ color: "text.secondary", overflowWrap: "anywhere" }}>{t("dashboardCompanyJobsResponses", { jobs: item.count, responses: item.responses })}</Typography>
                    </Box>
                    <Chip label={`${item.responseRate}%`} color={item.responseRate >= 50 ? "success" : item.responseRate >= 25 ? "warning" : "default"} variant="outlined" />
                  </Box>
                </Box>
              ))}
            </Stack>
          </SectionCard>
        ) : null}

        {!trendsResource.loading && !trendsResource.error && prefs.skills ? (
          <SectionCard>
            <Typography variant="h6" sx={{ fontWeight: 950, mb: 1 }}>{t("dashboardTopSkills")}</Typography>
            {tags.length === 0 ? (
              <Typography sx={{ color: "text.secondary" }}>{t("dashboardNoTagsYet")}</Typography>
            ) : (
              <Stack spacing={1.15}>
                {tags.slice(0, 8).map((tag, index) => {
                  const max = Math.max(...tags.map((item) => item.count), 1);
                  const width = (tag.count / max) * 100;
                  return (
                    <Box key={tag.tag}>
                      <Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, mb: 0.5 }}>
                        <Typography variant="body2" sx={{ fontWeight: 800, overflowWrap: "anywhere" }}>{tag.tag}</Typography>
                        <Typography variant="body2" sx={{ color: "text.secondary" }}>{tag.count}</Typography>
                      </Box>
                      <Box sx={{ height: 10, borderRadius: 999, bgcolor: alpha(theme.palette.text.primary, 0.08), overflow: "hidden" }}>
                        <Box sx={{ width: `${width}%`, height: "100%", borderRadius: 999, bgcolor: tagColors[index % tagColors.length] }} />
                      </Box>
                    </Box>
                  );
                })}
              </Stack>
            )}

            <Typography variant="h6" sx={{ fontWeight: 950, mt: 3, mb: 1 }}>{t("dashboardSkillTrends")}</Typography>
            {!tagTrends || tagTrends.series.length === 0 ? (
              <Typography sx={{ color: "text.secondary" }}>{t("dashboardNoTagTrendData")}</Typography>
            ) : (
              <Stack spacing={1.1}>
                {tagTrends.series.map((series, index) => (
                  <Box key={series.tag}>
                    <Box sx={{ display: "flex", justifyContent: "space-between", mb: 0.5, gap: 1 }}>
                      <Typography variant="body2" sx={{ fontWeight: 800, overflowWrap: "anywhere" }}>{series.tag}</Typography>
                      <Typography variant="caption" sx={{ color: "text.secondary" }}>{series.counts.reduce((sum, value) => sum + value, 0)} total</Typography>
                    </Box>
                    <Box sx={{ display: "grid", gridTemplateColumns: `repeat(${series.counts.length}, 1fr)`, gap: 0.5 }}>
                      {series.counts.map((count, i) => (
                        <Box
                          key={`${series.tag}-${i}`}
                          sx={{
                            height: 18,
                            borderRadius: 1.25,
                            backgroundColor: count > 0 ? alpha(tagColors[index % tagColors.length], 0.22 + Math.min(0.6, count / 10)) : alpha(theme.palette.text.primary, 0.05),
                          }}
                          title={`${tagTrends.months[i]}: ${count}`}
                        />
                      ))}
                    </Box>
                  </Box>
                ))}
              </Stack>
            )}
          </SectionCard>
        ) : null}
      </Box>
    </Box>
  );
}