import { useState, useEffect, useRef } from "react";
import { useQuery } from "@tanstack/react-query";
import { useApiMutation } from "../lib/queries/mutations";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MenuItem from "@mui/material/MenuItem";

import {
  projectDetailOptions,
  type ProjectData,
  type ProjectNote,
} from "../lib/queries/projects";
import { userListOptions, type User as ApiUser } from "../lib/queries/users";
import Forbidden from "../components/Forbidden";
import ProjectFileManager from "../components/ProjectFileManager";
import {
  Button,
  Card,
  Field,
  TextField,
  Select,
  DateField,
  StatusChip,
  CheckboxField,
  ConfirmDialog,
  LoadingState,
  PageEnter,
  headerActionsSx,
} from "../ui";

const API_BASE = "/api/admin";

const STATUS_LABELS: Record<string, string> = {
  aktivni: "Aktivní",
  dokonceny: "Dokončený",
  zruseny: "Zrušený",
};

const STATUS_COLORS: Record<
  string,
  "default" | "success" | "error" | "warning" | "info"
> = {
  aktivni: "success",
  dokonceny: "info",
  zruseny: "default",
};

function formatNoteDate(dateStr: string) {
  if (!dateStr) return "";
  const d = new Date(dateStr);
  const day = d.getDate();
  const month = d.getMonth() + 1;
  const year = d.getFullYear();
  const hours = String(d.getHours()).padStart(2, "0");
  const mins = String(d.getMinutes()).padStart(2, "0");
  return `${day}. ${month}. ${year} ${hours}:${mins}`;
}

interface User {
  id: number;
  name: string;
}

interface ProjectForm {
  name: string;
  status: string;
  start_date: string;
  end_date: string;
  responsible_user_id: string;
}

const BackIcon = (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <path d="M19 12H5M12 19l-7-7 7-7" />
  </svg>
);

const TrashIcon = (
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <polyline points="3 6 5 6 21 6" />
    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
    <path d="M10 11v6M14 11v6" />
  </svg>
);

