"use client";

import { useEffect, useState } from "react";
import { DataTable } from "@/components/data-table";
import {
  getWarehouses,
  createWarehouse,
  updateWarehouse,
  WarehouseRecord,
} from "@/lib/api";

// Flat row type for DataTable (string | number only)
type WarehouseRow = {
  _id: string;
  name: string;
  code: string;
  aliases: string;
  active: string;
};

function toRow(w: WarehouseRecord): WarehouseRow {
  return {
    _id: w._id,
    name: w.name,
    code: w.code,
    aliases: w.aliases.join(", "),
    active: w.active ? "Active" : "Inactive",
  };
}

export default function WarehousesPage() {
  const [warehouses, setWarehouses] = useState<WarehouseRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [editTarget, setEditTarget] = useState<WarehouseRecord | null>(null);
  const [formError, setFormError] = useState<string | null>(null);

  // Form field state
  const [formName, setFormName] = useState("");
  const [formCode, setFormCode] = useState("");
  const [formAliases, setFormAliases] = useState("");
  const [formActive, setFormActive] = useState(true);

  async function refresh() {
    setLoading(true);
    setError(null);
    try {
      const data = await getWarehouses();
      setWarehouses(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load warehouses");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    refresh();
  }, []);

  function openAddModal() {
    setEditTarget(null);
    setFormName("");
    setFormCode("");
    setFormAliases("");
    setFormActive(true);
    setFormError(null);
    setModalOpen(true);
  }

  function openEditModal(record: WarehouseRecord) {
    setEditTarget(record);
    setFormName(record.name);
    setFormCode(record.code);
    setFormAliases(record.aliases.join(", "));
    setFormActive(record.active);
    setFormError(null);
    setModalOpen(true);
  }

  function closeModal() {
    setModalOpen(false);
    setFormError(null);
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setFormError(null);

    const aliasesArray = formAliases
      .split(",")
      .map((s) => s.trim())
      .filter(Boolean);

    try {
      if (editTarget === null) {
        await createWarehouse({ name: formName, code: formCode, aliases: aliasesArray });
      } else {
        await updateWarehouse(editTarget._id, {
          name: formName,
          code: formCode,
          aliases: aliasesArray,
          active: formActive,
        });
      }
      closeModal();
      await refresh();
    } catch (err) {
      setFormError(err instanceof Error ? err.message : "Operation failed");
    }
  }

  const rows: WarehouseRow[] = warehouses.map(toRow);

  return (
    <>
      <section className="hero">
        <h2>Warehouse registry with auto-create and update support.</h2>
        <p>
          Warehouse values extracted from documents can create new records or update existing aliases.
        </p>
      </section>
      <section className="section">
        <div className="section-header">
          <div>
            <h3>Warehouse list</h3>
            <p>Ready for CRUD, alias management, and document matching rules.</p>
          </div>
          <button className="button" onClick={openAddModal}>
            Add Warehouse
          </button>
        </div>

        {loading && <p>Loading warehouses…</p>}
        {error && <p className="error">{error}</p>}
        {!loading && !error && (
          <DataTable<WarehouseRow>
            rows={rows}
            columns={[
              { key: "name", label: "Name" },
              { key: "code", label: "Code" },
              { key: "aliases", label: "Aliases" },
              {
                key: "active",
                label: "Status",
                render: (value) =>
                  value === "Active" ? (
                    <span className="badge ok">Active</span>
                  ) : (
                    <span className="badge warn">Inactive</span>
                  ),
              },
              {
                key: "_id",
                label: "Actions",
                render: (_value, row) => {
                  const record = warehouses.find((w) => w._id === row._id);
                  return (
                    <button
                      className="button"
                      onClick={() => record && openEditModal(record)}
                    >
                      Edit
                    </button>
                  );
                },
              },
            ]}
          />
        )}
      </section>

      {modalOpen && (
        <div
          className="doc-modal-backdrop"
          onClick={(e) => { if (e.target === e.currentTarget) closeModal(); }}
        >
          <div className="doc-modal" style={{ maxWidth: 480 }}>

            {/* Header */}
            <div className="doc-modal-header">
              <div>
                <strong className="doc-modal-title">
                  {editTarget ? "Edit Warehouse" : "Add Warehouse"}
                </strong>
                <span className="doc-modal-meta">
                  {editTarget
                    ? "Update name, code, aliases or status"
                    : "Register a new warehouse in the system"}
                </span>
              </div>
              <button
                className="doc-modal-close"
                onClick={closeModal}
                aria-label="Close"
              >
                ✕
              </button>
            </div>

            {/* Body */}
            <div style={{ padding: "20px 22px 24px" }}>
              {formError && (
                <div style={{
                  padding: "10px 14px",
                  borderRadius: 12,
                  background: "var(--danger-soft)",
                  color: "var(--danger)",
                  fontSize: "0.84rem",
                  marginBottom: 18,
                  border: "1px solid rgba(214,69,69,0.18)",
                }}>
                  {formError}
                </div>
              )}

              <form onSubmit={handleSubmit} className="stack">

                {/* Name */}
                <div className="form-field">
                  <label htmlFor="wh-name" className="form-label">
                    Name <span className="form-required">*</span>
                  </label>
                  <input
                    id="wh-name"
                    type="text"
                    required
                    placeholder="e.g. Abu Dhabi Central"
                    value={formName}
                    onChange={(e) => setFormName(e.target.value)}
                    className="form-input"
                  />
                </div>

                {/* Code */}
                <div className="form-field">
                  <label htmlFor="wh-code" className="form-label">
                    Code <span className="form-required">*</span>
                  </label>
                  <input
                    id="wh-code"
                    type="text"
                    required
                    placeholder="e.g. ADC"
                    value={formCode}
                    onChange={(e) => setFormCode(e.target.value.toUpperCase())}
                    className="form-input"
                    style={{ textTransform: "uppercase", letterSpacing: "0.08em" }}
                  />
                  <span className="form-hint">Short uppercase identifier used in documents</span>
                </div>

                {/* Aliases */}
                <div className="form-field">
                  <label htmlFor="wh-aliases" className="form-label">
                    Aliases
                    <span className="form-optional">optional</span>
                  </label>
                  <input
                    id="wh-aliases"
                    type="text"
                    placeholder="e.g. AD Central, Abu Dhabi WH"
                    value={formAliases}
                    onChange={(e) => setFormAliases(e.target.value)}
                    className="form-input"
                  />
                  <span className="form-hint">Comma-separated. Used to match warehouse names in extracted documents.</span>
                </div>

                {/* Active toggle — only shown when editing */}
                {editTarget && (
                  <div className="form-field">
                    <label className="form-label">Status</label>
                    <label className="toggle-row">
                      <div
                        className={`toggle-track ${formActive ? "toggle-on" : ""}`}
                        onClick={() => setFormActive((v) => !v)}
                        role="switch"
                        aria-checked={formActive}
                        tabIndex={0}
                        onKeyDown={(e) => e.key === " " && setFormActive((v) => !v)}
                      >
                        <div className="toggle-thumb" />
                      </div>
                      <span className="toggle-label">
                        {formActive ? "Active" : "Inactive"}
                      </span>
                    </label>
                  </div>
                )}

                {/* Actions */}
                <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 8 }}>
                  <button
                    type="button"
                    className="button secondary"
                    onClick={closeModal}
                  >
                    Cancel
                  </button>
                  <button type="submit" className="button">
                    {editTarget ? "Save Changes" : "Create Warehouse"}
                  </button>
                </div>

              </form>
            </div>
          </div>
        </div>
      )}
    </>
  );
}