jobtrackingapp/job-tracker-ui/src/views/ApplicationWorkspacePage.tsx

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

import {
  Alert, Box, Button, Chip, Divider, IconButton, List, ListItemButton, ListItemText, Paper,
  Skeleton, Stack, Tooltip, Typography,
} from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import MailOutlineIcon from "@mui/icons-material/MailOutline";
import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
import ChecklistIcon from "@mui/icons-material/Checklist";

import { getApiErrorMessage } from "../api";
import Attachments from "../components/Attachments";
import Correspondence from "../components/Correspondence";
import AiWorkspacePanel from "../components/AiWorkspacePanel";
import ApplicationChecklist from "../components/ApplicationChecklist";
import {
  ApplicationAnalysis, ApplicationMatch, ApplicationTimeline,
} from "../components/ApplicationIntelligence";
import {
  ApplicationCoverLetterSection, ApplicationCvSection,
} from "../components/ApplicationAssets";
import { ApplicationInterviewPrep } from "../components/InterviewPrep";
import {
  WORKSPACE_SECTIONS, WorkspaceOverview, WorkspaceSectionKey, applicationWorkspaceApi, workspaceSection,
} from "../applicationWorkspace";

// Phase 5 Milestone 1 — the dedicated Application Workspace.
//
// This is a surface, not a new data store: the overview is one aggregate read, and each section
// reuses the component that already owns that domain (Attachments, Correspondence, AiWorkspacePanel).
// docs/architecture/application-workspace.md.
export default function ApplicationWorkspacePage() {
  const { id } = useParams();
  const jobId = Number(id);
  const navigate = useNavigate();
  const [params, setParams] = useSearchParams();
  const section = workspaceSection(params.get("section"));

  const [overview, setOverview] = useState<WorkspaceOverview | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      setOverview(await applicationWorkspaceApi.overview(jobId));
    } catch (err) {
      setError(getApiErrorMessage(err, "Could not open this application."));
    }
  }, [jobId]);

  useEffect(() => {
    load();
  }, [load]);

  const go = (next: WorkspaceSectionKey) => setParams({ section: next }, { replace: true });

  if (error) {
    return (
      <Box sx={{ p: 3 }}>
        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/jobs")}>Back to applications</Button>
        <Alert severity="error" sx={{ mt: 2 }}>{error}</Alert>
      </Box>
    );
  }

  return (
    <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "220px 1fr" }, gap: 2, alignItems: "start" }}>
      <Paper sx={{ p: 1, borderRadius: 3, position: { md: "sticky" }, top: 12 }}>
        <Stack direction="row" alignItems="center" spacing={0.5} sx={{ px: 1, py: 0.5 }}>
          <Tooltip title="Back to applications">
            <IconButton size="small" aria-label="Back to applications" onClick={() => navigate("/jobs")}>
              <ArrowBackIcon fontSize="small" />
            </IconButton>
          </Tooltip>
          <Typography variant="caption" sx={{ fontWeight: 800, letterSpacing: ".08em", textTransform: "uppercase", color: "text.secondary" }}>
            Workspace
          </Typography>
        </Stack>
        <List dense component="nav" aria-label="Workspace sections">
          {WORKSPACE_SECTIONS.map((s) => (
            <ListItemButton key={s.key} selected={section === s.key} onClick={() => go(s.key)} sx={{ borderRadius: 2 }}>
              <ListItemText
                primary={s.label}
                slotProps={{ primary: { fontSize: 14, fontWeight: section === s.key ? 700 : 500 } }}
              />
            </ListItemButton>
          ))}
        </List>
      </Paper>

      <Box sx={{ display: "grid", gap: 2 }}>
        <WorkspaceHeader overview={overview} />
        {section === "overview" && <OverviewSection overview={overview} onGo={go} onReload={load} />}
        {section === "job-details" && <JobDetailsSection overview={overview} />}
        {/* Deterministic answer first, then the AI panel below it — the page never generates on load. */}
        {section === "analysis" && jobId > 0 && <ApplicationAnalysis jobId={jobId} />}
        {section === "match" && jobId > 0 && <ApplicationMatch jobId={jobId} />}
        {section === "timeline" && jobId > 0 && <ApplicationTimeline jobId={jobId} />}
        {section === "interview" && jobId > 0 && <ApplicationInterviewPrep jobId={jobId} />}
        {(section === "analysis" || section === "match" || section === "interview") && jobId > 0 && (
          <Paper sx={{ p: 2, borderRadius: 3 }}>
            <AiWorkspacePanel jobId={jobId} />
          </Paper>
        )}
        {section === "documents" && jobId > 0 && (
          <Paper sx={{ p: 2, borderRadius: 3 }}><Attachments jobId={jobId} /></Paper>
        )}
        {section === "communication" && jobId > 0 && (
          <Paper sx={{ p: 2, borderRadius: 3 }}><Correspondence jobId={jobId} job={null as any} /></Paper>
        )}
        {section === "checklist" && jobId > 0 && (
          <ApplicationChecklist jobId={jobId} onChanged={load} />
        )}
        {section === "cv" && jobId > 0 && <ApplicationCvSection jobId={jobId} />}
        {section === "cover-letter" && jobId > 0 && (
          <>
            <ApplicationCoverLetterSection jobId={jobId} />
            {/* Generation stays an explicit user action, below the editor the user owns. */}
            <Paper sx={{ p: 2, borderRadius: 3 }}><AiWorkspacePanel jobId={jobId} /></Paper>
          </>
        )}
      </Box>
    </Box>
  );
}
function WorkspaceHeader({ overview }: { overview: WorkspaceOverview | null }) {
  if (!overview) return <Paper sx={{ p: 2.5, borderRadius: 3 }}><Skeleton width="45%" height={34} /><Skeleton width="30%" /></Paper>;
  return (
    <Paper sx={{ p: 2.5, borderRadius: 3 }}>
      <Stack direction="row" alignItems="flex-start" justifyContent="space-between" flexWrap="wrap" gap={1}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 900 }}>{overview.jobTitle}</Typography>
          <Typography color="text.secondary">
            {[overview.company, overview.location, overview.salary].filter(Boolean).join(" · ") || "—"}
          </Typography>
        </Box>
        <Stack direction="row" spacing={1} alignItems="center">
          <Chip size="small" label={overview.status} color="primary" variant="outlined" />
          <Chip size="small" label={overview.stageGroup} />
          {overview.jobUrl && (
            <Tooltip title="Open original advert">
              <IconButton size="small" aria-label="Open original advert" href={overview.jobUrl} target="_blank" rel="noopener noreferrer">
                <OpenInNewIcon fontSize="small" />
              </IconButton>
            </Tooltip>
          )}
        </Stack>
      </Stack>
    </Paper>
  );
}

