import { FormEvent, useMemo, useState } from "react";
import { Alert, Box, Button, Card, CardActions, CardContent, Chip, CircularProgress, MenuItem, Stack, TextField, Typography } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add";
import { useNavigate } from "react-router-dom";
import { api } from "../api";

type DiscoveredJob = {
  id: string;
  title: string;
  company?: string;
  location?: string;
  modifiedAt?: string;
  deadline?: string;
  url: string;
  source: string;
  sourceName?: string;
  acquisitionType?: string;
  retrievedAt?: string;
  countryCode: string;
};

const formatDate = (value?: string) => value ? new Date(value).toLocaleDateString() : null;
type SortOrder = "updated" | "deadline" | "title";

export default function JobDiscoveryPage() {
  const navigate = useNavigate();
  const [query, setQuery] = useState("");
  const [location, setLocation] = useState("");
  const [jobs, setJobs] = useState<DiscoveredJob[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [hasSearched, setHasSearched] = useState(false);
  const [lastSearch, setLastSearch] = useState({ query: "", location: "" });
  const [sortOrder, setSortOrder] = useState<SortOrder>("updated");

  const runSearch = async (nextQuery: string, nextLocation: string) => {
    setLoading(true); setError(""); setJobs([]); setHasSearched(true); setLastSearch({ query: nextQuery, location: nextLocation });
    try {
      const response = await api.get<DiscoveredJob[]>("/job-discovery/search", { params: { q: nextQuery || undefined, location: nextLocation || undefined } });
      setJobs(response.data ?? []);
    } catch { setError("NAV job discovery is temporarily unavailable."); }
    finally { setLoading(false); }
  };

  const search = (event: FormEvent) => {
    event.preventDefault();
    void runSearch(query.trim(), location.trim());
  };

  const sortedJobs = useMemo(() => [...jobs].sort((left, right) => {
    if (sortOrder === "title") return left.title.localeCompare(right.title);
    if (sortOrder === "deadline") {
      const leftDeadline = left.deadline ? new Date(left.deadline).getTime() : Number.MAX_SAFE_INTEGER;
      const rightDeadline = right.deadline ? new Date(right.deadline).getTime() : Number.MAX_SAFE_INTEGER;
      return leftDeadline - rightDeadline;
    }
    return new Date(right.modifiedAt || 0).getTime() - new Date(left.modifiedAt || 0).getTime();
  }), [jobs, sortOrder]);

  return (
    <Stack spacing={3}>
      <Box component="form" onSubmit={search} sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "2fr 1fr auto" }, gap: 1.5 }}>
        <TextField label="Role or company" value={query} onChange={(event) => setQuery(event.target.value)} />
        <TextField label="Municipality" value={location} onChange={(event) => setLocation(event.target.value)} />
        <Button type="submit" variant="contained" startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <SearchIcon />} disabled={loading}>Search NAV</Button>
      </Box>
      <Alert severity="info" variant="outlined" sx={{ color: "text.primary", "& .MuiAlert-icon": { color: "info.main" } }}>Official Norwegian vacancies from NAV. FINN, Indeed and LinkedIn jobs can still be captured by URL.</Alert>
      {error ? <Alert severity="error" variant="outlined" sx={{ color: "text.primary" }} action={<Button color="inherit" onClick={() => void runSearch(lastSearch.query, lastSearch.location)} disabled={loading}>Retry</Button>}>{error}</Alert> : null}
      {!loading && !hasSearched ? <Typography color="text.secondary">Search recent active vacancies by role, company, or municipality.</Typography> : null}
      {!loading && hasSearched && !error && jobs.length === 0 ? <Alert severity="info" variant="outlined" sx={{ color: "text.primary" }}>No active vacancies matched this search. Try a broader role, company, or municipality.</Alert> : null}
      {loading ? <Typography role="status" color="text.secondary">Searching NAV vacancies…</Typography> : null}
      {jobs.length > 0 ? (
        <Box sx={{ display: "flex", gap: 2, alignItems: { xs: "stretch", sm: "center" }, justifyContent: "space-between", flexDirection: { xs: "column", sm: "row" } }}>
          <Typography role="status">{jobs.length} {jobs.length === 1 ? "vacancy" : "vacancies"} found</Typography>
          <TextField select size="small" label="Sort results" value={sortOrder} onChange={(event) => setSortOrder(event.target.value as SortOrder)} sx={{ minWidth: 190 }}>
            <MenuItem value="updated">Recently updated</MenuItem>
            <MenuItem value="deadline">Deadline soonest</MenuItem>
            <MenuItem value="title">Title A–Z</MenuItem>
          </TextField>
        </Box>
      ) : null}
      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "repeat(2, minmax(0, 1fr))" }, gap: 2 }}>
        {sortedJobs.map((job) => (
          <Card key={job.id} variant="outlined" sx={{ display: "flex", flexDirection: "column" }}>
            <CardContent>
              <Chip label={job.sourceName || job.source.toUpperCase()} size="small" color="primary" variant="outlined" sx={{ mb: 1 }} />
              <Typography variant="h6" sx={{ fontWeight: 800 }}>{job.title}</Typography>
              <Typography color="text.secondary">{[job.company, job.location || "Location not provided"].filter(Boolean).join(" · ")}</Typography>
              <Stack spacing={0.25} sx={{ mt: 1 }}>
                <Typography variant="caption" color="text.secondary">
                  {job.acquisitionType === "searched" ? "Searched listing" : "Source type unavailable"}
                  {formatDate(job.retrievedAt) ? ` · Retrieved ${formatDate(job.retrievedAt)}` : ""}
                </Typography>
                {formatDate(job.modifiedAt) ? <Typography variant="caption" color="text.secondary">Listing updated {formatDate(job.modifiedAt)}</Typography> : null}
                {formatDate(job.deadline) ? <Typography variant="body2" color="text.primary">Application deadline: {formatDate(job.deadline)}</Typography> : null}
                <Typography variant="caption" color="text.secondary">Work arrangement not provided by this source</Typography>
              </Stack>
            </CardContent>
            <CardActions sx={{ mt: "auto" }}>
              <Button href={job.url} target="_blank" rel="noreferrer">View listing</Button>
              <Button startIcon={<AddIcon />} onClick={() => navigate("/jobs?add=" + encodeURIComponent(job.url))}>Save to tracker</Button>
            </CardActions>
          </Card>
        ))}
      </Box>
    </Stack>
  );
}
