"use client";

import { useEffect, useState } from "react";
import {
  Plus,
  Search,
  ShoppingCart,
  X,
  Eye,
  ChevronDown,
} from "lucide-react";
import { format } from "date-fns";

interface Order {
  id: number;
  orderNumber: string;
  customerId: number | null;
  customerName: string | null;
  customerPhone: string | null;
  facebookName: string | null;
  status: string;
  paymentStatus: string;
  subtotal: string;
  discount: string;
  shippingCost: string;
  total: string;
  source: string;
  shippingAddress: string | null;
  notes: string | null;
  createdAt: string;
}

interface Customer {
  id: number;
  name: string;
  facebookName: string | null;
  address: string | null;
}

interface Product {
  id: number;
  name: string;
  sellingPrice: string;
  stock: number;
}

function formatCurrency(val: string | number) {
  const num = typeof val === "string" ? parseFloat(val) : val;
  return "৳" + new Intl.NumberFormat("bn-BD", { maximumFractionDigits: 0 }).format(num);
}

const statusColors: Record<string, string> = {
  pending: "bg-yellow-100 text-yellow-700",
  confirmed: "bg-blue-100 text-blue-700",
  shipped: "bg-purple-100 text-purple-700",
  delivered: "bg-green-100 text-green-700",
  cancelled: "bg-red-100 text-red-700",
  returned: "bg-gray-100 text-gray-700",
};

const paymentColors: Record<string, string> = {
  unpaid: "bg-red-100 text-red-700",
  partial: "bg-yellow-100 text-yellow-700",
  paid: "bg-green-100 text-green-700",
  refunded: "bg-gray-100 text-gray-700",
};

