"use client";

import Modal from "./Model";
import { useState } from "react";

export type CreatedAssetTypeOption = { label: string; value: string };

interface AssetTypeModalProps {
  isOpen: boolean;
  onClose: () => void;
  /** Yii master_id of the asset class (parent_master). */
  assetClassId: number;
  onSuccess?: (option: CreatedAssetTypeOption) => void;
}

export default function AssetTypeModal({
  isOpen,
  onClose,
  assetClassId,
  onSuccess,
}: AssetTypeModalProps) {
  const [code, setCode] = useState("");
  const [masterName, setMasterName] = useState("");
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSave = async () => {
    const name = masterName.trim();
    if (!name) {
      setError("Asset type name is required.");
      return;
    }
    if (!assetClassId || assetClassId < 1) {
      setError("Invalid asset class. Please reload the page.");
      return;
    }

    setError(null);
    setIsSaving(true);
    try {
      const body: Record<string, string | number> = {
        asset_class: assetClassId,
        master_name: name,
      };
      const codeTrim = code.trim();
      if (codeTrim) {
        body.code = codeTrim;
      }

      const response = await fetch("/api/stock/asset-type-create", {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      const result = await response.json().catch(() => ({}));
      const isSuccess = result?.success === true || result?.status === "success";
      const data = result?.data as { master_id?: string | number; label?: string } | undefined;

      if (isSuccess && data?.master_id != null) {
        const label =
          typeof data.label === "string" && data.label.trim() !== ""
            ? data.label
            : codeTrim
              ? `${codeTrim} ${name}`
              : name;
        onSuccess?.({ value: String(data.master_id), label });
        setMasterName("");
        setCode("");
        onClose();
      } else {
        const message =
          typeof result?.message === "string"
            ? result.message
            : !response.ok
              ? `Request failed (${response.status})`
              : "Failed to save asset type.";
        setError(message);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to save asset type.");
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      title="Add Asset Type"
      onClose={onClose}
      footer={
        <>
          <button
            type="button"
            onClick={onClose}
            disabled={isSaving}
            className="rounded-md border px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition disabled:opacity-50"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleSave}
            disabled={isSaving}
            className="rounded-md bg-[#428B4D] px-4 py-2 text-sm font-medium text-white hover:bg-[#35703E] transition disabled:opacity-50"
          >
            {isSaving ? "Saving..." : "Save"}
          </button>
        </>
      }
    >
      <div className="space-y-4">
        {error && (
          <p className="text-sm text-red-600" role="alert">
            {error}
          </p>
        )}
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            Code <span className="font-normal text-gray-500">(optional)</span>
          </label>
          <input
            type="text"
            maxLength={6}
            placeholder="e.g. 01"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm
                       focus:border-[#428B4D] focus:outline-none focus:ring-2 focus:ring-[#428B4D]/20"
          />
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            Asset type name
          </label>
          <input
            type="text"
            placeholder="Enter asset type name"
            value={masterName}
            onChange={(e) => setMasterName(e.target.value)}
            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm
                       focus:border-[#428B4D] focus:outline-none focus:ring-2 focus:ring-[#428B4D]/20"
          />
        </div>
      </div>
    </Modal>
  );
}