import { useState } from "react";
import { useParams, Link } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import Forbidden from "../components/Forbidden";
import { motion } from "framer-motion";
import ConfirmModal from "../components/ConfirmModal";
import FormField from "../components/FormField";

import { formatDate } from "../utils/formatters";
import {
  warehouseInventoryDetailOptions,
  type WarehouseInventorySession,
} from "../lib/queries/warehouse";
import { useApiMutation } from "../lib/queries/mutations";

const STATUS_BADGE: Record<string, string> = {
  DRAFT: "admin-badge-warning",
  CONFIRMED: "admin-badge-active",
};

const STATUS_LABEL: Record<string, string> = {
  DRAFT: "Návrh",
  CONFIRMED: "Potvrzeno",
};

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

  const [showConfirmModal, setShowConfirmModal] = useState(false);

  const {
    data: session,
    isPending,
    error,
  } = useQuery(warehouseInventoryDetailOptions(id));

  if (!hasPermission("warehouse.inventory")) return <Forbidden />;

  const confirmMutation = useApiMutation<void, void>({
    url: () =>
      session
        ? `/api/admin/warehouse/inventory-sessions/${session.id}/confirm`
        : "/api/admin/warehouse/inventory-sessions/0/confirm",
    method: () => "POST",
    invalidate: ["warehouse"],
    onSuccess: () => {
      setShowConfirmModal(false);
      alert.success("Inventura byla potvrzena");
    },
  });

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

  const confirming = confirmMutation.isPending;

  if (isPending) {
    return (
      <div className="admin-loading">
        <div className="admin-spinner" />
      </div>
    );
  }

  if (error || !session) {
    return (
      <div>
        <div className="admin-page-header">
          <div>
            <Link
              to="/warehouse/inventory"
              className="admin-btn-icon"
              title="Zpět na seznam"
            >
              <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>
            </Link>
          </div>
        </div>
        <div className="admin-card">
          <div className="admin-card-body">
            <div className="admin-empty-state">
              <p>Inventura nebyla nalezena.</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const s = session as WarehouseInventorySession;
  const items = s.items ?? [];

  return (
    <div>
      {/* Header */}
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
          <Link
            to="/warehouse/inventory"
            className="admin-btn-icon"
            title="Zpět na seznam"
            aria-label="Zpět na seznam"
          >
            <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>
          </Link>
          <div>
            <h1 className="admin-page-title">
              {s.session_number || "Inventura"}
            </h1>
          </div>
          <span
            className={`admin-badge ${STATUS_BADGE[s.status] ?? ""}`}
            style={{ marginLeft: "0.5rem" }}
          >
            {STATUS_LABEL[s.status] ?? s.status}
          </span>
        </div>
        <div className="admin-page-actions">
          {s.status === "DRAFT" && (
            <button
              onClick={() => setShowConfirmModal(true)}
              className="admin-btn admin-btn-primary"
              disabled={confirming}
            >
              {confirming ? "Potvrzování..." : "Potvrdit inventuru"}
            </button>
          )}
        </div>
      </motion.div>

      {/* Header info */}
      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.06 }}
      >
        <div className="admin-card-body">
          <h3 className="admin-card-title">Základní údaje</h3>
          <div className="admin-form">
            <div className="admin-form-row">
              <FormField label="Číslo inventury">
                <div className="admin-mono fw-500">
                  {s.session_number || "—"}
                </div>
              </FormField>
              <FormField label="Vytvořeno">
                <div className="admin-mono">{formatDate(s.created_at)}</div>
              </FormField>
            </div>
            {s.notes && (
              <FormField label="Poznámky">
                <div style={{ whiteSpace: "pre-wrap" }}>{s.notes}</div>
              </FormField>
            )}
          </div>
        </div>
      </motion.div>

      {/* Lines table */}
      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.08 }}
      >
        <div className="admin-card-body">
          <h3 className="admin-card-title">Položky</h3>
          {items.length === 0 ? (
            <div className="admin-empty-state">Žádné řádky</div>
          ) : (
            <div className="admin-table-responsive">
              <table className="admin-table">
                <thead>
                  <tr>
                    <th>Položka</th>
                    <th>Lokace</th>
                    <th>Systémové množství</th>
                    <th>Skutečné množství</th>
                    <th>Rozdíl</th>
                    <th>Poznámka</th>
                  </tr>
                </thead>
                <tbody>
                  {items.map((item) => {
                    const diff = Number(item.difference);
                    const diffColor =
                      diff > 0
                        ? "var(--success)"
                        : diff < 0
                          ? "var(--danger)"
                          : "var(--text-secondary)";
                    return (
                      <tr key={item.id}>
                        <td className="fw-500">
                          {item.item?.name || `ID: ${item.item_id}`}
                        </td>
                        <td className="admin-mono">
                          {item.location?.code || "—"}
                        </td>
                        <td className="admin-mono">
                          {Number(item.system_qty)}
                        </td>
                        <td className="admin-mono">
                          {Number(item.actual_qty)}
                        </td>
                        <td
                          className="admin-mono fw-500"
                          style={{ color: diffColor }}
                        >
                          {diff > 0 ? `+${diff}` : diff}
                        </td>
                        <td>{item.notes || "—"}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </motion.div>

      {/* Confirm modal */}
      <ConfirmModal
        isOpen={showConfirmModal}
        onClose={() => setShowConfirmModal(false)}
        onConfirm={handleConfirm}
        title="Potvrdit inventuru"
        message={`Opravdu chcete potvrdit inventuru „${s.session_number || s.id}"? Potvrzením se aktualizují skladové zásoby.`}
        confirmText="Potvrdit inventuru"
        type="warning"
        loading={confirming}
      />
    </div>
  );
}