export default function ProjectDetail() {
  const { id } = useParams();
  const alert = useAlert();
  const { hasPermission, isAdmin } = useAuth();
  const navigate = useNavigate();

  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState<ProjectForm>({
    name: "",
    status: "aktivni",
    start_date: "",
    end_date: "",
    responsible_user_id: "",
  });

  const [deleteConfirm, setDeleteConfirm] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [deleteFiles, setDeleteFiles] = useState(false);

  // Dynamic notes
  const [newNote, setNewNote] = useState("");
  const [addingNote, setAddingNote] = useState(false);
  const [deletingNoteId, setDeletingNoteId] = useState<number | null>(null);

  const projectQuery = useQuery(projectDetailOptions(id));
  const project = projectQuery.data;
  const isPending = projectQuery.isPending;
  const notes: ProjectNote[] = project?.project_notes || [];

  const { data: usersData } = useQuery(userListOptions("projects.view"));
  // Only active users with projects.view — but keep the project's CURRENT
  // assignee in the list even if they're now inactive, so the select still
  // reflects the saved value (marked "(neaktivní)" so it's clear).
  const assignedUserId = project?.responsible_user_id || "";
  const users: User[] = (usersData ?? [])
    .filter((u: ApiUser) => u.is_active || String(u.id) === assignedUserId)
    .map((u: ApiUser) => ({
      id: u.id,
      name:
        (`${u.first_name || ""} ${u.last_name || ""}`.trim() || u.username) +
        (u.is_active ? "" : " (neaktivní)"),
    }));

  // Reset form sync when navigating to a different project
  const formInitialized = useRef(false);
  useEffect(() => {
    formInitialized.current = false;
  }, [id]);

  // Sync project data to local form state on first load
  useEffect(() => {
    if (project && !formInitialized.current) {
      setForm({
        name: project.name || "",
        status: project.status || "aktivni",
        start_date: (project.start_date || "").substring(0, 10),
        end_date: (project.end_date || "").substring(0, 10),
        responsible_user_id: project.responsible_user_id || "",
      });
      formInitialized.current = true;
    }
  }, [project]);

  // Navigate away on fetch error
  useEffect(() => {
    if (projectQuery.error) {
      alert.error("Nepodařilo se načíst projekt");
      navigate("/projects");
    }
  }, [projectQuery.error]); // eslint-disable-line react-hooks/exhaustive-deps

  if (!hasPermission("projects.view")) return <Forbidden />;

  const projectSaveMutation = useApiMutation<
    {
      name: string;
      status: string;
      start_date: string | null;
      end_date: string | null;
      responsible_user_id: string | null;
    },
    unknown
  >({
    url: () => `${API_BASE}/projects/${id}`,
    method: () => "PUT",
    invalidate: ["projects", "warehouse"],
  });

  const projectDeleteMutation = useApiMutation<
    { delete_files: boolean },
    unknown
  >({
    url: () => `${API_BASE}/projects/${id}`,
    method: () => "DELETE",
    invalidate: ["projects", "warehouse"],
  });

  const projectAddNoteMutation = useApiMutation<{ content: string }, unknown>({
    url: () => `${API_BASE}/projects/${id}/notes`,
    method: () => "POST",
    invalidate: ["projects", "warehouse"],
  });

  const projectDeleteNoteMutation = useApiMutation<number, unknown>({
    url: (noteId) => `${API_BASE}/projects/${id}/notes/${noteId}`,
    method: () => "DELETE",
    invalidate: ["projects", "warehouse"],
  });

  const updateForm = (field: keyof ProjectForm, value: string) =>
    setForm((prev) => ({ ...prev, [field]: value }));

  const handleSave = async () => {
    if (!form.name.trim()) {
      alert.error("Název projektu je povinný");
      return;
    }

    setSaving(true);
    try {
      await projectSaveMutation.mutateAsync({
        name: form.name,
        status: form.status,
        start_date: form.start_date || null,
        end_date: form.end_date || null,
        responsible_user_id: form.responsible_user_id || null,
      });
      alert.success("Projekt byl aktualizován");
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    setDeleting(true);
    try {
      await projectDeleteMutation.mutateAsync({ delete_files: deleteFiles });
      navigate("/projects");
      setTimeout(() => alert.success("Projekt byl smazán"), 300);
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setDeleting(false);
    }
  };

  const handleAddNote = async () => {
    if (!newNote.trim()) return;

    setAddingNote(true);
    try {
      await projectAddNoteMutation.mutateAsync({ content: newNote.trim() });
      setNewNote("");
      alert.success("Poznámka byla přidána");
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setAddingNote(false);
    }
  };

  const handleDeleteNote = async (noteId: number) => {
    setDeletingNoteId(noteId);
    try {
      await projectDeleteNoteMutation.mutateAsync(noteId);
      alert.success("Poznámka byla smazána");
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setDeletingNoteId(null);
    }
  };

  if (isPending) {
    return <LoadingState />;
  }

  if (!project) return null;

  const canEdit = hasPermission("projects.edit");

  return (
    <PageEnter>
      {/* Header */}
      <Box>
        <Box
          sx={{
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: 2,
            mb: 3,
          }}
        >
          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
            <Button
              component={RouterLink}
              to="/projects"
              variant="outlined"
              color="inherit"
              startIcon={BackIcon}
            >
              Zpět
            </Button>
            <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
              <Typography variant="h4">
                Projekt {project.project_number}
              </Typography>
              <StatusChip
                label={STATUS_LABELS[project.status] || project.status}
                color={STATUS_COLORS[project.status] || "default"}
              />
            </Box>
          </Box>
          {canEdit && (
            <Box sx={headerActionsSx}>
              <Button onClick={handleSave} disabled={saving}>
                {saving ? "Ukládání..." : "Uložit"}
              </Button>
              {!project.order_id && (
                <Button
                  variant="outlined"
                  color="error"
                  onClick={() => setDeleteConfirm(true)}
                >
                  Smazat
                </Button>
              )}
            </Box>
          )}
        </Box>
      </Box>

      {/* Basic info form */}
      <Card sx={{ mb: 3 }}>
        <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
          Základní údaje
        </Typography>
        <Box
          sx={{
            display: "grid",
            gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
            gap: 2,
          }}
        >
          <Field label="Číslo projektu">
            <TextField value={project.project_number} fullWidth disabled />
          </Field>
          <Field label="Název">
            <TextField
              value={form.name}
              onChange={(e) => updateForm("name", e.target.value)}
              placeholder="Název projektu"
              fullWidth
              disabled={!canEdit}
            />
          </Field>
          <Field label="Zákazník">
            <TextField
              value={project.customer_name || "—"}
              fullWidth
              disabled
            />
          </Field>
          <Field label="Zodpovědná osoba">
            <Select
              value={form.responsible_user_id}
              onChange={(v) => updateForm("responsible_user_id", v)}
              disabled={!canEdit}
            >
              <MenuItem value="">— Nevybráno —</MenuItem>
              {users.map((u) => (
                <MenuItem key={u.id} value={String(u.id)}>
                  {u.name}
                </MenuItem>
              ))}
            </Select>
          </Field>
        </Box>
        <Box
          sx={{
            display: "grid",
            gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
            gap: 2,
          }}
        >
          <Field label="Stav">
            <Select
              value={form.status}
              onChange={(v) => updateForm("status", v)}
              disabled={!canEdit}
            >
              <MenuItem value="aktivni">Aktivní</MenuItem>
              <MenuItem value="dokonceny">Dokončený</MenuItem>
              <MenuItem value="zruseny">Zrušený</MenuItem>
            </Select>
          </Field>
          <Field label="Datum zahájení">
            <DateField
              value={form.start_date}
              onChange={(val) => updateForm("start_date", val)}
              disabled={!canEdit}
            />
          </Field>
          <Field label="Datum ukončení">
            <DateField
              value={form.end_date}
              onChange={(val) => updateForm("end_date", val)}
              disabled={!canEdit}
            />
          </Field>
        </Box>
      </Card>

      {/* Notes */}
      <Card sx={{ mb: 3 }}>
        <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
          Poznámky
        </Typography>

        {/* Add note */}
        <Box sx={{ mb: 3 }}>
          <TextField
            value={newNote}
            onChange={(e) => setNewNote(e.target.value)}
            multiline
            minRows={2}
            placeholder="Napište poznámku..."
            fullWidth
            onKeyDown={(e) => {
              if (e.key === "Enter" && e.ctrlKey && newNote.trim()) {
                handleAddNote();
              }
            }}
          />
          <Box sx={{ mt: 1 }}>
            <Button
              variant="outlined"
              color="inherit"
              onClick={handleAddNote}
              disabled={addingNote || !newNote.trim()}
            >
              {addingNote ? "Přidávání..." : "Přidat poznámku"}
            </Button>
          </Box>
        </Box>

        {/* Legacy notes (read-only) */}
        {project.notes && (
          <Box
            sx={{
              p: 1.5,
              bgcolor: "action.hover",
              borderRadius: 2,
              mb: 1,
            }}
          >
            <Typography
              variant="caption"
              color="text.secondary"
              sx={{ display: "block", mb: 0.5 }}
            >
              Starší poznámka (před zavedením systému)
            </Typography>
            <Typography
              variant="body2"
              color="text.secondary"
              sx={{ whiteSpace: "pre-wrap" }}
            >
              {project.notes}
            </Typography>
          </Box>
        )}

        {/* Notes list */}
        {notes.length === 0 && !project.notes && (
          <Typography
            variant="body2"
            color="text.secondary"
            sx={{ textAlign: "center", py: 2 }}
          >
            Zatím žádné poznámky
          </Typography>
        )}
        {(notes.length > 0 || project.notes) && (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {notes.map((note) => (
              <Box
                key={note.id}
                sx={{
                  p: 1.5,
                  bgcolor: "action.hover",
                  borderRadius: 2,
                  position: "relative",
                }}
              >
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    gap: 1,
                  }}
                >
                  <Box sx={{ flex: 1 }}>
                    <Box
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: 1,
                        mb: 0.5,
                      }}
                    >
                      <Typography variant="body2" sx={{ fontWeight: 600 }}>
                        {note.user_name}
                      </Typography>
                      <Typography variant="caption" color="text.secondary">
                        {formatNoteDate(note.created_at)}
                      </Typography>
                    </Box>
                    <Typography
                      variant="body2"
                      sx={{ whiteSpace: "pre-wrap", lineHeight: 1.5 }}
                    >
                      {note.content}
                    </Typography>
                  </Box>
                  {isAdmin && (
                    <IconButton
                      size="small"
                      color="error"
                      onClick={() => handleDeleteNote(note.id)}
                      title="Smazat poznámku"
                      aria-label="Smazat poznámku"
                      disabled={deletingNoteId === note.id}
                      sx={{ flexShrink: 0 }}
                    >
                      {TrashIcon}
                    </IconButton>
                  )}
                </Box>
              </Box>
            ))}
          </Box>
        )}
      </Card>

      {/* Project File Manager */}
      <Box sx={{ mb: 2 }}>
        <ProjectFileManager
          projectId={project.id}
          projectNumber={project.project_number}
          hasPermission={hasPermission}
          hasNasFolder={project.has_nas_folder ?? false}
        />
      </Box>

      {/* Links */}
      <Card sx={{ mb: 3 }}>
        <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
          Propojení
        </Typography>
        <Box
          sx={{
            display: "grid",
            gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
            gap: 2,
          }}
        >
          <Box>
            <Typography variant="caption" color="text.secondary">
              Objednávka
            </Typography>
            <Typography variant="body2">
              {project.order_id ? (
                <Box
                  component={RouterLink}
                  to={`/orders/${project.order_id}`}
                  sx={{
                    color: "primary.main",
                    textDecoration: "none",
                    "&:hover": { textDecoration: "underline" },
                  }}
                >
                  {project.order_number}
                  {project.order_status && (
                    <Box
                      component="span"
                      sx={{ color: "text.secondary", ml: 1 }}
                    >
                      (
                      {STATUS_LABELS[project.order_status] ||
                        project.order_status}
                      )
                    </Box>
                  )}
                </Box>
              ) : (
                "—"
              )}
            </Typography>
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary">
              Nabídka
            </Typography>
            <Typography variant="body2">
              {project.quotation_id ? (
                <Box
                  component={RouterLink}
                  to={`/offers/${project.quotation_id}`}
                  sx={{
                    color: "primary.main",
                    textDecoration: "none",
                    "&:hover": { textDecoration: "underline" },
                  }}
                >
                  {project.quotation_number}
                </Box>
              ) : (
                "—"
              )}
            </Typography>
          </Box>
        </Box>
      </Card>

      <ConfirmDialog
        isOpen={deleteConfirm}
        onClose={() => {
          setDeleteConfirm(false);
          setDeleteFiles(false);
        }}
        onConfirm={handleDelete}
        title="Smazat projekt"
        message={`Opravdu chcete smazat projekt „${project.project_number} – ${project.name}"? Tato akce je nevratná.`}
        confirmText="Smazat"
        confirmVariant="danger"
        loading={deleting}
      >
        {project.has_nas_folder && (
          <CheckboxField
            label="Smazat i soubory na disku"
            checked={deleteFiles}
            onChange={setDeleteFiles}
          />
        )}
      </ConfirmDialog>
    </PageEnter>
  );
}