import React, { useState } from "react";

import { Alert, Box, Paper, Tab, Tabs, Typography } from "@mui/material";

import ProfilePage from "./ProfilePage";

export default function CareerWorkspacePage() {
  const [tab, setTab] = useState<"master" | "builder">("master");
  const [hasMasterCv, setHasMasterCv] = useState(false);

  return (
    <Box sx={{ display: "grid", gap: 2 }}>
      <Paper sx={{ p: 2.5, borderRadius: 4, boxShadow: "0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
        <Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>Career Workspace</Typography>
        <Typography sx={{ color: "text.secondary" }}>
          Maintain the master career profile that powers your CVs, tailored application material, and future portfolio outputs.
        </Typography>
      </Paper>
      <Alert severity="info" sx={{ borderRadius: 3 }}>
        Your master profile is the source of truth. Job-specific CV drafts remain separate and never overwrite it.
      </Alert>
      <Paper sx={{ borderRadius: 4, overflow: "hidden", boxShadow: "0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
        <Tabs value={tab} onChange={(_, value) => setTab(value)} variant="scrollable" allowScrollButtonsMobile sx={{ px: 1.5, pt: 1 }}>
          <Tab value="master" label="Master CV" />
          <Tab value="builder" label="CV Builder" disabled={!hasMasterCv} />
        </Tabs>
        {!hasMasterCv ? <Alert severity="info" sx={{ mx: 2.5, mb: 0, borderRadius: 3 }}>
          Create your Master CV first. Upload an existing CV or add your career history manually; the builder will unlock when the profile has content.
        </Alert> : null}
        <Box sx={{ p: { xs: 1.5, md: 2.5 } }}>
          <ProfilePage careerOnly careerView={tab} onMasterCvAvailabilityChange={setHasMasterCv} />
        </Box>
      </Paper>
    </Box>
  );
}