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

import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
} from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";

import { api, getApiErrorMessage } from "../api";
import ViewStateNotice from "./ViewStateNotice";
import { Company } from "../types";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
import { useViewResource } from "../hooks/useViewResource";

export default function CompaniesTable() {
  const isMobile = useMediaQuery("(max-width:767.95px)");
  const { toast } = useToast();
  const { t } = useI18n();
  const location = useLocation();
  const navigate = useNavigate();
  const [editOpen, setEditOpen] = useState(false);
  const [editing, setEditing] = useState<Company | null>(null);

  const [recruiterName, setRecruiterName] = useState("");
  const [recruiterEmail, setRecruiterEmail] = useState("");
  const [recruiterLinkedIn, setRecruiterLinkedIn] = useState("");
  const [pipelineStage, setPipelineStage] = useState("");
  const [lastContactedAt, setLastContactedAt] = useState("");
  const [nextContactAt, setNextContactAt] = useState("");

  const companiesResource = useViewResource(
    async () => {
      const response = await api.get<Company[]>("/companies");
      return response.data;
    },
    {
      initialData: [],
      errorMessage: t("companiesUpdateFailed"),
      deps: [t],
    },
  );

  const companies = companiesResource.data;

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const editId = Number(params.get("edit") || 0);
    if (!editId || companies.length === 0) return;
    const company = companies.find((c) => c.id === editId);
    if (!company) return;
    openEdit(company);
    params.delete("edit");
    navigate({ pathname: location.pathname, search: params.toString() ? `?${params.toString()}` : "" }, { replace: true });
  }, [companies, location.pathname, location.search, navigate]);

  const openEdit = (c: Company) => {
    setEditing(c);
    setRecruiterName(c.recruiterName ?? "");
    setRecruiterEmail(c.recruiterEmail ?? "");
    setRecruiterLinkedIn(c.recruiterLinkedIn ?? "");
    setPipelineStage(c.pipelineStage ?? "");
    setLastContactedAt((c.lastContactedAt ?? "").slice(0, 10));
    setNextContactAt((c.nextContactAt ?? "").slice(0, 10));
    setEditOpen(true);
  };

  const canSave = useMemo(() => !!editing?.id, [editing]);

  const save = async () => {
    if (!editing?.id) return;
    try {
      const res = await api.put<Company>(`/companies/${editing.id}`, {
        name: editing.name,
        location: editing.location ?? null,
        source: editing.source ?? null,
        recruiterName: recruiterName.trim() || null,
        recruiterEmail: recruiterEmail.trim() || null,
        recruiterLinkedIn: recruiterLinkedIn.trim() || null,
        pipelineStage: pipelineStage.trim() || null,
        lastContactedAt: lastContactedAt || null,
        nextContactAt: nextContactAt || null,
      });

      companiesResource.setData((prev) => prev.map((x) => (x.id === res.data.id ? res.data : x)));
      toast(t("companiesUpdated"), "success");
      setEditOpen(false);
      setEditing(null);
    } catch (error) {
      toast(getApiErrorMessage(error, t("companiesUpdateFailed")), "error");
    }
  };

  const renderCompanyMeta = (label: string, value?: string | null) => (
    <Box>
      <Typography variant="overline" sx={{ color: "text.secondary" }}>{label}</Typography>
      <Typography variant="body2" sx={{ overflowWrap: "anywhere" }}>{value || "—"}</Typography>
    </Box>
  );

  return (
    <Paper sx={{ mt: 0, p: { xs: 1.5, sm: 0 } }}>
      <ViewStateNotice
        loading={companiesResource.loading}
        error={companiesResource.error}
        title="Unable to load companies"
        description="The companies list is unavailable right now. Try again when the API is reachable."
        onRetry={companiesResource.reload}
      />

      {!companiesResource.loading && !companiesResource.error ? (
        isMobile ? (
          <Stack spacing={1.5}>
            {companies.map((c) => (
              <Paper key={c.id} sx={{ p: 1.5, borderRadius: 3 }}>
                <Stack spacing={1.25}>
                  <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 1 }}>
                    <Box>
                      <Typography sx={{ fontWeight: 900, overflowWrap: "anywhere" }}>{c.name}</Typography>
                      <Typography variant="body2" sx={{ color: "text.secondary", overflowWrap: "anywhere" }}>{c.location || t("companiesLocation")}</Typography>
                    </Box>
                    <IconButton size="small" onClick={() => openEdit(c)}>
                      <EditOutlinedIcon fontSize="small" />
                    </IconButton>
                  </Box>

                  <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1.25 }}>
                    {renderCompanyMeta(t("companiesSource"), c.source)}
                    {renderCompanyMeta(t("companiesPipeline"), c.pipelineStage)}
                    {renderCompanyMeta(t("companiesRecruiter"), [c.recruiterName, c.recruiterEmail].filter(Boolean).join(" · "))}
                    {renderCompanyMeta(t("companiesNextContact"), c.nextContactAt ? new Date(c.nextContactAt).toLocaleDateString() : null)}
                  </Box>
                </Stack>
              </Paper>
            ))}
            {companies.length === 0 ? (
              <Typography sx={{ py: 2, textAlign: "center" }}>
                {t("companiesEmpty")}
              </Typography>
            ) : null}
          </Stack>
        ) : (
          <TableContainer sx={{ borderRadius: 3, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>{t("companiesName")}</TableCell>
                  <TableCell>{t("companiesLocation")}</TableCell>
                  <TableCell>{t("companiesSource")}</TableCell>
                  <TableCell>{t("companiesPipeline")}</TableCell>
                  <TableCell>{t("companiesRecruiter")}</TableCell>
                  <TableCell>{t("companiesNextContact")}</TableCell>
                  <TableCell width={1} align="right" />
                </TableRow>
              </TableHead>
              <TableBody>
                {companies.map((c) => (
                  <TableRow key={c.id}>
                    <TableCell>{c.name}</TableCell>
                    <TableCell>{c.location ?? ""}</TableCell>
                    <TableCell>{c.source ?? ""}</TableCell>
                    <TableCell>{c.pipelineStage ?? ""}</TableCell>
                    <TableCell>
                      {c.recruiterName ?? ""}
                      {c.recruiterEmail ? ` (${c.recruiterEmail})` : ""}
                    </TableCell>
                    <TableCell>{c.nextContactAt ? new Date(c.nextContactAt).toLocaleDateString() : ""}</TableCell>
                    <TableCell align="right">
                      <IconButton size="small" onClick={() => openEdit(c)}>
                        <EditOutlinedIcon fontSize="small" />
                      </IconButton>
                    </TableCell>
                  </TableRow>
                ))}
                {companies.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={7}>
                      <Typography sx={{ py: 2, textAlign: "center" }}>
                        {t("companiesEmpty")}
                      </Typography>
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </TableContainer>
        )
      ) : null}

      <Dialog open={editOpen} onClose={() => setEditOpen(false)} fullWidth fullScreen={isMobile} maxWidth="sm">
        <DialogTitle>{t("companiesEdit")}</DialogTitle>
        <DialogContent>
          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mt: 1 }}>
            <TextField
              label={t("companiesName")}
              value={editing?.name ?? ""}
              onChange={(e) => setEditing((p) => (p ? { ...p, name: e.target.value } : p))}
              sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }}
            />
            <TextField
              label={t("companiesLocation")}
              value={editing?.location ?? ""}
              onChange={(e) => setEditing((p) => (p ? { ...p, location: e.target.value } : p))}
            />
            <TextField
              label={t("companiesSource")}
              value={editing?.source ?? ""}
              onChange={(e) => setEditing((p) => (p ? { ...p, source: e.target.value } : p))}
            />

            <TextField
              label={t("companiesPipelineStage")}
              value={pipelineStage}
              onChange={(e) => setPipelineStage(e.target.value)}
            />
            <TextField
              label={t("companiesRecruiterName")}
              value={recruiterName}
              onChange={(e) => setRecruiterName(e.target.value)}
            />
            <TextField
              label={t("companiesRecruiterEmail")}
              value={recruiterEmail}
              onChange={(e) => setRecruiterEmail(e.target.value)}
            />
            <TextField
              label={t("companiesRecruiterLinkedIn")}
              value={recruiterLinkedIn}
              onChange={(e) => setRecruiterLinkedIn(e.target.value)}
              sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }}
            />

            <TextField
              label={t("companiesLastContacted")}
              type="date"
              value={lastContactedAt}
              onChange={(e) => setLastContactedAt(e.target.value)}
              InputLabelProps={{ shrink: true }}
            />
            <TextField
              label={t("companiesNextContactField")}
              type="date"
              value={nextContactAt}
              onChange={(e) => setNextContactAt(e.target.value)}
              InputLabelProps={{ shrink: true }}
            />
          </Box>
        </DialogContent>
        <DialogActions sx={{ px: 3, pb: 3, flexDirection: { xs: "column-reverse", sm: "row" }, gap: 1 }}>
          <Button onClick={() => setEditOpen(false)} fullWidth={isMobile}>{t("cancel")}</Button>
          <Button variant="contained" onClick={save} disabled={!canSave} fullWidth={isMobile}>
            {t("save")}
          </Button>
        </DialogActions>
      </Dialog>
    </Paper>
  );
}