export default function OrdersPage() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [showForm, setShowForm] = useState(false);
  const [viewOrder, setViewOrder] = useState<Order | null>(null);

  // New order form
  const [selectedCustomer, setSelectedCustomer] = useState("");
  const [orderItems, setOrderItems] = useState<
    { productId: string; quantity: number; unitPrice: number }[]
  >([{ productId: "", quantity: 1, unitPrice: 0 }]);
  const [discount, setDiscount] = useState("0");
  const [shippingCost, setShippingCost] = useState("0");
  const [shippingAddress, setShippingAddress] = useState("");
  const [orderNotes, setOrderNotes] = useState("");

  const fetchData = async () => {
    const [oRes, cRes, pRes] = await Promise.all([
      fetch("/api/orders"),
      fetch("/api/customers"),
      fetch("/api/products"),
    ]);
    setOrders(await oRes.json());
    setCustomers(await cRes.json());
    setProducts(await pRes.json());
    setLoading(false);
  };

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

  const filtered = orders.filter((o) => {
    const matchSearch =
      o.orderNumber.toLowerCase().includes(search.toLowerCase()) ||
      (o.customerName || "").toLowerCase().includes(search.toLowerCase()) ||
      (o.facebookName || "").toLowerCase().includes(search.toLowerCase());
    const matchStatus = statusFilter === "all" || o.status === statusFilter;
    return matchSearch && matchStatus;
  });

  const addItem = () => {
    setOrderItems([...orderItems, { productId: "", quantity: 1, unitPrice: 0 }]);
  };

  const removeItem = (idx: number) => {
    setOrderItems(orderItems.filter((_, i) => i !== idx));
  };

  const updateItem = (idx: number, field: string, value: string | number) => {
    const items = [...orderItems];
    if (field === "productId") {
      const product = products.find((p) => p.id === parseInt(value as string));
      items[idx] = {
        ...items[idx],
        productId: value as string,
        unitPrice: product ? parseFloat(product.sellingPrice) : 0,
      };
    } else {
      items[idx] = { ...items[idx], [field]: value };
    }
    setOrderItems(items);
  };

  const subtotal = orderItems.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0);
  const total = subtotal - parseFloat(discount || "0") + parseFloat(shippingCost || "0");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const body = {
      customerId: parseInt(selectedCustomer),
      items: orderItems
        .filter((i) => i.productId)
        .map((i) => ({
          productId: parseInt(i.productId),
          quantity: i.quantity,
          unitPrice: i.unitPrice,
        })),
      discount: parseFloat(discount || "0"),
      shippingCost: parseFloat(shippingCost || "0"),
      shippingAddress,
      notes: orderNotes,
    };

    await fetch("/api/orders", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });

    setShowForm(false);
    resetForm();
    fetchData();
  };

  const resetForm = () => {
    setSelectedCustomer("");
    setOrderItems([{ productId: "", quantity: 1, unitPrice: 0 }]);
    setDiscount("0");
    setShippingCost("0");
    setShippingAddress("");
    setOrderNotes("");
  };

  const updateStatus = async (id: number, status: string) => {
    await fetch("/api/orders", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id, status }),
    });
    fetchData();
  };

  const updatePayment = async (id: number, paymentStatus: string) => {
    await fetch("/api/orders", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id, paymentStatus }),
    });
    fetchData();
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="animate-spin w-10 h-10 border-4 border-brand-500 border-t-transparent rounded-full" />
      </div>
    );
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-3">
            <ShoppingCart className="text-brand-500" size={28} />
            Orders
          </h1>
          <p className="text-gray-500 mt-1">{orders.length} total orders from Facebook</p>
        </div>
        <button
          onClick={() => { resetForm(); setShowForm(true); }}
          className="bg-brand-600 hover:bg-brand-700 text-white px-5 py-2.5 rounded-xl flex items-center gap-2 font-medium shadow-lg shadow-brand-200 transition-all"
        >
          <Plus size={18} />
          New Order
        </button>
      </div>

      {/* Filters */}
      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-6">
        <div className="flex flex-col md:flex-row gap-4">
          <div className="relative flex-1">
            <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              placeholder="Search orders..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="w-full pl-10 pr-4 py-2.5 bg-gray-50 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-300 text-sm"
            />
          </div>
          <div className="flex gap-2 flex-wrap">
            {["all", "pending", "confirmed", "shipped", "delivered", "cancelled"].map((s) => (
              <button
                key={s}
                onClick={() => setStatusFilter(s)}
                className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors ${
                  statusFilter === s
                    ? "bg-brand-600 text-white"
                    : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                }`}
              >
                {s.charAt(0).toUpperCase() + s.slice(1)}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Orders Table */}
      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 border-b border-gray-100">
              <tr>
                <th className="text-left py-4 px-4 font-semibold text-gray-600">Order #</th>
                <th className="text-left py-4 px-4 font-semibold text-gray-600">Customer</th>
                <th className="text-left py-4 px-4 font-semibold text-gray-600">FB Name</th>
                <th className="text-left py-4 px-4 font-semibold text-gray-600">Amount</th>
                <th className="text-left py-4 px-4 font-semibold text-gray-600">Status</th>
                <th className="text-left py-4 px-4 font-semibold text-gray-600">Payment</th>
                <th className="text-left py-4 px-4 font-semibold text-gray-600">Date</th>
                <th className="text-left py-4 px-4 font-semibold text-gray-600">Actions</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((o) => (
                <tr key={o.id} className="border-b border-gray-50 hover:bg-gray-50/50">
                  <td className="py-3 px-4 font-semibold text-brand-600">{o.orderNumber}</td>
                  <td className="py-3 px-4">{o.customerName || "—"}</td>
                  <td className="py-3 px-4 text-gray-500">{o.facebookName || "—"}</td>
                  <td className="py-3 px-4 font-semibold">{formatCurrency(o.total)}</td>
                  <td className="py-3 px-4">
                    <div className="relative inline-block">
                      <select
                        value={o.status}
                        onChange={(e) => updateStatus(o.id, e.target.value)}
                        className={`appearance-none pr-6 pl-3 py-1 rounded-full text-xs font-medium cursor-pointer ${statusColors[o.status]}`}
                      >
                        {["pending", "confirmed", "shipped", "delivered", "cancelled", "returned"].map((s) => (
                          <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
                        ))}
                      </select>
                      <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none" />
                    </div>
                  </td>
                  <td className="py-3 px-4">
                    <div className="relative inline-block">
                      <select
                        value={o.paymentStatus}
                        onChange={(e) => updatePayment(o.id, e.target.value)}
                        className={`appearance-none pr-6 pl-3 py-1 rounded-full text-xs font-medium cursor-pointer ${paymentColors[o.paymentStatus]}`}
                      >
                        {["unpaid", "partial", "paid", "refunded"].map((s) => (
                          <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
                        ))}
                      </select>
                      <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none" />
                    </div>
                  </td>
                  <td className="py-3 px-4 text-gray-500 text-xs">
                    {format(new Date(o.createdAt), "dd MMM yyyy")}
                  </td>
                  <td className="py-3 px-4">
                    <button
                      onClick={() => setViewOrder(o)}
                      className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
                    >
                      <Eye size={16} className="text-gray-500" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* View Order Modal */}
      {viewOrder && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 w-full max-w-md">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-bold">Order Details</h2>
              <button onClick={() => setViewOrder(null)} className="p-2 hover:bg-gray-100 rounded-lg">
                <X size={18} />
              </button>
            </div>
            <div className="space-y-3 text-sm">
              <div className="flex justify-between"><span className="text-gray-500">Order #</span><span className="font-semibold">{viewOrder.orderNumber}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">Customer</span><span>{viewOrder.customerName}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">Facebook</span><span>{viewOrder.facebookName || "—"}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">Phone</span><span>{viewOrder.customerPhone || "—"}</span></div>
              <hr />
              <div className="flex justify-between"><span className="text-gray-500">Subtotal</span><span>{formatCurrency(viewOrder.subtotal)}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">Discount</span><span className="text-red-500">-{formatCurrency(viewOrder.discount)}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">Shipping</span><span>{formatCurrency(viewOrder.shippingCost)}</span></div>
              <div className="flex justify-between font-bold text-lg"><span>Total</span><span className="text-green-600">{formatCurrency(viewOrder.total)}</span></div>
              <hr />
              <div><span className="text-gray-500">Shipping Address:</span><p className="mt-1">{viewOrder.shippingAddress || "—"}</p></div>
              {viewOrder.notes && <div><span className="text-gray-500">Notes:</span><p className="mt-1">{viewOrder.notes}</p></div>}
              <div className="text-xs text-gray-400">Source: {viewOrder.source} • {format(new Date(viewOrder.createdAt), "dd MMM yyyy, hh:mm a")}</div>
            </div>
          </div>
        </div>
      )}

      {/* New Order Modal */}
      {showForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between mb-5">
              <h2 className="text-xl font-bold">Create New Order</h2>
              <button onClick={() => setShowForm(false)} className="p-2 hover:bg-gray-100 rounded-lg">
                <X size={18} />
              </button>
            </div>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="text-sm font-medium text-gray-700 mb-1 block">Customer *</label>
                <select
                  required
                  value={selectedCustomer}
                  onChange={(e) => {
                    setSelectedCustomer(e.target.value);
                    const cust = customers.find((c) => c.id === parseInt(e.target.value));
                    if (cust?.address) setShippingAddress(cust.address);
                  }}
                  className="w-full px-3 py-2 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-300 text-sm"
                >
                  <option value="">Select customer</option>
                  {customers.map((c) => (
                    <option key={c.id} value={c.id}>
                      {c.name} {c.facebookName ? `(${c.facebookName})` : ""}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="text-sm font-medium text-gray-700 mb-2 block">Items</label>
                {orderItems.map((item, idx) => (
                  <div key={idx} className="flex gap-2 mb-2">
                    <select
                      value={item.productId}
                      onChange={(e) => updateItem(idx, "productId", e.target.value)}
                      className="flex-1 px-3 py-2 rounded-xl border border-gray-200 text-sm"
                    >
                      <option value="">Select saree</option>
                      {products.map((p) => (
                        <option key={p.id} value={p.id}>
                          {p.name} ({formatCurrency(p.sellingPrice)}) - Stock: {p.stock}
                        </option>
                      ))}
                    </select>
                    <input
                      type="number"
                      min="1"
                      value={item.quantity}
                      onChange={(e) => updateItem(idx, "quantity", parseInt(e.target.value) || 1)}
                      className="w-16 px-2 py-2 rounded-xl border border-gray-200 text-sm text-center"
                    />
                    {orderItems.length > 1 && (
                      <button type="button" onClick={() => removeItem(idx)} className="p-2 text-red-400 hover:bg-red-50 rounded-lg">
                        <X size={14} />
                      </button>
                    )}
                  </div>
                ))}
                <button type="button" onClick={addItem} className="text-brand-600 text-sm font-medium hover:underline">
                  + Add item
                </button>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-1 block">Discount (৳)</label>
                  <input
                    type="number"
                    value={discount}
                    onChange={(e) => setDiscount(e.target.value)}
                    className="w-full px-3 py-2 rounded-xl border border-gray-200 text-sm"
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-1 block">Shipping (৳)</label>
                  <input
                    type="number"
                    value={shippingCost}
                    onChange={(e) => setShippingCost(e.target.value)}
                    className="w-full px-3 py-2 rounded-xl border border-gray-200 text-sm"
                  />
                </div>
              </div>

              <div>
                <label className="text-sm font-medium text-gray-700 mb-1 block">Shipping Address</label>
                <textarea
                  value={shippingAddress}
                  onChange={(e) => setShippingAddress(e.target.value)}
                  rows={2}
                  className="w-full px-3 py-2 rounded-xl border border-gray-200 text-sm"
                />
              </div>

              <div>
                <label className="text-sm font-medium text-gray-700 mb-1 block">Notes</label>
                <textarea
                  value={orderNotes}
                  onChange={(e) => setOrderNotes(e.target.value)}
                  rows={2}
                  className="w-full px-3 py-2 rounded-xl border border-gray-200 text-sm"
                />
              </div>

              <div className="bg-gray-50 rounded-xl p-4 space-y-1 text-sm">
                <div className="flex justify-between"><span>Subtotal</span><span>{formatCurrency(subtotal)}</span></div>
                <div className="flex justify-between text-red-500"><span>Discount</span><span>-{formatCurrency(discount)}</span></div>
                <div className="flex justify-between"><span>Shipping</span><span>{formatCurrency(shippingCost)}</span></div>
                <div className="flex justify-between font-bold text-lg pt-2 border-t">
                  <span>Total</span><span className="text-green-600">{formatCurrency(total)}</span>
                </div>
              </div>

              <div className="flex gap-3 pt-2">
                <button type="submit" className="flex-1 bg-brand-600 hover:bg-brand-700 text-white py-2.5 rounded-xl font-medium transition-colors">
                  Create Order
                </button>
                <button type="button" onClick={() => setShowForm(false)} className="px-6 py-2.5 border border-gray-200 rounded-xl text-gray-600 hover:bg-gray-50 font-medium">
                  Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}