"use client";

import { useState, useEffect, useCallback } from "react";
import {
  Package,
  Plus,
  Search,
  UserCheck,
  ArrowLeftCircle,
  Loader2,
  X,
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import {
  fetchAssets,
  createAsset,
  assignAsset,
  returnAsset,
  getAssetCounts,
  fetchActiveEmployees,
} from "@/lib/supabase/asset-actions";

// ── Constants ──────────────────────────────────────────────

const CATEGORIES = [
  { value: "laptop", label: "Laptop" },
  { value: "phone", label: "Phone" },
  { value: "monitor", label: "Monitor" },
  { value: "access_card", label: "Access Card" },
  { value: "vehicle", label: "Vehicle" },
  { value: "equipment", label: "Equipment" },
  { value: "other", label: "Other" },
];

const STATUSES = [
  { value: "available", label: "Available" },
  { value: "assigned", label: "Assigned" },
  { value: "maintenance", label: "Maintenance" },
  { value: "retired", label: "Retired" },
];

const STATUS_BADGE_COLORS: Record<string, string> = {
  available: "bg-teal-100 text-teal-700",
  assigned: "bg-blue-100 text-blue-700",
  maintenance: "bg-amber-100 text-amber-700",
  retired: "bg-gray-100 text-gray-600",
};

const CATEGORY_BADGE_COLORS: Record<string, string> = {
  laptop: "bg-indigo-50 text-indigo-700",
  phone: "bg-purple-50 text-purple-700",
  monitor: "bg-cyan-50 text-cyan-700",
  access_card: "bg-orange-50 text-orange-700",
  vehicle: "bg-emerald-50 text-emerald-700",
  equipment: "bg-slate-100 text-slate-700",
  other: "bg-gray-50 text-gray-600",
};

// ── Add Asset Modal ────────────────────────────────────────

function AddAssetModal({
  onClose,
  onSuccess,
}: {
  onClose: () => void;
  onSuccess: () => void;
}) {
  const [name, setName] = useState("");
  const [category, setCategory] = useState("laptop");
  const [serialNumber, setSerialNumber] = useState("");
  const [purchaseDate, setPurchaseDate] = useState("");
  const [purchaseValue, setPurchaseValue] = useState("");
  const [notes, setNotes] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      const result = await createAsset({
        name,
        category,
        serial_number: serialNumber || undefined,
        purchase_date: purchaseDate || undefined,
        purchase_value: purchaseValue ? parseFloat(purchaseValue) : undefined,
        notes: notes || undefined,
      });
      if (result.success) {
        onSuccess();
      } else {
        setError(result.error || "Failed to create asset");
      }
    } catch (err: any) {
      setError(err.message || "Failed to create asset");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div
      className="fixed inset-0 bg-black/40 flex items-center justify-center z-50"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
          <h3 className="text-sm font-semibold text-gray-900">Add Asset</h3>
          <button
            onClick={onClose}
            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
          >
            <X className="w-4 h-4 text-gray-400" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
              {error}
            </div>
          )}

          <div>
            <label className="text-xs font-medium text-gray-600">
              Asset Name *
            </label>
            <Input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. MacBook Pro 14&quot;"
              required
              className="mt-1"
            />
          </div>

          <div>
            <label className="text-xs font-medium text-gray-600">
              Category *
            </label>
            <Select
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              required
              className="mt-1"
            >
              {CATEGORIES.map((c) => (
                <option key={c.value} value={c.value}>
                  {c.label}
                </option>
              ))}
            </Select>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-medium text-gray-600">
                Serial Number
              </label>
              <Input
                value={serialNumber}
                onChange={(e) => setSerialNumber(e.target.value)}
                placeholder="Optional"
                className="mt-1"
              />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">
                Purchase Value
              </label>
              <Input
                type="number"
                step="0.01"
                value={purchaseValue}
                onChange={(e) => setPurchaseValue(e.target.value)}
                placeholder="0.00"
                className="mt-1"
              />
            </div>
          </div>

          <div>
            <label className="text-xs font-medium text-gray-600">
              Purchase Date
            </label>
            <Input
              type="date"
              value={purchaseDate}
              onChange={(e) => setPurchaseDate(e.target.value)}
              className="mt-1"
            />
          </div>

          <div>
            <label className="text-xs font-medium text-gray-600">Notes</label>
            <textarea
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              rows={3}
              placeholder="Optional notes..."
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
            />
          </div>

          <div className="flex items-center justify-end gap-2 pt-2">
            <Button
              type="button"
              variant="outline"
              onClick={onClose}
              disabled={submitting}
              className="cursor-pointer text-xs"
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={submitting || !name}
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer text-xs disabled:opacity-50"
            >
              {submitting ? (
                <>
                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
                  Saving...
                </>
              ) : (
                <>
                  <Plus className="w-3.5 h-3.5" />
                  Add Asset
                </>
              )}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ── Assign Asset Modal ─────────────────────────────────────