function OverviewSection({ overview, onGo, onReload }: {
  overview: WorkspaceOverview | null;
  onGo: (s: WorkspaceSectionKey) => void;
  onReload: () => void;
}) {
  const stats = useMemo(() => overview ? [
    { icon: <DescriptionOutlinedIcon fontSize="small" />, label: "CV", value: overview.cv.variantName ?? (overview.cv.hasTailoredCvText ? "Tailored text" : "Not prepared"), ok: !!overview.cv.variantId || overview.cv.hasTailoredCvText, go: "cv" as const },
    { icon: <MailOutlineIcon fontSize="small" />, label: "Cover letter", value: overview.hasCoverLetter ? "Ready" : "Not written", ok: overview.hasCoverLetter, go: "cover-letter" as const },
    { icon: <FolderOutlinedIcon fontSize="small" />, label: "Documents", value: overview.documentCount ? `${overview.documentCount} attached` : "None", ok: overview.documentCount > 0, go: "documents" as const },
    { icon: <AutoFixHighIcon fontSize="small" />, label: "AI suggestions", value: overview.aiInteractionCount ? `${overview.aiInteractionCount} saved` : "None yet", ok: overview.aiInteractionCount > 0, go: "analysis" as const },
    { icon: <ChecklistIcon fontSize="small" />, label: "Checklist", value: overview.checklistProgress ? `${overview.checklistProgress.completed}/${overview.checklistProgress.total} done` : "—", ok: (overview.checklistProgress?.percent ?? 0) === 100, go: "checklist" as const },
  ] : [], [overview]);

  if (!overview) {
    return <Stack spacing={2}>{[0, 1].map((i) => <Skeleton key={i} variant="rounded" height={120} />)}</Stack>;
  }

  return (
    <Stack spacing={2}>
      {overview.nextStep ? (
        <Paper sx={{ p: 2.5, borderRadius: 3, borderLeft: "4px solid", borderLeftColor: "primary.main" }}>
          <Typography variant="overline" color="text.secondary">Next recommended action</Typography>
          <Typography variant="h6" sx={{ fontWeight: 800 }}>{overview.nextStep.label}</Typography>
          <Typography color="text.secondary" sx={{ mb: 1.5 }}>{overview.nextStep.reason}</Typography>
          <Button variant="contained" endIcon={<ArrowForwardIcon />}
            onClick={() => overview.nextStep?.section && onGo(overview.nextStep.section as WorkspaceSectionKey)}>
            {overview.nextStep.label}
          </Button>
        </Paper>
      ) : (
        <Alert severity="success" sx={{ borderRadius: 3 }}>
          Nothing outstanding — this application is fully prepared.
        </Alert>
      )}

      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(5, 1fr)" }, gap: 1.5 }}>
        {stats.map((s) => (
          <Paper key={s.label} variant="outlined" role="button" tabIndex={0}
            onClick={() => onGo(s.go)}
            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onGo(s.go); } }}
            sx={{ p: 1.5, borderRadius: 3, cursor: "pointer", "&:focus-visible": { boxShadow: 3 } }}>
            <Stack direction="row" spacing={0.75} alignItems="center" sx={{ color: s.ok ? "success.main" : "text.disabled" }}>
              {s.icon}
              <Typography variant="caption" sx={{ fontWeight: 700 }}>{s.label}</Typography>
            </Stack>
            <Typography variant="body2" sx={{ mt: 0.5, fontWeight: 600 }}>{s.value}</Typography>
          </Paper>
        ))}
      </Box>

      <Paper sx={{ p: 2, borderRadius: 3 }}>
        <Stack direction="row" alignItems="center" justifyContent="space-between">
          <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>Recent activity</Typography>
          <Button size="small" onClick={onReload}>Refresh</Button>
        </Stack>
        <Divider sx={{ my: 1 }} />
        {overview.recentActivity.length === 0 ? (
          <Typography variant="body2" color="text.secondary">No activity recorded yet.</Typography>
        ) : (
          <Stack spacing={0.75}>
            {overview.recentActivity.map((a, i) => (
              <Stack key={i} direction="row" spacing={1} justifyContent="space-between">
                <Typography variant="body2"><strong>{a.type}</strong>{a.detail ? ` — ${a.detail}` : ""}</Typography>
                <Typography variant="caption" color="text.secondary">{new Date(a.at).toLocaleDateString()}</Typography>
              </Stack>
            ))}
          </Stack>
        )}
      </Paper>
    </Stack>
  );
}

