import { useState, useEffect, useRef } from "react";
import { useQuery } from "@tanstack/react-query";
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import MenuItem from "@mui/material/MenuItem";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import Forbidden from "../components/Forbidden";
import useModalLock from "../hooks/useModalLock";

import { formatCurrency, formatDate } from "../utils/formatters";
import {
  warehouseItemDetailOptions,
  warehouseCategoryListOptions,
  type WarehouseItem,
} from "../lib/queries/warehouse";
import { useApiMutation } from "../lib/queries/mutations";
import {
  Button,
  Card,
  DataTable,
  Field,
  TextField,
  Select,
  StatCard,
  EmptyState,
  LoadingState,
  PageHeader,
  ConfirmDialog,
  PageEnter,
  headerActionsSx,
  type DataColumn,
} from "../ui";

interface Batch {
  id: number;
  quantity: number;
  original_qty: number;
  unit_price: number;
  received_at: string | null;
  is_consumed: boolean;
}

interface ItemLocation {
  id: number;
  quantity: number;
  location: {
    id: number;
    code: string;
    name: string;
  } | null;
}

interface ItemDetail extends WarehouseItem {
  batches?: Batch[];
  item_locations?: ItemLocation[];
}

const API_BASE = "/api/admin/warehouse/items";

// Must match UnitEnum in src/schemas/warehouse.schema.ts — the server rejects
// any other value (CreateItemSchema/UpdateItemSchema), so free text here would
// make the save 400.
const UNIT_OPTIONS = ["ks", "m", "kg", "bal", "sada", "m2", "m3", "l"] as const;

interface ItemForm {
  item_number: string;
  name: string;
  description: string;
  category_id: string;
  unit: string;
  min_quantity: string;
  notes: string;
}

