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

import {
  Box,
  Button,
  Card,
  Checkbox,
  Chip,
  LinearProgress,
  Menu,
  MenuItem,
  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 ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";

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 }[];
  salaryInsights?: { currency: string; period: string; count: number; minimum: number; maximum: number; averageMidpoint: 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(" ");
}

// Mockup cards float on the grey page background purely via the theme's Card shadow/radius --
// this wraps MuiCard instead of Paper-with-hardcoded-shadow so every section stays in sync with
// theme.ts (see 02-dashboard.png).
function SectionCard({ children, sx = {} }: { children: React.ReactNode; sx?: any }) {
  return (
    <Card sx={{ p: "var(--app-card-padding)", ...sx }}>
      {children}
    </Card>
  );
}

// "Needs your attention" row accent -- red for overdue follow-ups, amber for interview prep,
// blue/info for everything else (package work, readiness review). No "positive/offer" tier
// exists in the real reminder feed (see DashboardView report), so only these three appear.
function reminderTone(job: ReminderJob): "error" | "warning" | "info" {
  const key = job.workflowSignal?.actionKey;
  if (key === "follow-up") return "error";
  if (key === "interview-prep") return "warning";
  return "info";
}

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: t("dashboardSummaryUnavailableTitle"),
      deps: [t],
    },
  );

  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: t("dashboardTrendsUnavailableTitle"),
      deps: [months, t],
    },
  );

  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;
    const interviewCount = overview?.funnel?.find((item) => item.label === "Interview")?.count ?? 0;
    const interviewPrepCount = reminderJobs.filter((job) => job.workflowSignal?.actionKey === "interview-prep").length;
    const overdueFollowUpCount = reminderJobs.filter((job) => job.workflowSignal?.actionKey === "follow-up").length;

    return {
      funnelMax: overview?.funnel?.length ? Math.max(...overview.funnel.map((item) => item.count)) : 0,
      topSource,
      missingCvCount,
      interviewCount,
      interviewPrepCount,
      overdueFollowUpCount,
      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 = 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]);

  // Mockup's 4 stat tiles (Active applications / Response rate / Interviews / Needs follow-up)
  // -- every value below is derived from data this view already fetches, no new endpoints.
  const metricCards = useMemo(() => {
    const cards: { label: string; value: string | number; trend?: { text: string; tone: "success" | "error" }; caption?: string }[] = [
      {
        label: t("dashboardActiveApplications"),
        value: stats?.active ?? 0,
        trend: (stats?.appliedLast30Days ?? 0) > 0
          ? { text: `+${stats?.appliedLast30Days} ${t("dashboardNewApplications").toLowerCase()}`, tone: "success" }
          : undefined,
      },
      {
        label: t("dashboardResponseRateTile"),
        value: `${trendsView.responseRate}%`,
        caption: summaryView.topSource ? `${summaryView.topSource.label} · ${summaryView.topSource.rate}%` : t("dashboardResponseSources"),
      },
      {
        label: t("dashboardInterviews"),
        value: summaryView.interviewCount,
        caption: summaryView.interviewPrepCount > 0 ? t("dashboardUpcomingCount", { count: summaryView.interviewPrepCount }) : undefined,
      },
      {
        label: t("dashboardFollowUpsDue"),
        value: reminderJobs.length,
        trend: summaryView.overdueFollowUpCount > 0
          ? { text: t("dashboardOverdueCount", { count: summaryView.overdueFollowUpCount }), tone: "error" }
          : undefined,
      },
    ];
    return cards;
  }, [reminderJobs.length, stats?.active, stats?.appliedLast30Days, summaryView.interviewCount, summaryView.interviewPrepCount, summaryView.overdueFollowUpCount, summaryView.topSource, t, trendsView.responseRate]);

  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]);

  const timeInStageMax = overview?.timeInStage?.length ? Math.max(...overview.timeInStage.map((item) => item.medianDays), 1) : 1;
  const hasJobs = (stats?.total ?? 0) > 0;
  const hasActivityData = analytics.some((item) => item.applied > 0 || item.responses > 0);
  const funnelItems = (overview?.funnel ?? []).filter((item) => item.count > 0);
  const hasStageData = Boolean(overview?.timeInStage?.length);
  const hasCompanies = Boolean(overview?.topCompanies?.length);
  const hasSkills = tags.length > 0;

  const priorityPanel = !summaryResource.loading && !summaryResource.error && hasJobs ? (
    <SectionCard>
      <Typography variant="h6" sx={{ mb: 0.5 }}>{t("dashboardTodayTitle")}</Typography>
      <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("dashboardTodayBody")}</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);
            const tone = reminderTone(job);
            const toneColor = theme.palette[tone].main;
            const urgent = tone === "error";
            return (
              <Box
                key={job.id}
                sx={{
                  p: 1.5,
                  pl: 2,
                  borderRadius: 2,
                  borderLeft: `4px solid ${toneColor}`,
                  backgroundColor: alpha(toneColor, 0.07),
                  display: "flex",
                  justifyContent: "space-between",
                  gap: 2,
                  alignItems: "center",
                  flexWrap: "wrap",
                }}
              >
                <Box sx={{ minWidth: 0, display: "flex", gap: 1.25, alignItems: "flex-start" }}>
                  <Box sx={{ width: 8, height: 8, mt: 0.75, borderRadius: "50%", backgroundColor: toneColor, flexShrink: 0 }} />
                  <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>
                </Box>
                <Button
                  variant="contained"
                  disableElevation
                  onClick={() => openReminderJob(job)}
                  sx={urgent
                    ? { width: { xs: "100%", sm: "auto" }, bgcolor: "text.primary", color: "background.paper", boxShadow: "none", "&:hover": { bgcolor: "text.primary", boxShadow: "none" } }
                    : { width: { xs: "100%", sm: "auto" }, bgcolor: alpha(toneColor, 0.15), color: toneColor, boxShadow: "none", "&:hover": { bgcolor: alpha(toneColor, 0.24), boxShadow: "none" } }}
                >
                  {action?.label ?? t("remindersOpen")}
                </Button>
              </Box>
            );
          })}
        </Stack>
      )}
      <Box sx={{ mt: 1.5 }}>
        <Button variant="text" onClick={() => navigate('/reminders')}>{t("reminders")}</Button>
      </Box>
    </SectionCard>
  ) : null;

  return (
    <Box>
      <OnboardingChecklist hasJobs={(stats?.total ?? 0) > 0} />

      {hasJobs ? <Box sx={{ mb: 2, display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
        <Stack direction={{ xs: "column", md: "row" }} spacing={1.25} sx={{ 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
          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> : null}

      <ViewStateNotice
        loading={summaryResource.loading}
        error={summaryResource.error}
        title={t("dashboardSummaryUnavailableTitle")}
        description={t("dashboardSummaryUnavailableBody")}
        onRetry={summaryResource.reload}
      />
      <ViewStateNotice
        loading={trendsResource.loading}
        error={trendsResource.error}
        title={t("dashboardTrendsUnavailableTitle")}
        description={t("dashboardTrendsUnavailableBody")}
        onRetry={trendsResource.reload}
        compact
      />

      {priorityPanel ? <Box sx={{ mt: 2 }}>{priorityPanel}</Box> : null}

      {!summaryResource.loading && !summaryResource.error && hasJobs && 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}
              sx={{
                transition: "box-shadow .2s, transform .2s",
                "&:hover": { boxShadow: 6, transform: "translateY(-2px)" },
              }}
            >
              <Typography variant="overline" sx={{ color: "text.secondary" }}>{card.label}</Typography>
              <Typography variant="h3" sx={{ mt: 0.5 }}>{card.value}</Typography>
              {card.trend || card.caption ? (
                <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, mt: 0.75 }}>
                  {card.trend ? (
                    <>
                      {card.trend.tone === "success" ? (
                        <ArrowUpwardIcon sx={{ fontSize: 14 }} color="success" />
                      ) : (
                        <ArrowDownwardIcon sx={{ fontSize: 14 }} color="error" />
                      )}
                      <Typography variant="body2" sx={{ fontWeight: 700, color: card.trend.tone === "success" ? "success.main" : "error.main" }}>
                        {card.trend.text}
                      </Typography>
                    </>
                  ) : (
                    <Typography variant="body2" sx={{ color: "text.secondary" }}>{card.caption}</Typography>
                  )}
                </Box>
              ) : null}
            </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 && hasActivityData && prefs.activity ? (
          <SectionCard>
            <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "flex-start" }}>
              <Box>
                <Typography variant="h6">{t("dashboardApplicationActivity")}</Typography>
                <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("dashboardMonthlyApplicationsResponses")}</Typography>
              </Box>
              <Stack direction="row" spacing={2} alignItems="center" flexWrap="wrap">
                <Stack direction="row" spacing={0.75} alignItems="center">
                  <Box sx={{ width: 10, height: 10, borderRadius: 0.75, backgroundColor: theme.palette.primary.main }} />
                  <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("dashboardAppliedCount", { count: trendsView.totalApplied })}</Typography>
                </Stack>
                <Stack direction="row" spacing={0.75} alignItems="center">
                  <Box sx={{ width: 10, height: 10, borderRadius: 0.75, backgroundColor: theme.palette.success.main }} />
                  <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("dashboardResponsesCount", { count: trendsView.totalResponses })}</Typography>
                </Stack>
              </Stack>
            </Box>

            <Box sx={{ mt: 2, minWidth: 0 }}>
              <Box sx={{ minWidth: 0 }}>
                <svg width="100%" height={trendsView.chartHeight} viewBox={`0 0 ${trendsView.chartWidth} ${trendsView.chartHeight}`} preserveAspectRatio="none" style={{ display: "block", maxWidth: "100%" }}>
                  {[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={theme.palette.success.main} strokeWidth="3" strokeLinecap="round" /> : null}
                  {trendsView.appliedPath ? <path d={trendsView.appliedPath} fill="none" stroke={theme.palette.primary.main} 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 && (hasStageData || funnelItems.length > 0 || summaryView.topSource) ? (
          <SectionCard>
          {overview?.timeInStage?.length ? (<>
            <Typography variant="h6">{t("dashboardTimeInStageTitle")}</Typography>
            <Stack spacing={1.25} sx={{ mt: 1.5 }}>
              {overview.timeInStage.map((item, index) => (
                <Box key={item.stage}>
                  <Box sx={{ display: "flex", justifyContent: "space-between", mb: 0.5, 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>
                  <LinearProgress
                    variant="determinate"
                    value={clamp((item.medianDays / timeInStageMax) * 100, 4, 100)}
                    sx={{
                      height: 8,
                      borderRadius: 999,
                      backgroundColor: alpha(theme.palette.text.primary, 0.06),
                      '& .MuiLinearProgress-bar': {
                        borderRadius: 999,
                        backgroundColor: tagColors[index % tagColors.length],
                      },
                    }}
                  />
                </Box>
              ))}
            </Stack>
          </>) : null}

          {tags.length ? (
            <Box sx={{ mt: 2.25 }}>
              <Typography variant="body2" sx={{ fontWeight: 800, mb: 1 }}>{t("dashboardTopSkills")}</Typography>
              <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.75 }}>
                {tags.slice(0, 4).map((tag) => (
                  <Chip
                    key={tag.tag}
                    size="small"
                    label={`${tag.tag} · ${tag.count}`}
                    sx={{ backgroundColor: alpha(theme.palette.primary.main, 0.1), color: "primary.main", fontWeight: 700 }}
                  />
                ))}
              </Box>
            </Box>
          ) : null}

          {funnelItems.length > 0 ? <>
          <Typography variant="h6" sx={{ mt: hasStageData || hasSkills ? 2.25 : 0 }}>{t("dashboardConversionFunnelTitle")}</Typography>
          <Stack spacing={1.2} sx={{ mt: 1 }}>
            {funnelItems.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>
          </> : null}

          {summaryView.topSource ? <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={{ 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> : null}
        </SectionCard>
        ) : null}
      </Box>


      {(overview?.salaryInsights?.length ?? 0) > 0 ? (
        <Box sx={{ mt: 2 }}>
          <SectionCard>
            <Typography variant="h6">{t("dashboardSalaryInsights")}</Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 1.5 }}>{t("dashboardSalaryInsightsBody")}</Typography>
            <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" }, gap: 1.5 }}>
              {overview!.salaryInsights!.map((item) => {
                const money = new Intl.NumberFormat(undefined, { style: "currency", currency: item.currency, maximumFractionDigits: 0 });
                return (
                  <Box key={item.currency + item.period} sx={{ p: 1.5, borderRadius: 3, backgroundColor: alpha(theme.palette.primary.main, 0.05) }}>
                    <Typography variant="caption" color="text.secondary">{t("dashboardSalaryGroup", { currency: item.currency, period: item.period, count: item.count })}</Typography>
                    <Typography variant="h6" sx={{ mt: 0.5 }}>{money.format(item.averageMidpoint)}</Typography>
                    <Typography variant="body2" color="text.secondary">{t("dashboardSalaryRange", { minimum: money.format(item.minimum), maximum: money.format(item.maximum) })}</Typography>
                  </Box>
                );
              })}
            </Box>
          </SectionCard>
        </Box>
      ) : null}

      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", xl: "1fr 1fr" }, gap: 2, mt: 2 }}>
        {!summaryResource.loading && !summaryResource.error && hasCompanies && prefs.companies ? (
          <SectionCard>
            <Typography variant="h6" sx={{ 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 && hasSkills && prefs.skills ? (
          <SectionCard>
            <Typography variant="h6" sx={{ mb: 1 }}>{t("dashboardTopSkills")}</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={{ 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" }}>{t("dashboardTotalCount", { count: series.counts.reduce((sum, value) => sum + value, 0) })}</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>
  );
}