function JobDetailsSection({ overview }: { overview: WorkspaceOverview | null }) {
  if (!overview) return <Skeleton variant="rounded" height={200} />;
  const rows: [string, string][] = [
    ["Company", overview.company ?? "—"],
    ["Location", overview.location ?? "—"],
    ["Salary", overview.salary ?? "—"],
    ["Status", overview.status],
    ["Applied", overview.dateApplied ? new Date(overview.dateApplied).toLocaleDateString() : "—"],
    ["Deadline", overview.deadline ? new Date(overview.deadline).toLocaleDateString() : "—"],
    ["Follow-up", overview.followUpAt ? new Date(overview.followUpAt).toLocaleDateString() : "Not scheduled"],
    ["Next action", overview.nextAction ?? "—"],
  ];
  return (
    <Paper sx={{ p: 2, borderRadius: 3 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 800, mb: 1 }}>Job details</Typography>
      {!overview.hasJobDescription && (
        <Alert severity="warning" sx={{ mb: 1.5, borderRadius: 2 }}>
          No advert text saved. Analysis and matching need it — add it from the application dialog.
        </Alert>
      )}
      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "160px 1fr" }, rowGap: 0.75, columnGap: 2 }}>
        {rows.map(([k, v]) => (
          <React.Fragment key={k}>
            <Typography variant="body2" color="text.secondary">{k}</Typography>
            <Typography variant="body2">{v}</Typography>
          </React.Fragment>
        ))}
      </Box>
    </Paper>
  );
}