import { useState, useCallback, useRef } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import { motion, AnimatePresence } from "framer-motion";
import ConfirmModal from "../components/ConfirmModal";
import FormField from "../components/FormField";
import Forbidden from "../components/Forbidden";
import useModalLock from "../hooks/useModalLock";
import { offerCustomersOptions } from "../lib/queries/offers";
import { Skeleton } from "boneyard-js/react";
import OffersCustomersFixture from "../fixtures/OffersCustomersFixture";

import apiFetch from "../utils/api";

const API_BASE = "/api/admin";

const DEFAULT_CUSTOMER_FIELD_ORDER = [
  "street",
  "city_postal",
  "country",
  "company_id",
  "vat_id",
];

const CUSTOMER_FIELD_LABELS: Record<string, string> = {
  street: "Ulice",
  city_postal: "Město + PSČ",
  country: "Země",
  company_id: "IČO",
  vat_id: "DIČ",
};

interface Customer {
  id: number;
  name: string;
  street?: string;
  city?: string;
  postal_code?: string;
  country?: string;
  company_id?: string;
  vat_id?: string;
  quotation_count: number;
  custom_fields?: CustomField[];
  customer_field_order?: string[];
}

interface CustomField {
  name: string;
  value: string;
  showLabel: boolean;
  _key?: string;
}

interface CustomerForm {
  name: string;
  street: string;
  city: string;
  postal_code: string;
  country: string;
  company_id: string;
  vat_id: string;
}

