"use client";

import { useState } from "react";
import { API_URL } from '@/lib/api';

interface Part {
  id: number;
  partCode: string;
  name: string;
  category: string;
  manufacturer: string;
  unit: string;
  unitPrice: number;
  stockQuantity: number;
  reorderLevel: number;
  notes: string;
}

interface AddPartModalProps {
  onClose: () => void;
  onSaved: () => void;
  editingPart?: Part | null;
}

export default function AddPartModal({
  onClose,
  onSaved,
  editingPart,
}: AddPartModalProps) {
  const [form, setForm] = useState({
    name: editingPart?.name ?? "",
    category: editingPart?.category ?? "",
    manufacturer: editingPart?.manufacturer ?? "",
    unit: editingPart?.unit ?? "PCS",
    unitPrice: editingPart?.unitPrice?.toString() ?? "",
    stockQuantity: editingPart?.stockQuantity?.toString() ?? "",
    reorderLevel: editingPart?.reorderLevel?.toString() ?? "",
    notes: editingPart?.notes ?? "",
  });
  const [error, setError] = useState("");

  function updateField(field: string, value: string) {
    setForm((prev) => ({ ...prev, [field]: value }));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");

    if (!form.name.trim()) {
      setError("Part name is required.");
      return;
    }

    const payload = {
      name: form.name,
      category: form.category,
      manufacturer: form.manufacturer,
      unit: form.unit,
      unitPrice: form.unitPrice ? Number(form.unitPrice) : 0,
      stockQuantity: form.stockQuantity ? Number(form.stockQuantity) : 0,
      reorderLevel: form.reorderLevel ? Number(form.reorderLevel) : 0,
      notes: form.notes,
    };

    const url = editingPart
      ? `${API_URL}/api/parts/${editingPart.id}`
      : `${API_URL}/api/parts`;

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

    if (res.ok) {
      onSaved();
      onClose();
    } else {
      setError("Failed to save part. Please try again.");
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 px-4">
      <div className="w-full max-w-3xl rounded-2xl bg-white p-8 shadow-2xl">
        <div className="mb-6">
          <h2 className="text-2xl font-bold text-slate-900">
            {editingPart ? "Edit Part" : "Add Part"}
          </h2>
          <p className="text-sm text-slate-500">
            {editingPart
              ? "Update part details and stock levels."
              : "Add a new part to the inventory catalog."}
          </p>
        </div>

        {error && (
          <div className="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-[#EE302B]">
            {error}
          </div>
        )}

        <form onSubmit={handleSubmit} className="grid grid-cols-2 gap-4">
          <div className="col-span-2">
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Part Name
            </label>
            <input
              value={form.name}
              onChange={(e) => updateField("name", e.target.value)}
              className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            />
          </div>

          {[
            ["category", "Category"],
            ["manufacturer", "Manufacturer"],
          ].map(([field, label]) => (
            <div key={field}>
              <label className="mb-1 block text-sm font-medium text-slate-700">
                {label}
              </label>
              <input
                value={form[field as keyof typeof form]}
                onChange={(e) => updateField(field, e.target.value)}
                className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
              />
            </div>
          ))}

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Unit
            </label>
            <select
              value={form.unit}
              onChange={(e) => updateField("unit", e.target.value)}
              className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            >
              {["PCS", "SET", "BOX", "PACK", "ROLL"].map((u) => (
                <option key={u} value={u}>
                  {u}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Unit Price (AED)
            </label>
            <input
              type="number"
              min="0"
              step="0.01"
              value={form.unitPrice}
              onChange={(e) => updateField("unitPrice", e.target.value)}
              className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Stock Quantity
            </label>
            <input
              type="number"
              min="0"
              value={form.stockQuantity}
              onChange={(e) => updateField("stockQuantity", e.target.value)}
              className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Reorder Level
            </label>
            <input
              type="number"
              min="0"
              value={form.reorderLevel}
              onChange={(e) => updateField("reorderLevel", e.target.value)}
              className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            />
          </div>

          <div className="col-span-2">
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Notes
            </label>
            <textarea
              value={form.notes}
              onChange={(e) => updateField("notes", e.target.value)}
              className="h-24 w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            />
          </div>

          <div className="col-span-2 mt-4 flex justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="rounded-xl border border-slate-200 px-5 py-3 font-semibold text-slate-700"
            >
              Cancel
            </button>

            <button
              type="submit"
              className="rounded-xl bg-[#EE302B] px-5 py-3 font-semibold text-white"
            >
              {editingPart ? "Save Changes" : "Save Part"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}