"use client";

import { useEffect, useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import AddPartModal from "@/components/parts/AddPartModal";
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;
}

export default function PartsPage() {
  const [parts, setParts] = useState<Part[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [editingPart, setEditingPart] = useState<Part | null>(null);
  const [search, setSearch] = useState("");

  function loadParts() {
    fetch(`${API_URL}/api/parts`)
      .then((res) => res.json())
      .then((data) => setParts(data))
      .catch((err) => console.error(err));
  }

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

  function openAddModal() {
    setEditingPart(null);
    setShowModal(true);
  }

  function openEditModal(part: Part) {
    setEditingPart(part);
    setShowModal(true);
  }

  const filteredParts = parts.filter((part) => {
    const term = search.toLowerCase();
    return (
      part.name?.toLowerCase().includes(term) ||
      part.partCode?.toLowerCase().includes(term) ||
      part.category?.toLowerCase().includes(term) ||
      part.manufacturer?.toLowerCase().includes(term)
    );
  });

  return (
    <DashboardLayout>
      {showModal && (
        <AddPartModal
          editingPart={editingPart}
          onClose={() => setShowModal(false)}
          onSaved={loadParts}
        />
      )}

      <div className="mb-8 flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-bold">Parts Catalog</h2>
          <p className="mt-1 text-slate-500">
            Manage spare parts inventory and stock levels
          </p>
        </div>

        <button
          onClick={openAddModal}
          className="rounded-xl bg-[#EE302B] px-5 py-3 font-semibold text-white"
        >
          Add Part
        </button>
      </div>

      <div className="mb-5">
        <input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Search by name, code, category, or manufacturer..."
          className="w-full max-w-md rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
        />
      </div>

      <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <table className="w-full">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-5 py-4 text-left">Code</th>
              <th className="px-5 py-4 text-left">Name</th>
              <th className="px-5 py-4 text-left">Category</th>
              <th className="px-5 py-4 text-left">Manufacturer</th>
              <th className="px-5 py-4 text-left">Unit Price</th>
              <th className="px-5 py-4 text-left">Stock</th>
              <th className="px-5 py-4 text-left">Status</th>
              <th className="px-5 py-4 text-left">Actions</th>
            </tr>
          </thead>

          <tbody>
            {filteredParts.length === 0 ? (
              <tr>
                <td colSpan={8} className="px-5 py-16 text-center text-slate-500">
                  No parts found.
                </td>
              </tr>
            ) : (
              filteredParts.map((part) => {
                const lowStock =
                  part.reorderLevel != null &&
                  part.stockQuantity <= part.reorderLevel;

                return (
                  <tr
                    key={part.id}
                    className="border-t border-slate-100 hover:bg-slate-50/50"
                  >
                    <td className="px-5 py-4 font-semibold text-[#1296E8]">
                      {part.partCode}
                    </td>

                    <td className="px-5 py-4">
                      <div className="font-semibold text-slate-900">
                        {part.name}
                      </div>
                    </td>

                    <td className="px-5 py-4">{part.category || "-"}</td>
                    <td className="px-5 py-4">{part.manufacturer || "-"}</td>

                    <td className="px-5 py-4">
                      AED {Number(part.unitPrice ?? 0).toFixed(2)}
                    </td>

                    <td className="px-5 py-4">
                      {part.stockQuantity} {part.unit}
                    </td>

                    <td className="px-5 py-4">
                      <span
                        className={`rounded-full px-3 py-1 text-xs font-semibold ${
                          lowStock
                            ? "bg-red-100 text-[#EE302B]"
                            : "bg-green-100 text-green-700"
                        }`}
                      >
                        {lowStock ? "LOW STOCK" : "IN STOCK"}
                      </span>
                    </td>

                    <td className="px-5 py-4">
                      <button
                        onClick={() => openEditModal(part)}
                        className="rounded-lg border border-[#1296E8]/20 bg-[#1296E8]/5 px-4 py-2 text-sm font-semibold text-[#1296E8] transition hover:bg-[#1296E8]/10"
                      >
                        Edit
                      </button>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>
    </DashboardLayout>
  );
}