WORKFLOW-APP/components/AddEntityModal.tsx

"use client";

// components/AddEntityModal.tsx
// Shared modal for adding a new client director or company.
// Opens on "Add Director" / "Add Company" button click.
// On submit: POSTs to /api/pb/records/create, invalidates the
// relevant list query, shows success toast, closes modal.

import { useState, useEffect, useRef } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { pbCreateClient } from "@/lib/api";
import { pbList } from "@/lib/api";

interface Props {
  /** "director" | "company" */
  entity: "director" | "company";
  /** Controlled open state (passed from parent) */
  open: boolean;
  /** Called when modal requests to close (user dismissed or success) */
  onClose: () => void;
}

interface Director {
  id: string;
  surname: string;
  first_names: string;
  id_no: string;
}

export default function AddEntityModal({ entity, open, onClose }: Props) {
  const qc = useQueryClient();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const overlayRef = useRef<HTMLDivElement>(null);

  // Director form state
  const [surname, setSurname] = useState("");
  const [firstNames, setFirstNames] = useState("");
  const [idNo, setIdNo] = useState("");
  const [telephone, setTelephone] = useState("");
  const [email, setEmail] = useState("");

  // Company form state
  const [enterpriseNo, setEnterpriseNo] = useState("");
  const [enterpriseName, setEnterpriseName] = useState("");
  const [enterpriseType, setEnterpriseType] = useState("");
  const [registrationDate, setRegistrationDate] = useState("");
  const [physicalAddress, setPhysicalAddress] = useState("");
  const [postalAddress, setPostalAddress] = useState("");
  const [selectedDirectorId, setSelectedDirectorId] = useState("");

  // Directors list for company form dropdown
  const [directors, setDirectors] = useState<Director[]>([]);

  // Reset form whenever modal opens
  useEffect(() => {
    if (open) {
      setSurname(""); setFirstNames(""); setIdNo(""); setTelephone(""); setEmail("");
      setEnterpriseNo(""); setEnterpriseName(""); setEnterpriseType("");
      setRegistrationDate(""); setPhysicalAddress(""); setPostalAddress("");
      setSelectedDirectorId(""); setError(null);
    }
  }, [open]);

  // Load directors list when opening the company form
  useEffect(() => {
    if (open && entity === "company") {
      pbList<Director>({
        collection: "ysterbaard_directors",
        perPage: 500,
        sort: "surname",
        fields: "id,surname,first_names,id_no",
      }).then((r) => setDirectors(r.items)).catch(() => {});
    }
  }, [open, entity]);

  if (!open) return null;

  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === overlayRef.current) onClose();
  };

  const isDirector = entity === "director";
  const title = isDirector ? "Add new client director" : "Add new client company";
  const subtitle = isDirector
    ? "Fill in the details. The director will be saved with is_client=true."
    : "Fill in the details. The company will be saved with is_client=true.";

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setLoading(true);

    try {
      if (isDirector) {
        if (!surname.trim() || !firstNames.trim()) {
          setError("Surname and first names are required.");
          setLoading(false);
          return;
        }
        const fields: Record<string, string> = {
          surname: surname.trim(),
          first_names: firstNames.trim(),
          source: "app",
        };
        if (idNo.trim()) fields.id_no = idNo.trim();
        if (telephone.trim()) fields.telephone = telephone.trim();
        if (email.trim()) fields.email = email.trim();
        await pbCreateClient({ collection: "ysterbaard_directors", fields });
        await qc.invalidateQueries({ queryKey: ["pb-list", "ysterbaard_directors"] });
      } else {
        if (!enterpriseNo.trim() || !enterpriseName.trim()) {
          setError("Enterprise number and name are required.");
          setLoading(false);
          return;
        }
        const fields: Record<string, string> = {
          enterprise_no: enterpriseNo.trim().toUpperCase(),
          enterprise_name: enterpriseName.trim().toUpperCase(),
          source: "app",
        };
        if (enterpriseType.trim()) fields.enterprise_type = enterpriseType.trim();
        if (registrationDate.trim()) fields.registration_date = registrationDate.trim();
        if (physicalAddress.trim()) fields.physical_address = physicalAddress.trim();
        if (postalAddress.trim()) fields.postal_address = postalAddress.trim();
        if (selectedDirectorId) fields.director = selectedDirectorId;
        await pbCreateClient({ collection: "ysterbaard_companies", fields });
        await qc.invalidateQueries({ queryKey: ["pb-list", "ysterbaard_companies"] });
      }
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      ref={overlayRef}
      onClick={handleOverlayClick}
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
      role="dialog"
      aria-modal="true"
      aria-label={title}
    >
      <div className="bg-surface border border-border rounded-xl shadow-2xl w-full max-w-lg flex flex-col max-h-[90vh]">
        {/* Header */}
        <div className="px-6 pt-6 pb-4 border-b border-border flex-shrink-0">
          <div className="flex items-start justify-between">
            <div>
              <h2 className="text-lg font-bold text-fg">{title}</h2>
              <p className="text-sm text-muted mt-0.5">{subtitle}</p>
            </div>
            <button
              onClick={onClose}
              className="ml-4 text-muted hover:text-fg text-xl leading-none p-1 rounded transition-colors"
              aria-label="Close"
            >
              ×
            </button>
          </div>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto px-6 py-5 space-y-4">
          {error && (
            <div className="bg-red-500/10 border border-red-500/30 rounded-lg px-4 py-3 text-sm text-red-400">
              {error}
            </div>
          )}

          {isDirector ? (
            <>
              {/* Surname */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="surname">
                  Surname <span className="text-red-400">*</span>
                </label>
                <input
                  id="surname"
                  type="text"
                  value={surname}
                  onChange={(e) => setSurname(e.target.value.toUpperCase())}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                  placeholder="e.g. JONES"
                  required
                />
              </div>

              {/* First names */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="firstNames">
                  First names <span className="text-red-400">*</span>
                </label>
                <input
                  id="firstNames"
                  type="text"
                  value={firstNames}
                  onChange={(e) => setFirstNames(e.target.value.toUpperCase())}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                  placeholder="e.g. PETER JOHANNES"
                  required
                />
              </div>

              {/* ID number */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="idNo">
                  SA ID number <span className="text-xs text-muted font-normal">(optional)</span>
                </label>
                <input
                  id="idNo"
                  type="tel"
                  value={idNo}
                  onChange={(e) => setIdNo(e.target.value.replace(/\D/g, "").slice(0, 13))}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent font-mono"
                  placeholder="13 digits"
                  maxLength={13}
                />
              </div>

              {/* Telephone */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="telephone">
                  Telephone <span className="text-xs text-muted font-normal">(optional)</span>
                </label>
                <input
                  id="telephone"
                  type="tel"
                  value={telephone}
                  onChange={(e) => setTelephone(e.target.value)}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                  placeholder="0821234567"
                />
              </div>

              {/* Email */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="email">
                  Email <span className="text-xs text-muted font-normal">(optional)</span>
                </label>
                <input
                  id="email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                  placeholder="director@example.com"
                />
              </div>
            </>
          ) : (
            <>
              {/* Enterprise number */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="enterpriseNo">
                  Enterprise number <span className="text-red-400">*</span>
                </label>
                <input
                  id="enterpriseNo"
                  type="text"
                  value={enterpriseNo}
                  onChange={(e) => setEnterpriseNo(e.target.value.toUpperCase())}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg font-mono placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                  placeholder="K2022808158"
                  required
                />
              </div>

              {/* Enterprise name */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="enterpriseName">
                  Enterprise name <span className="text-red-400">*</span>
                </label>
                <input
                  id="enterpriseName"
                  type="text"
                  value={enterpriseName}
                  onChange={(e) => setEnterpriseName(e.target.value.toUpperCase())}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                  placeholder="ABC TRADING PTY LTD"
                  required
                />
              </div>

              {/* Enterprise type */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="enterpriseType">
                  Enterprise type <span className="text-xs text-muted font-normal">(optional)</span>
                </label>
                <input
                  id="enterpriseType"
                  type="text"
                  value={enterpriseType}
                  onChange={(e) => setEnterpriseType(e.target.value)}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                  placeholder="Private Company"
                />
              </div>

              {/* Registration date */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="registrationDate">
                  Registration date <span className="text-xs text-muted font-normal">(optional)</span>
                </label>
                <input
                  id="registrationDate"
                  type="date"
                  value={registrationDate}
                  onChange={(e) => setRegistrationDate(e.target.value)}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                />
              </div>

              {/* Physical address */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="physicalAddress">
                  Physical address <span className="text-xs text-muted font-normal">(optional)</span>
                </label>
                <textarea
                  id="physicalAddress"
                  value={physicalAddress}
                  onChange={(e) => setPhysicalAddress(e.target.value)}
                  rows={2}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent resize-none"
                  placeholder="123 Main Street, Pretoria, 0001"
                />
              </div>

              {/* Postal address */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="postalAddress">
                  Postal address <span className="text-xs text-muted font-normal">(optional)</span>
                </label>
                <textarea
                  id="postalAddress"
                  value={postalAddress}
                  onChange={(e) => setPostalAddress(e.target.value)}
                  rows={2}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent resize-none"
                  placeholder="PO Box 123, Pretoria, 0001"
                />
              </div>

              {/* Linked director dropdown */}
              <div>
                <label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="directorSelect">
                  Linked director <span className="text-xs text-muted font-normal">(optional)</span>
                </label>
                <select
                  id="directorSelect"
                  value={selectedDirectorId}
                  onChange={(e) => setSelectedDirectorId(e.target.value)}
                  className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
                >
                  <option value="">— None —</option>
                  {directors.map((d) => (
                    <option key={d.id} value={d.id}>
                      {d.surname}, {d.first_names}
                      {d.id_no ? ` (${d.id_no})` : ""}
                    </option>
                  ))}
                </select>
              </div>
            </>
          )}

          {/* Submit */}
          <div className="pt-2 flex gap-3">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 px-4 py-2.5 rounded-lg border border-border bg-surface-warm text-sm font-semibold text-fg hover:bg-surface transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="flex-1 px-4 py-2.5 rounded-lg bg-accent text-accent-on text-sm font-bold hover:bg-accent-hover transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
            >
              {loading ? "Saving..." : "Save as client"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}