function AssignAssetModal({
  assetId,
  assetName,
  onClose,
  onSuccess,
}: {
  assetId: string;
  assetName: string;
  onClose: () => void;
  onSuccess: () => void;
}) {
  const [employees, setEmployees] = useState<any[]>([]);
  const [selectedEmployee, setSelectedEmployee] = useState("");
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetchActiveEmployees()
      .then((data) => {
        if (!cancelled) {
          setEmployees(data);
          if (data.length > 0) setSelectedEmployee(data[0].id);
        }
      })
      .catch(() => {
        if (!cancelled) setError("Failed to load employees");
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const handleAssign = async () => {
    if (!selectedEmployee) return;
    setError(null);
    setSubmitting(true);
    try {
      const result = await assignAsset(assetId, selectedEmployee);
      if (result.success) {
        onSuccess();
      } else {
        setError(result.error || "Failed to assign asset");
      }
    } catch (err: any) {
      setError(err.message || "Failed to assign asset");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div
      className="fixed inset-0 bg-black/40 flex items-center justify-center z-50"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
          <div>
            <h3 className="text-sm font-semibold text-gray-900">
              Assign Asset
            </h3>
            <p className="text-xs text-gray-500 mt-0.5">{assetName}</p>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
          >
            <X className="w-4 h-4 text-gray-400" />
          </button>
        </div>

        <div className="px-6 py-4 space-y-4">
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
              {error}
            </div>
          )}

          {loading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
            </div>
          ) : employees.length === 0 ? (
            <p className="text-sm text-gray-500 text-center py-4">
              No active employees found
            </p>
          ) : (
            <div>
              <label className="text-xs font-medium text-gray-600">
                Assign to Employee *
              </label>
              <Select
                value={selectedEmployee}
                onChange={(e) => setSelectedEmployee(e.target.value)}
                className="mt-1"
              >
                {employees.map((emp) => (
                  <option key={emp.id} value={emp.id}>
                    {emp.first_name} {emp.last_name} ({emp.email})
                  </option>
                ))}
              </Select>
            </div>
          )}

          <div className="flex items-center justify-end gap-2 pt-2">
            <Button
              variant="outline"
              onClick={onClose}
              disabled={submitting}
              className="cursor-pointer text-xs"
            >
              Cancel
            </Button>
            <Button
              onClick={handleAssign}
              disabled={submitting || !selectedEmployee}
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer text-xs disabled:opacity-50"
            >
              {submitting ? (
                <>
                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
                  Assigning...
                </>
              ) : (
                <>
                  <UserCheck className="w-3.5 h-3.5" />
                  Assign
                </>
              )}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Main Page ──────────────────────────────────────────────

export default function AssetsPage() {
  const [assets, setAssets] = useState<any[]>([]);
  const [counts, setCounts] = useState({
    total: 0,
    assigned: 0,
    available: 0,
    maintenance: 0,
    retired: 0,
  });
  const [categoryFilter, setCategoryFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [loading, setLoading] = useState(true);
  const [showAddModal, setShowAddModal] = useState(false);
  const [assignAssetId, setAssignAssetId] = useState<string | null>(null);
  const [assignAssetName, setAssignAssetName] = useState("");
  const [actionLoading, setActionLoading] = useState<string | null>(null);

  const loadAssets = useCallback(async () => {
    setLoading(true);
    try {
      const [data, countsData] = await Promise.all([
        fetchAssets(
          categoryFilter || undefined,
          statusFilter || undefined
        ),
        getAssetCounts(),
      ]);
      setAssets(data);
      setCounts(countsData);
    } catch {
      // ignore
    } finally {
      setLoading(false);
    }
  }, [categoryFilter, statusFilter]);

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

  const handleAssetCreated = () => {
    setShowAddModal(false);
    loadAssets();
  };

  const handleAssetAssigned = () => {
    setAssignAssetId(null);
    setAssignAssetName("");
    loadAssets();
  };

  const handleReturnAsset = async (id: string) => {
    setActionLoading(id);
    try {
      await returnAsset(id);
      loadAssets();
    } catch {
      // ignore
    } finally {
      setActionLoading(null);
    }
  };

  const openAssignModal = (asset: any) => {
    setAssignAssetId(asset.id);
    setAssignAssetName(asset.name);
  };

  const summaryCards = [
    {
      label: "Total",
      value: counts.total,
      icon: Package,
      color: "text-gray-600",
      bg: "bg-gray-50",
    },
    {
      label: "Assigned",
      value: counts.assigned,
      icon: UserCheck,
      color: "text-blue-600",
      bg: "bg-blue-50",
    },
    {
      label: "Available",
      value: counts.available,
      icon: Package,
      color: "text-teal-600",
      bg: "bg-teal-50",
    },
    {
      label: "Maintenance",
      value: counts.maintenance,
      icon: Package,
      color: "text-amber-600",
      bg: "bg-amber-50",
    },
    {
      label: "Retired",
      value: counts.retired,
      icon: Package,
      color: "text-gray-500",
      bg: "bg-gray-50",
    },
  ];

  const assigningAsset = assignAssetId
    ? assets.find((a) => a.id === assignAssetId)
    : null;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">
            Assets
          </h1>
          <p className="text-gray-500 mt-1">
            Track and manage company assets.
          </p>
        </div>
        <Button
          onClick={() => setShowAddModal(true)}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer text-xs"
        >
          <Plus className="w-4 h-4" />
          Add Asset
        </Button>
      </div>

      {/* Summary Cards */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
        {summaryCards.map((card) => (
          <Card
            key={card.label}
            className="border-0 shadow-sm hover:shadow-md transition-all duration-300"
          >
            <CardContent className="p-4">
              <div className="flex items-center justify-between mb-2">
                <div
                  className={`w-9 h-9 rounded-lg ${card.bg} flex items-center justify-center`}
                >
                  <card.icon className={`w-4 h-4 ${card.color}`} />
                </div>
              </div>
              <p className="text-xs font-medium text-gray-500 mb-0.5">
                {card.label}
              </p>
              <p className="text-xl font-bold text-gray-900">{card.value}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Filters */}
      <Card className="border-0 shadow-sm">
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-sm font-semibold text-gray-900">
              Asset Register
            </CardTitle>
            {(categoryFilter || statusFilter) && (
              <button
                onClick={() => {
                  setCategoryFilter("");
                  setStatusFilter("");
                }}
                className="text-xs text-gray-500 hover:text-gray-700 flex items-center gap-1 cursor-pointer"
              >
                <X className="w-3 h-3" />
                Clear filters
              </button>
            )}
          </div>
        </CardHeader>
        <CardContent className="pt-0">
          <div className="flex flex-wrap gap-3">
            <div className="flex items-center gap-2">
              <label className="text-xs font-medium text-gray-500">
                Category
              </label>
              <Select
                value={categoryFilter}
                onChange={(e) => setCategoryFilter(e.target.value)}
                className="w-40"
              >
                <option value="">All categories</option>
                {CATEGORIES.map((c) => (
                  <option key={c.value} value={c.value}>
                    {c.label}
                  </option>
                ))}
              </Select>
            </div>
            <div className="flex items-center gap-2">
              <label className="text-xs font-medium text-gray-500">
                Status
              </label>
              <Select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="w-40"
              >
                <option value="">All statuses</option>
                {STATUSES.map((s) => (
                  <option key={s.value} value={s.value}>
                    {s.label}
                  </option>
                ))}
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Assets Table */}
      <Card className="border-0 shadow-sm">
        <CardContent className="p-0">
          {loading ? (
            <div className="flex items-center justify-center py-16">
              <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
            </div>
          ) : assets.length === 0 ? (
            <div className="text-center py-16">
              <Package className="w-12 h-12 text-gray-300 mx-auto mb-3" />
              <p className="text-sm font-medium text-gray-500">
                No assets found
              </p>
              <p className="text-xs text-gray-400 mt-1">
                {categoryFilter || statusFilter
                  ? "Try adjusting your filters"
                  : "Add your first asset to get started"}
              </p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-100">
                    <th className="text-left text-xs font-medium text-gray-500 pb-3 px-4">
                      Name
                    </th>
                    <th className="text-left text-xs font-medium text-gray-500 pb-3 px-4">
                      Category
                    </th>
                    <th className="text-left text-xs font-medium text-gray-500 pb-3 px-4 hidden md:table-cell">
                      Serial Number
                    </th>
                    <th className="text-left text-xs font-medium text-gray-500 pb-3 px-4">
                      Assigned To
                    </th>
                    <th className="text-left text-xs font-medium text-gray-500 pb-3 px-4 hidden lg:table-cell">
                      Assigned Date
                    </th>
                    <th className="text-left text-xs font-medium text-gray-500 pb-3 px-4">
                      Status
                    </th>
                    <th className="text-right text-xs font-medium text-gray-500 pb-3 px-4">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-50">
                  {assets.map((asset) => (
                    <tr
                      key={asset.id}
                      className="hover:bg-gray-50/50 transition-colors"
                    >
                      <td className="py-3 px-4">
                        <span className="text-sm font-medium text-gray-900">
                          {asset.name}
                        </span>
                      </td>
                      <td className="py-3 px-4">
                        <span
                          className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                            CATEGORY_BADGE_COLORS[asset.category] ||
                            "bg-gray-50 text-gray-600"
                          }`}
                        >
                          {CATEGORIES.find((c) => c.value === asset.category)
                            ?.label || asset.category}
                        </span>
                      </td>
                      <td className="py-3 px-4 hidden md:table-cell">
                        <span className="text-sm text-gray-500 font-mono">
                          {asset.serial_number || "—"}
                        </span>
                      </td>
                      <td className="py-3 px-4">
                        <span className="text-sm text-gray-700">
                          {asset.assignee
                            ? `${asset.assignee.first_name} ${asset.assignee.last_name}`
                            : "Unassigned"}
                        </span>
                      </td>
                      <td className="py-3 px-4 hidden lg:table-cell">
                        <span className="text-sm text-gray-500">
                          {asset.assigned_at
                            ? new Date(asset.assigned_at).toLocaleDateString(
                                "en-AU",
                                {
                                  day: "numeric",
                                  month: "short",
                                  year: "numeric",
                                }
                              )
                            : "—"}
                        </span>
                      </td>
                      <td className="py-3 px-4">
                        <span
                          className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                            STATUS_BADGE_COLORS[asset.status] ||
                            "bg-gray-100 text-gray-600"
                          }`}
                        >
                          {asset.status}
                        </span>
                      </td>
                      <td className="py-3 px-4 text-right">
                        {asset.status === "available" && (
                          <Button
                            size="sm"
                            onClick={() => openAssignModal(asset)}
                            disabled={actionLoading === asset.id}
                            className="bg-blue-600 hover:bg-blue-700 text-white cursor-pointer text-xs h-7 px-3 gap-1"
                          >
                            <UserCheck className="w-3 h-3" />
                            Assign
                          </Button>
                        )}
                        {asset.status === "assigned" && (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => handleReturnAsset(asset.id)}
                            disabled={actionLoading === asset.id}
                            className="cursor-pointer text-xs h-7 px-3 gap-1"
                          >
                            {actionLoading === asset.id ? (
                              <Loader2 className="w-3 h-3 animate-spin" />
                            ) : (
                              <ArrowLeftCircle className="w-3 h-3" />
                            )}
                            Return
                          </Button>
                        )}
                        {(asset.status === "maintenance" ||
                          asset.status === "retired") && (
                          <span className="text-xs text-gray-400">—</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Modals */}
      {showAddModal && (
        <AddAssetModal
          onClose={() => setShowAddModal(false)}
          onSuccess={handleAssetCreated}
        />
      )}

      {assignAssetId && assigningAsset && (
        <AssignAssetModal
          assetId={assignAssetId}
          assetName={assignAssetName}
          onClose={() => {
            setAssignAssetId(null);
            setAssignAssetName("");
          }}
          onSuccess={handleAssetAssigned}
        />
      )}
    </div>
  );
}