export default function OffersCustomers() {
  const alert = useAlert();
  const { hasPermission } = useAuth();
  const queryClient = useQueryClient();
  const { data: customers = [], isPending } = useQuery(
    offerCustomersOptions(),
  ) as { data: Customer[]; isPending: boolean };
  const [search, setSearch] = useState("");

  const [showModal, setShowModal] = useState(false);
  const [editingCustomer, setEditingCustomer] = useState<Customer | null>(null);
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState<CustomerForm>({
    name: "",
    street: "",
    city: "",
    postal_code: "",
    country: "",
    company_id: "",
    vat_id: "",
  });
  const [customFields, setCustomFields] = useState<CustomField[]>([]);
  const customFieldKeyCounter = useRef(0);
  const [fieldOrder, setFieldOrder] = useState<string[]>([
    ...DEFAULT_CUSTOMER_FIELD_ORDER,
  ]);

  const [deleteConfirm, setDeleteConfirm] = useState<{
    show: boolean;
    customer: Customer | null;
  }>({ show: false, customer: null });
  const [deleting, setDeleting] = useState(false);

  useModalLock(showModal);

  const getFullFieldOrder = useCallback(() => {
    const allBuiltIn = [...DEFAULT_CUSTOMER_FIELD_ORDER];
    const order = [...fieldOrder].filter((k) => k !== "name");

    for (const f of allBuiltIn) {
      if (!order.includes(f)) order.push(f);
    }

    for (let i = 0; i < customFields.length; i++) {
      const key = `custom_${i}`;
      if (!order.includes(key)) order.push(key);
    }

    return order.filter((key) => {
      if (key.startsWith("custom_")) {
        const idx = parseInt(key.split("_")[1]);
        return idx < customFields.length;
      }
      return true;
    });
  }, [fieldOrder, customFields]);

  const moveField = (index: number, direction: number) => {
    const order = getFullFieldOrder();
    const newIndex = index + direction;
    if (newIndex < 0 || newIndex >= order.length) return;
    const updated = [...order];
    [updated[index], updated[newIndex]] = [updated[newIndex], updated[index]];
    setFieldOrder(updated);
  };

  const getFieldDisplayName = (key: string) => {
    if (CUSTOMER_FIELD_LABELS[key]) return CUSTOMER_FIELD_LABELS[key];
    if (key.startsWith("custom_")) {
      const idx = parseInt(key.split("_")[1]);
      const cf = customFields[idx];
      if (cf)
        return cf.name
          ? `${cf.name}: ${cf.value || "..."}`
          : cf.value || `Vlastní pole ${idx + 1}`;
    }
    return key;
  };

  // Data fetching moved to useQuery(offerCustomersOptions()) above

  const openCreateModal = () => {
    setEditingCustomer(null);
    setForm({
      name: "",
      street: "",
      city: "",
      postal_code: "",
      country: "",
      company_id: "",
      vat_id: "",
    });
    setCustomFields([]);
    setFieldOrder([...DEFAULT_CUSTOMER_FIELD_ORDER]);
    setShowModal(true);
  };

  const openEditModal = (customer: Customer) => {
    setEditingCustomer(customer);
    setForm({
      name: customer.name || "",
      street: customer.street || "",
      city: customer.city || "",
      postal_code: customer.postal_code || "",
      country: customer.country || "",
      company_id: customer.company_id || "",
      vat_id: customer.vat_id || "",
    });
    const cf =
      Array.isArray(customer.custom_fields) && customer.custom_fields.length > 0
        ? customer.custom_fields.map((f) => ({
            ...f,
            _key: `cf-${++customFieldKeyCounter.current}`,
          }))
        : [];
    setCustomFields(cf);
    if (
      Array.isArray(customer.customer_field_order) &&
      customer.customer_field_order.length > 0
    ) {
      setFieldOrder(customer.customer_field_order);
    } else {
      setFieldOrder([...DEFAULT_CUSTOMER_FIELD_ORDER]);
    }
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
    setEditingCustomer(null);
  };

  const handleSubmit = async () => {
    if (!form.name.trim()) {
      alert.error("Název zákazníka je povinný");
      return;
    }

    setSaving(true);
    try {
      const url = editingCustomer
        ? `${API_BASE}/customers/${editingCustomer.id}`
        : `${API_BASE}/customers`;

      const payload = {
        ...form,
        custom_fields: customFields.filter(
          (f) => f.name.trim() || f.value.trim(),
        ),
        customer_field_order: getFullFieldOrder(),
      };

      const response = await apiFetch(url, {
        method: editingCustomer ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const result = await response.json();

      if (result.success) {
        closeModal();
        await new Promise((resolve) => setTimeout(resolve, 300));
        alert.success(
          result.message ||
            (editingCustomer
              ? "Zákazník byl aktualizován"
              : "Zákazník byl vytvořen"),
        );
        queryClient.invalidateQueries({ queryKey: ["offer-customers"] });
      } else {
        alert.error(result.error || "Nepodařilo se uložit zákazníka");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!deleteConfirm.customer) return;

    setDeleting(true);
    try {
      const response = await apiFetch(
        `${API_BASE}/customers/${deleteConfirm.customer.id}`,
        {
          method: "DELETE",
        },
      );

      const result = await response.json();

      if (result.success) {
        setDeleteConfirm({ show: false, customer: null });
        alert.success(result.message || "Zákazník byl smazán");
        queryClient.invalidateQueries({ queryKey: ["offer-customers"] });
      } else {
        alert.error(result.error || "Nepodařilo se smazat zákazníka");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setDeleting(false);
    }
  };

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

  const filteredCustomers = search
    ? customers.filter(
        (c) =>
          (c.name || "").toLowerCase().includes(search.toLowerCase()) ||
          (c.company_id || "").includes(search) ||
          (c.city || "").toLowerCase().includes(search.toLowerCase()),
      )
    : customers;

  const fullFieldOrder = getFullFieldOrder();

  return (
    <Skeleton
      name="offers-customers"
      loading={isPending}
      fixture={<OffersCustomersFixture />}
    >
      <div>
        <motion.div
          className="admin-page-header"
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.25 }}
        >
          <div>
            <h1 className="admin-page-title">Zákazníci</h1>
            <p className="admin-page-subtitle">Správa zákazníků pro nabídky</p>
          </div>
          {hasPermission("offers.create") && (
            <button
              onClick={openCreateModal}
              className="admin-btn admin-btn-primary"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <line x1="12" y1="5" x2="12" y2="19" />
                <line x1="5" y1="12" x2="19" y2="12" />
              </svg>
              Přidat zákazníka
            </button>
          )}
        </motion.div>

        <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">
            <div className="admin-search-bar mb-4">
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="admin-form-input"
                placeholder="Hledat zákazníky..."
              />
            </div>

            {filteredCustomers.length === 0 ? (
              <div className="admin-empty-state">
                <p>
                  {search
                    ? "Žádní zákazníci odpovídající hledání."
                    : "Zatím nejsou žádní zákazníci."}
                </p>
                {!search && hasPermission("offers.create") && (
                  <button
                    onClick={openCreateModal}
                    className="admin-btn admin-btn-primary"
                  >
                    Přidat prvního zákazníka
                  </button>
                )}
              </div>
            ) : (
              <div className="admin-table-responsive">
                <table className="admin-table">
                  <thead>
                    <tr>
                      <th>Název</th>
                      <th>Město</th>
                      <th>IČO</th>
                      <th>DIČ</th>
                      <th>Nabídky</th>
                      <th>Akce</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredCustomers.map((customer) => (
                      <tr key={customer.id}>
                        <td>
                          <div
                            style={{
                              fontWeight: 500,
                              color: "var(--text-primary)",
                            }}
                          >
                            {customer.name}
                          </div>
                          {customer.street && (
                            <div
                              className="text-tertiary"
                              style={{ fontSize: "11px" }}
                            >
                              {customer.street}
                            </div>
                          )}
                        </td>
                        <td>{customer.city || "—"}</td>
                        <td>{customer.company_id || "—"}</td>
                        <td>{customer.vat_id || "—"}</td>
                        <td>
                          <span className="admin-badge admin-badge-info">
                            {customer.quotation_count || 0}
                          </span>
                        </td>
                        <td>
                          <div className="admin-table-actions">
                            {hasPermission("offers.edit") && (
                              <button
                                onClick={() => openEditModal(customer)}
                                className="admin-btn-icon"
                                title="Upravit"
                                aria-label="Upravit"
                              >
                                <svg
                                  width="18"
                                  height="18"
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="2"
                                >
                                  <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>
                              </button>
                            )}
                            {hasPermission("offers.delete") && (
                              <button
                                onClick={() =>
                                  setDeleteConfirm({ show: true, customer })
                                }
                                className="admin-btn-icon danger"
                                title={
                                  customer.quotation_count > 0
                                    ? "Nelze smazat zákazníka s nabídkami"
                                    : "Smazat"
                                }
                                aria-label={
                                  customer.quotation_count > 0
                                    ? "Nelze smazat zákazníka s nabídkami"
                                    : "Smazat"
                                }
                                disabled={customer.quotation_count > 0}
                              >
                                <svg
                                  width="18"
                                  height="18"
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="2"
                                >
                                  <polyline points="3 6 5 6 21 6" />
                                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                                </svg>
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </motion.div>

        {/* Create/Edit Modal */}
        <AnimatePresence>
          {showModal && (
            <motion.div
              className="admin-modal-overlay"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
            >
              <div className="admin-modal-backdrop" onClick={closeModal} />
              <motion.div
                className="admin-modal"
                style={{ maxWidth: 720 }}
                initial={{ opacity: 0, scale: 0.95, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95, y: 20 }}
                transition={{ duration: 0.2 }}
              >
                <div className="admin-modal-header">
                  <h2 className="admin-modal-title">
                    {editingCustomer ? "Upravit zákazníka" : "Nový zákazník"}
                  </h2>
                </div>

                <div className="admin-modal-body">
                  <div className="admin-form">
                    <FormField label="Název" required>
                      <input
                        type="text"
                        value={form.name}
                        onChange={(e) =>
                          setForm((prev) => ({ ...prev, name: e.target.value }))
                        }
                        className="admin-form-input"
                        placeholder="Název firmy / jméno"
                      />
                    </FormField>
                    <FormField label="Ulice">
                      <input
                        type="text"
                        value={form.street}
                        onChange={(e) =>
                          setForm((prev) => ({
                            ...prev,
                            street: e.target.value,
                          }))
                        }
                        className="admin-form-input"
                      />
                    </FormField>
                    <div className="admin-form-row">
                      <FormField label="Město">
                        <input
                          type="text"
                          value={form.city}
                          onChange={(e) =>
                            setForm((prev) => ({
                              ...prev,
                              city: e.target.value,
                            }))
                          }
                          className="admin-form-input"
                        />
                      </FormField>
                      <FormField label="PSČ">
                        <input
                          type="text"
                          value={form.postal_code}
                          onChange={(e) =>
                            setForm((prev) => ({
                              ...prev,
                              postal_code: e.target.value,
                            }))
                          }
                          className="admin-form-input"
                        />
                      </FormField>
                    </div>
                    <FormField label="Země">
                      <input
                        type="text"
                        value={form.country}
                        onChange={(e) =>
                          setForm((prev) => ({
                            ...prev,
                            country: e.target.value,
                          }))
                        }
                        className="admin-form-input"
                      />
                    </FormField>
                    <div className="admin-form-row">
                      <FormField label="IČO">
                        <input
                          type="text"
                          value={form.company_id}
                          onChange={(e) =>
                            setForm((prev) => ({
                              ...prev,
                              company_id: e.target.value,
                            }))
                          }
                          className="admin-form-input"
                        />
                      </FormField>
                      <FormField label="DIČ">
                        <input
                          type="text"
                          value={form.vat_id}
                          onChange={(e) =>
                            setForm((prev) => ({
                              ...prev,
                              vat_id: e.target.value,
                            }))
                          }
                          className="admin-form-input"
                        />
                      </FormField>
                    </div>

                    {/* Dynamic custom fields */}
                    <div style={{ marginTop: 4 }}>
                      <label
                        className="admin-form-label"
                        style={{ display: "block", marginBottom: 4 }}
                      >
                        Vlastní pole
                      </label>
                      {customFields.map((field, idx) => (
                        <div key={field._key} style={{ marginBottom: 8 }}>
                          <div
                            className="admin-form-row"
                            style={{ marginBottom: 0, alignItems: "flex-end" }}
                          >
                            <FormField
                              label={idx === 0 ? "Název" : "\u00A0"}
                              style={{ flex: 1 }}
                            >
                              <input
                                type="text"
                                value={field.name}
                                onChange={(e) => {
                                  const updated = [...customFields];
                                  updated[idx] = {
                                    ...updated[idx],
                                    name: e.target.value,
                                  };
                                  setCustomFields(updated);
                                }}
                                className="admin-form-input"
                                placeholder="Např. Kontakt"
                              />
                            </FormField>
                            <FormField
                              label={idx === 0 ? "Hodnota" : "\u00A0"}
                              style={{ flex: 1 }}
                            >
                              <div
                                style={{
                                  display: "flex",
                                  gap: 4,
                                  alignItems: "center",
                                }}
                              >
                                <input
                                  type="text"
                                  value={field.value}
                                  onChange={(e) => {
                                    const updated = [...customFields];
                                    updated[idx] = {
                                      ...updated[idx],
                                      value: e.target.value,
                                    };
                                    setCustomFields(updated);
                                  }}
                                  className="admin-form-input"
                                  style={{ flex: 1 }}
                                />
                                <button
                                  type="button"
                                  onClick={() => {
                                    const key = `custom_${idx}`;
                                    setFieldOrder((prev) => {
                                      return prev
                                        .filter((k) => k !== key)
                                        .map((k) => {
                                          if (k.startsWith("custom_")) {
                                            const ki = parseInt(
                                              k.split("_")[1],
                                            );
                                            if (ki > idx)
                                              return `custom_${ki - 1}`;
                                          }
                                          return k;
                                        });
                                    });
                                    setCustomFields(
                                      customFields.filter((_, i) => i !== idx),
                                    );
                                  }}
                                  className="admin-btn-icon danger"
                                  title="Odebrat pole"
                                  aria-label="Odebrat pole"
                                >
                                  <svg
                                    width="14"
                                    height="14"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                  >
                                    <line x1="18" y1="6" x2="6" y2="18" />
                                    <line x1="6" y1="6" x2="18" y2="18" />
                                  </svg>
                                </button>
                              </div>
                            </FormField>
                          </div>
                          <label
                            className="admin-form-checkbox"
                            style={{ marginTop: 4 }}
                          >
                            <input
                              type="checkbox"
                              checked={field.showLabel !== false}
                              onChange={(e) => {
                                const updated = [...customFields];
                                updated[idx] = {
                                  ...updated[idx],
                                  showLabel: e.target.checked,
                                };
                                setCustomFields(updated);
                              }}
                            />
                            <span style={{ fontSize: "0.8rem" }}>
                              Zobrazit název v PDF
                            </span>
                          </label>
                        </div>
                      ))}
                      <button
                        type="button"
                        onClick={() =>
                          setCustomFields([
                            ...customFields,
                            {
                              name: "",
                              value: "",
                              showLabel: true,
                              _key: `cf-${++customFieldKeyCounter.current}`,
                            },
                          ])
                        }
                        className="admin-btn admin-btn-secondary"
                        style={{ marginTop: 4, fontSize: "0.85rem" }}
                      >
                        <svg
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                        >
                          <line x1="12" y1="5" x2="12" y2="19" />
                          <line x1="5" y1="12" x2="19" y2="12" />
                        </svg>
                        Přidat pole
                      </button>
                    </div>

                    {/* Field order for PDF */}
                    <div style={{ marginTop: 16 }}>
                      <label className="admin-form-label">
                        Pořadí polí v PDF
                      </label>
                      <small
                        className="admin-form-hint"
                        style={{ display: "block", marginBottom: 8 }}
                      >
                        Určuje pořadí řádků v adresním bloku zákazníka na PDF
                        nabídce.
                      </small>
                      <div className="admin-reorder-list">
                        {fullFieldOrder.map((key, index) => (
                          <div key={key} className="admin-reorder-item">
                            <div className="admin-reorder-arrows">
                              <button
                                type="button"
                                onClick={() => moveField(index, -1)}
                                disabled={index === 0}
                                className="admin-btn-icon"
                                title="Nahoru"
                                aria-label="Nahoru"
                              >
                                <svg
                                  width="12"
                                  height="12"
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="2"
                                >
                                  <path d="M18 15l-6-6-6 6" />
                                </svg>
                              </button>
                              <button
                                type="button"
                                onClick={() => moveField(index, 1)}
                                disabled={index === fullFieldOrder.length - 1}
                                className="admin-btn-icon"
                                title="Dolů"
                                aria-label="Dolů"
                              >
                                <svg
                                  width="12"
                                  height="12"
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="2"
                                >
                                  <path d="M6 9l6 6 6-6" />
                                </svg>
                              </button>
                            </div>
                            <span
                              className={`admin-reorder-label${key.startsWith("custom_") ? " accent" : ""}`}
                            >
                              {getFieldDisplayName(key)}
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>

                <div className="admin-modal-footer">
                  <button
                    type="button"
                    onClick={closeModal}
                    className="admin-btn admin-btn-secondary"
                    disabled={saving}
                  >
                    Zrušit
                  </button>
                  <button
                    type="button"
                    onClick={handleSubmit}
                    className="admin-btn admin-btn-primary"
                    disabled={saving}
                  >
                    {saving && (
                      <>
                        <div className="admin-spinner admin-spinner-sm" />
                        Ukládání...
                      </>
                    )}
                    {!saving &&
                      (editingCustomer ? "Uložit změny" : "Vytvořit zákazníka")}
                  </button>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* Delete Confirm Modal */}
        <ConfirmModal
          isOpen={deleteConfirm.show}
          onClose={() => setDeleteConfirm({ show: false, customer: null })}
          onConfirm={handleDelete}
          title="Smazat zákazníka"
          message={`Opravdu chcete smazat zákazníka "${deleteConfirm.customer?.name}"? Tato akce je nevratná.`}
          confirmText="Smazat"
          cancelText="Zrušit"
          type="danger"
          loading={deleting}
        />
      </div>
    </Skeleton>
  );
}