const EditIcon = (
  <svg
    width="18"
    height="18"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
  </svg>
);

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>
);

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

  const [editing, setEditing] = useState(false);
  const [form, setForm] = useState<ItemForm>({
    item_number: "",
    name: "",
    description: "",
    category_id: "",
    unit: "ks",
    min_quantity: "",
    notes: "",
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);

  const isNew = id === "new";
  const itemQuery = useQuery(warehouseItemDetailOptions(id, !!id && !isNew));
  const item = itemQuery.data as ItemDetail | undefined;
  const isPending = itemQuery.isPending;

  const { data: categories = [] } = useQuery(warehouseCategoryListOptions());

  const formInitialized = useRef(false);
  useEffect(() => {
    formInitialized.current = false;
  }, [id]);

  useEffect(() => {
    if (item && !formInitialized.current) {
      setForm({
        item_number: item.item_number || "",
        name: item.name,
        description: item.description || "",
        category_id: item.category_id ? String(item.category_id) : "",
        unit: item.unit,
        min_quantity:
          item.min_quantity != null ? String(item.min_quantity) : "",
        notes: item.notes || "",
      });
      formInitialized.current = true;
    }
  }, [item]);

  useEffect(() => {
    if (itemQuery.error && !isNew) {
      alert.error("Položka nenalezena");
      navigate("/warehouse/items");
    }
  }, [itemQuery.error]); // eslint-disable-line react-hooks/exhaustive-deps

  useModalLock(editing);

  const saveMutation = useApiMutation<
    Record<string, unknown>,
    { id?: number; message?: string }
  >({
    url: () => (isNew ? API_BASE : `${API_BASE}/${id}`),
    method: () => (isNew ? "POST" : "PUT"),
    invalidate: ["warehouse"],
    onSuccess: (data) => {
      setEditing(false);
      alert.success(data?.message || "Položka byla uložena");
      if (isNew && data?.id) {
        navigate(`/warehouse/items/${data.id}`, { replace: true });
      }
    },
  });

  const deleteMutation = useApiMutation<void, void>({
    url: () => `${API_BASE}/${id ?? ""}`,
    method: () => "DELETE",
    invalidate: ["warehouse"],
    onSuccess: () => {
      navigate("/warehouse/items");
      setTimeout(() => alert.success("Položka byla deaktivována"), 300);
    },
  });

  // All hooks above this line — permission gate is the last thing before render.
  if (!hasPermission("warehouse.view")) return <Forbidden />;

  const canManage = hasPermission("warehouse.manage");

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

  const handleSave = async () => {
    const newErrors: Record<string, string> = {};
    if (!form.name.trim()) newErrors.name = "Zadejte název položky";
    if (!form.unit.trim()) newErrors.unit = "Zadejte jednotku";
    setErrors(newErrors);
    if (Object.keys(newErrors).length > 0) return;

    const payload: Record<string, unknown> = {
      item_number: form.item_number.trim() || null,
      name: form.name.trim(),
      description: form.description.trim() || null,
      category_id: form.category_id ? Number(form.category_id) : null,
      unit: form.unit.trim(),
      min_quantity: form.min_quantity ? Number(form.min_quantity) : null,
      notes: form.notes.trim() || null,
    };

    try {
      await saveMutation.mutateAsync(payload);
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    }
  };

  const handleDelete = async () => {
    if (!item) return;
    try {
      await deleteMutation.mutateAsync(undefined);
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    }
  };

  const saving = saveMutation.isPending;

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

  const batches: Batch[] = item?.batches ?? [];
  const locations: ItemLocation[] = item?.item_locations ?? [];

  const title = isNew ? "Nová položka" : item ? item.name : "Detail položky";
  const subtitle = item?.item_number || undefined;

  // Edit / view mode action buttons
  const headerActions = canManage ? (
    <Box sx={headerActionsSx}>
      {editing || isNew ? (
        <>
          {!isNew && (
            <Button
              variant="outlined"
              color="inherit"
              onClick={() => {
                setEditing(false);
                setErrors({});
                if (item) {
                  setForm({
                    item_number: item.item_number || "",
                    name: item.name,
                    description: item.description || "",
                    category_id: item.category_id
                      ? String(item.category_id)
                      : "",
                    unit: item.unit,
                    min_quantity:
                      item.min_quantity != null
                        ? String(item.min_quantity)
                        : "",
                    notes: item.notes || "",
                  });
                }
              }}
              disabled={saving}
            >
              Zrušit
            </Button>
          )}
          <Button onClick={handleSave} disabled={saving}>
            {saving ? "Ukládání..." : isNew ? "Vytvořit" : "Uložit"}
          </Button>
        </>
      ) : (
        <>
          {item && (
            <Button
              variant="outlined"
              color="error"
              onClick={() => setShowDeleteConfirm(true)}
            >
              Smazat
            </Button>
          )}
          <Button startIcon={EditIcon} onClick={() => setEditing(true)}>
            Upravit
          </Button>
        </>
      )}
    </Box>
  ) : undefined;

  // Batch table columns
  const batchColumns: DataColumn<Batch>[] = [
    {
      key: "received_at",
      header: "Datum příjmu",
      width: "22%",
      mono: true,
      render: (b) => formatDate(b.received_at),
    },
    {
      key: "original_qty",
      header: "Původní množství",
      width: "20%",
      mono: true,
      render: (b) => String(Number(b.original_qty)),
    },
    {
      key: "quantity",
      header: "Zůstatek",
      width: "18%",
      mono: true,
      bold: true,
      render: (b) => String(Number(b.quantity)),
    },
    {
      key: "unit_price",
      header: "Cena za jednotku",
      width: "20%",
      mono: true,
      render: (b) => formatCurrency(Number(b.unit_price), "CZK"),
    },
    {
      key: "value",
      header: "Hodnota",
      width: "20%",
      mono: true,
      render: (b) =>
        formatCurrency(Number(b.quantity) * Number(b.unit_price), "CZK"),
    },
  ];

  // Location table columns
  const locationColumns: DataColumn<ItemLocation>[] = [
    {
      key: "code",
      header: "Kód",
      width: "30%",
      mono: true,
      bold: true,
      render: (l) => l.location?.code || "—",
    },
    {
      key: "name",
      header: "Název",
      width: "50%",
      render: (l) => l.location?.name || "—",
    },
    {
      key: "quantity",
      header: "Množství",
      width: "20%",
      mono: true,
      bold: true,
      render: (l) => String(Number(l.quantity)),
    },
  ];

  return (
    <PageEnter>
      {/* Header */}
      <PageHeader
        title={title}
        subtitle={subtitle}
        actions={
          <Box sx={headerActionsSx}>
            <Button
              component={RouterLink}
              to="/warehouse/items"
              variant="outlined"
              color="inherit"
              startIcon={BackIcon}
            >
              Zpět
            </Button>
            {headerActions}
          </Box>
        }
      />

      {/* Basic info */}
      <Card sx={{ mb: 3 }}>
        <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
          Základní údaje
        </Typography>

        {editing || isNew ? (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 0 }}>
            <Box
              sx={{
                display: "grid",
                gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
                gap: 2,
              }}
            >
              <Field label="Číslo položky" error={errors.item_number}>
                <TextField
                  value={form.item_number}
                  onChange={(e) => {
                    updateForm("item_number", e.target.value);
                    setErrors((prev) => ({ ...prev, item_number: "" }));
                  }}
                  placeholder="Např. SKL-001"
                  fullWidth
                />
              </Field>
              <Field label="Název" required error={errors.name}>
                <TextField
                  value={form.name}
                  error={!!errors.name}
                  onChange={(e) => {
                    updateForm("name", e.target.value);
                    setErrors((prev) => ({ ...prev, name: "" }));
                  }}
                  placeholder="Název položky"
                  fullWidth
                />
              </Field>
            </Box>
            <Field label="Popis">
              <TextField
                multiline
                minRows={3}
                value={form.description}
                onChange={(e) => updateForm("description", e.target.value)}
                placeholder="Volitelný popis položky"
                fullWidth
              />
            </Field>
            <Box
              sx={{
                display: "grid",
                gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
                gap: 2,
              }}
            >
              <Field label="Kategorie">
                <Select
                  value={form.category_id}
                  onChange={(v) => updateForm("category_id", v)}
                >
                  <MenuItem value="">— Bez kategorie —</MenuItem>
                  {categories.map((cat) => (
                    <MenuItem key={cat.id} value={String(cat.id)}>
                      {cat.name}
                    </MenuItem>
                  ))}
                </Select>
              </Field>
              <Field label="Jednotka" required error={errors.unit}>
                <Select
                  value={form.unit}
                  error={!!errors.unit}
                  onChange={(v) => {
                    updateForm("unit", v);
                    setErrors((prev) => ({ ...prev, unit: "" }));
                  }}
                  options={UNIT_OPTIONS.map((u) => ({ value: u, label: u }))}
                />
              </Field>
              <Field
                label="Minimální množství"
                hint="Upozornění při poklesu pod tuto hranici"
              >
                <TextField
                  type="number"
                  inputProps={{ inputMode: "numeric", min: 0 }}
                  value={form.min_quantity}
                  onChange={(e) => updateForm("min_quantity", e.target.value)}
                  placeholder="0"
                  fullWidth
                />
              </Field>
            </Box>
            <Field label="Poznámky">
              <TextField
                multiline
                minRows={2}
                value={form.notes}
                onChange={(e) => updateForm("notes", e.target.value)}
                placeholder="Volitelné poznámky"
                fullWidth
              />
            </Field>
          </Box>
        ) : (
          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
              gap: 2,
            }}
          >
            {/* Číslo položky */}
            <Box>
              <Typography variant="caption" color="text.secondary">
                Číslo položky
              </Typography>
              <Typography
                variant="body2"
                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
              >
                {item?.item_number || "—"}
              </Typography>
            </Box>
            {/* Název */}
            <Box>
              <Typography variant="caption" color="text.secondary">
                Název
              </Typography>
              <Typography variant="body2" sx={{ fontWeight: 500 }}>
                {item?.name || "—"}
              </Typography>
            </Box>
            {/* Popis */}
            <Box sx={{ gridColumn: { sm: "1 / -1" } }}>
              <Typography variant="caption" color="text.secondary">
                Popis
              </Typography>
              <Typography variant="body2">
                {item?.description || "—"}
              </Typography>
            </Box>
            {/* Kategorie */}
            <Box>
              <Typography variant="caption" color="text.secondary">
                Kategorie
              </Typography>
              <Typography variant="body2">
                {item?.category?.name || "—"}
              </Typography>
            </Box>
            {/* Jednotka */}
            <Box>
              <Typography variant="caption" color="text.secondary">
                Jednotka
              </Typography>
              <Typography variant="body2">{item?.unit || "—"}</Typography>
            </Box>
            {/* Minimální množství */}
            <Box>
              <Typography variant="caption" color="text.secondary">
                Minimální množství
              </Typography>
              <Typography
                variant="body2"
                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
              >
                {item?.min_quantity != null ? item.min_quantity : "—"}
              </Typography>
            </Box>
            {/* Poznámky */}
            {item?.notes && (
              <Box sx={{ gridColumn: { sm: "1 / -1" } }}>
                <Typography variant="caption" color="text.secondary">
                  Poznámky
                </Typography>
                <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
                  {item.notes}
                </Typography>
              </Box>
            )}
          </Box>
        )}
      </Card>

      {/* Stock info — only in view mode, for existing items */}
      {id !== "new" && !editing && item && (
        <Box
          sx={{
            display: "grid",
            gridTemplateColumns: {
              xs: "1fr 1fr",
              md: "1fr 1fr 1fr 1fr",
            },
            gap: 2,
            mb: 3,
          }}
        >
          <StatCard
            label="Celkové množství"
            value={`${item.total_quantity ?? 0} ${item.unit}`}
            color="info"
          />
          <StatCard
            label="K dispozici"
            value={`${item.available_quantity ?? 0} ${item.unit}`}
            color="success"
          />
          <StatCard
            label="Hodnota zásob"
            value={
              item.stock_value != null
                ? formatCurrency(item.stock_value, "CZK")
                : "0,00 Kč"
            }
            color="warning"
          />
          <StatCard
            label="Pod minimem"
            value={item.below_minimum ? "Ano" : "Ne"}
            color={item.below_minimum ? "error" : "info"}
          />
        </Box>
      )}

      {/* Batches table — only in view mode, for existing items */}
      {id !== "new" && !editing && (
        <Card sx={{ mb: 3 }}>
          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
            Dávky (FIFO)
          </Typography>
          <DataTable<Batch>
            columns={batchColumns}
            rows={batches}
            rowKey={(b) => b.id}
            empty={<EmptyState title="Zatím žádné dávky" />}
          />
        </Card>
      )}

      {/* Locations table — only in view mode, for existing items */}
      {id !== "new" && !editing && (
        <Card sx={{ mb: 3 }}>
          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
            Umístění
          </Typography>
          <DataTable<ItemLocation>
            columns={locationColumns}
            rows={locations}
            rowKey={(l) => l.id}
            empty={<EmptyState title="Zatím žádná umístění" />}
          />
        </Card>
      )}

      {/* Delete confirmation */}
      <ConfirmDialog
        isOpen={showDeleteConfirm}
        onClose={() => setShowDeleteConfirm(false)}
        onConfirm={handleDelete}
        title="Smazat položku"
        message={`Opravdu chcete smazat položku „${item?.name ?? ""}"?`}
        confirmText="Smazat"
        confirmVariant="danger"
        loading={deleteMutation.isPending}
      />
    </PageEnter>
  );
}