"use client";

import { useEffect, useState } from "react";
import { Edit2, Package, RefreshCw, Trash2, Download } from "lucide-react";
import * as xlsx from "xlsx";

export default function Dashboard() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [editingId, setEditingId] = useState(null);
  const [editForm, setEditForm] = useState({});

  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;

  const fetchItems = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/inventory");
      if (!res.ok) throw new Error("Failed to fetch inventory from database");
      const data = await res.json();
      setItems(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

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

  const deleteItem = async (id) => {
    if (!confirm("Are you sure you want to delete this item?")) return;
    try {
      const res = await fetch(`/api/inventory?id=${id}`, { method: "DELETE" });
      if (res.ok) {
        setItems(items.filter(item => item.id !== id));
      } else {
        alert("Error deleting item");
      }
    } catch (error) {
      alert("Error deleting item: " + error.message);
    }
  };

  const startEdit = (item) => {
    setEditingId(item.id);
    setEditForm({ name: item.name, category: item.category || "", location: item.location || "", quantity: item.quantity, price: item.price });
  };

  const saveEdit = async (id) => {
    try {
      const parsedQty = parseInt(editForm.quantity, 10);
      const payload = {
        id,
        name: editForm.name,
        category: editForm.category,
        location: editForm.location,
        quantity: isNaN(parsedQty) ? 0 : parsedQty,
        price: parseFloat(editForm.price) || 0.0,
      };
      
      const res = await fetch("/api/inventory", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      
      if (res.ok) {
        const updatedItem = await res.json();
        setItems(items.map(item => item.id === id ? updatedItem : item));
        setEditingId(null);
      } else {
        alert("Failed to save changes");
      }
    } catch (err) {
      alert("Error saving: " + err.message);
    }
  };


  // Filter and Paginate Items
  useEffect(() => {
    setCurrentPage(1);
  }, [searchQuery, selectedCategory]);

  const uniqueCategories = [...new Set(items.map(item => item.category?.trim() || "Uncategorized"))].filter(c => c).sort();

  const filteredItems = items.filter(item => {
    const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          item.qrCodeId.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === "" || (item.category?.trim() || "Uncategorized") === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const totalPages = Math.max(1, Math.ceil(filteredItems.length / itemsPerPage));
  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedItems = filteredItems.slice(startIndex, startIndex + itemsPerPage);

  const handleExport = () => {
    if (filteredItems.length === 0) return alert("No items to export");
    const ws = xlsx.utils.json_to_sheet(filteredItems.map(i => ({
      "QR ID": i.qrCodeId,
      "Name": i.name,
      "Quantity": i.quantity,
      "Price": i.price,
      "Category": i.category || "",
      "Location": i.location || "",
      "Description": i.description || "",
      "Last Updated": i.updatedAt ? new Date(i.updatedAt).toLocaleString() : ""
    })));
    const wb = xlsx.utils.book_new();
    xlsx.utils.book_append_sheet(wb, ws, "Inventory");
    xlsx.writeFile(wb, "Inventory_Export.xlsx");
  };

  return (
    <div className="glass" style={{ padding: "2rem" }}>
      <div className="flex justify-between items-center mb-4">
        <div>
          <h1 style={{ fontSize: "1.8rem", marginBottom: "0.5rem" }}>Inventory Overview</h1>
          <p className="text-muted">Manage your inventory quantities and prices.</p>
        </div>
        <div className="flex gap-2">
          <button className="btn btn-secondary" onClick={handleExport} title="Export to Excel">
            <Download size={16} />
            Export
          </button>
          <button className="btn btn-secondary" onClick={fetchItems}>
            <RefreshCw size={16} className={loading ? "spin" : ""} />
            Refresh
          </button>
        </div>
      </div>

      {error ? (
        <div className="text-danger glass" style={{ padding: "1rem", backgroundColor: "rgba(239, 68, 68, 0.1)" }}>
          <p><strong>Error:</strong> {error}</p>
          <p style={{ marginTop: "0.5rem", fontSize: "0.9rem" }}>Ensure your PostgreSQL database is running and DATABASE_URL is configured in your .env or prisma.config.ts</p>
        </div>
      ) : loading ? (
        <div className="text-center" style={{ padding: "3rem" }}>
          <RefreshCw size={32} className="spin text-primary" style={{ animation: "spin 1s linear infinite" }} />
          <p className="mt-4 text-muted">Loading inventory...</p>
          <style>{`
            @keyframes spin { 100% { transform: rotate(360deg); } }
          `}</style>
        </div>
      ) : items.length === 0 ? (
        <div className="text-center glass" style={{ padding: "4rem 2rem", borderStyle: "dashed" }}>
          <Package size={48} className="text-muted m-auto mb-4" />
          <h2 style={{ marginBottom: "1rem" }}>No items found</h2>
          <p className="text-muted">Start by adding a new item or importing an Excel sheet.</p>
        </div>
      ) : (
        <div className="table-container mt-4">
          <div className="flex gap-4 mb-4" style={{ alignItems: "center" }}>
            <input 
              type="text" 
              placeholder="Search by name or QR..." 
              className="input-field" 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              style={{ flex: 1 }}
            />
            <select 
              className="input-field" 
              value={selectedCategory} 
              onChange={(e) => setSelectedCategory(e.target.value)}
              style={{ width: "200px" }}
            >
              <option value="">All Categories</option>
              {uniqueCategories.map(cat => (
                <option key={cat} value={cat}>{cat}</option>
              ))}
            </select>
          </div>

          <table className="data-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>QR ID</th>
                <th>Category</th>
                <th>Location</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Last Updated</th>
                <th style={{ textAlign: "right" }}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {paginatedItems.length === 0 ? (
                <tr>
                  <td colSpan="8" style={{ textAlign: "center", padding: "2rem", color: "var(--text-muted)" }}>
                    No items match your filters.
                  </td>
                </tr>
              ) : paginatedItems.map(item => (
                <tr key={item.id}>
                  <td style={{ fontWeight: 500 }}>
                    {editingId === item.id ? (
                      <input className="input-field" style={{ padding: "0.2rem 0.5rem" }} value={editForm.name} onChange={e => setEditForm({...editForm, name: e.target.value})} />
                    ) : item.name}
                  </td>
                  <td><code className="text-muted" style={{ background: "rgba(255,255,255,0.05)", padding: "2px 6px", borderRadius: "4px" }}>{item.qrCodeId}</code></td>
                  <td>
                    {editingId === item.id ? (
                      <input className="input-field" style={{ padding: "0.2rem 0.5rem", width: "100%" }} value={editForm.category} onChange={e => setEditForm({...editForm, category: e.target.value})} />
                    ) : (item.category || "-")}
                  </td>
                  <td>
                    {editingId === item.id ? (
                      <input className="input-field" style={{ padding: "0.2rem 0.5rem", width: "100%" }} value={editForm.location} onChange={e => setEditForm({...editForm, location: e.target.value})} />
                    ) : (item.location || "-")}
                  </td>
                  <td>
                    {editingId === item.id ? (
                      <input type="number" className="input-field" style={{ padding: "0.2rem 0.5rem", width: "80px" }} value={editForm.quantity} onChange={e => setEditForm({...editForm, quantity: e.target.value})} />
                    ) : (
                      <span className={item.quantity <= 5 ? "text-danger" : "text-success"} style={{ fontWeight: 600 }}>
                        {item.quantity}
                      </span>
                    )}
                  </td>
                  <td>
                    {editingId === item.id ? (
                      <input type="number" step="0.01" className="input-field" style={{ padding: "0.2rem 0.5rem", width: "80px" }} value={editForm.price} onChange={e => setEditForm({...editForm, price: e.target.value})} />
                    ) : `$${Number(item.price).toFixed(2)}`}
                  </td>
                  <td className="text-muted" style={{ fontSize: "0.85rem" }}>
                    {item.updatedAt ? new Date(item.updatedAt).toLocaleDateString() + " " + new Date(item.updatedAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) : "N/A"}
                  </td>
                  <td style={{ textAlign: "right" }}>
                    <div className="flex" style={{ gap: "0.5rem", justifyContent: "flex-end" }}>
                      {editingId === item.id ? (
                        <>
                          <button className="btn btn-primary" style={{ padding: "0.4rem 0.6rem" }} onClick={() => saveEdit(item.id)}>
                            Save
                          </button>
                          <button className="btn btn-secondary" style={{ padding: "0.4rem 0.6rem" }} onClick={() => setEditingId(null)}>
                            Cancel
                          </button>
                        </>
                      ) : (
                        <>
                          <button className="btn btn-secondary" style={{ padding: "0.4rem 0.6rem" }} onClick={() => startEdit(item)}>
                            <Edit2 size={14} />
                          </button>
                          <button className="btn btn-danger" style={{ padding: "0.4rem 0.6rem" }} onClick={() => deleteItem(item.id)}>
                            <Trash2 size={14} />
                          </button>
                        </>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {filteredItems.length > 0 && (
            <div className="flex justify-between items-center mt-4" style={{ padding: "1rem 0 0 0" }}>
              <span className="text-muted" style={{ fontSize: "0.9rem" }}>
                Showing {startIndex + 1} to {Math.min(startIndex + itemsPerPage, filteredItems.length)} of {filteredItems.length} entries
              </span>
              <div className="flex gap-2">
                <button 
                  className="btn btn-secondary" 
                  onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                  disabled={currentPage === 1}
                >
                  Previous
                </button>
                <span className="flex items-center text-muted" style={{ padding: "0 0.5rem", fontSize: "0.9rem" }}>
                  Page {currentPage} of {totalPages}
                </span>
                <button 
                  className="btn btn-secondary" 
                  onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                  disabled={currentPage === totalPages}
                >
                  Next
                </button>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}