"use client";

import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { CalendarDays, ChevronDown, Minus, Plus, Search, Trash2 } from "lucide-react";
import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";

type CreatePurchasePageBodyProps = {
  app: string;
};

type PurchaseLine = {
  id: string;
  product: string;
  image: string;
  unitCost: number;
  stock: number;
  qty: number;
  discount: number;
};

const fieldWrap = "space-y-1.5";
const labelClass = "text-[11px] font-medium text-[#667085]";
const controlClass =
  "h-10 w-full rounded-md border-0 bg-[#F3F4F6] px-3 text-[13px] text-[#1C1D22] shadow-none ring-offset-0 focus-visible:ring-1 focus-visible:ring-[#003E6B]/25";

function currency(v: number) {
  return `$ ${v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

const PRODUCT_OPTIONS = [
  { id: "p1", name: "Iphone", image: "📱", unitCost: 510, stock: 120 },
  { id: "p2", name: "Joystick", image: "🎮", unitCost: 310, stock: 98 },
  { id: "p3", name: "Smart Watch", image: "⌚", unitCost: 150, stock: 120 },
  { id: "p4", name: "MacBook", image: "💻", unitCost: 90, stock: 120 },
  { id: "p5", name: "Head Phones", image: "🎧", unitCost: 110, stock: 120 },
];

function QtyStep({
  value,
  onChange,
  className,
}: {
  value: number;
  onChange: (n: number) => void;
  className?: string;
}) {
  return (
    <div className={cn("inline-flex items-center rounded-md border border-[#E4E7EC] bg-white", className)}>
      <button
        type="button"
        className="grid h-[13px] w-[22px] place-items-center border-b border-[#E4E7EC] bg-[#EEF1F4] text-[#667085] hover:bg-[#E5E9EE]"
        onClick={() => onChange(value + 1)}
        aria-label="Increase quantity"
      >
        <Plus className="size-3" />
      </button>
      <button
        type="button"
        className="grid h-[13px] w-[22px] place-items-center bg-[#EEF1F4] text-[#667085] hover:bg-[#E5E9EE]"
        onClick={() => onChange(Math.max(1, value - 1))}
        aria-label="Decrease quantity"
      >
        <Minus className="size-3" />
      </button>
    </div>
  );
}

export default function CreatePurchasePageBody({ app }: CreatePurchasePageBodyProps) {
  const router = useRouter();
  const [discountValue, setDiscountValue] = useState("192");
  const [shippingCost, setShippingCost] = useState("50");
  const [status, setStatus] = useState("sent");
  const [purchaseNote, setPurchaseNote] = useState("This Content is dummy text and its just used for Ui Design.");
  const [itemSearch, setItemSearch] = useState("");
  const [lines, setLines] = useState<PurchaseLine[]>([
    { id: "1", product: "Phone", image: "📱", unitCost: 510, stock: 120, qty: 1, discount: 0 },
    { id: "2", product: "Joystick", image: "🎮", unitCost: 310, stock: 98, qty: 2, discount: 0 },
    { id: "3", product: "Smart Watch", image: "⌚", unitCost: 150, stock: 120, qty: 5, discount: 0 },
    { id: "4", product: "MacBook", image: "💻", unitCost: 90, stock: 120, qty: 6, discount: 20 },
    { id: "5", product: "Head Phones", image: "🎧", unitCost: 110, stock: 120, qty: 4, discount: 0 },
  ]);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

  const filteredProducts = useMemo(() => {
    const q = itemSearch.trim().toLowerCase();
    if (!q) return [];
    return PRODUCT_OPTIONS.filter((p) => p.name.toLowerCase().includes(q));
  }, [itemSearch]);

  const summaryDiscount = Number(discountValue || "0");
  const summaryShipping = Number(shippingCost || "0");
  const subtotal = lines.reduce((acc, item) => acc + item.unitCost * item.qty - item.discount, 0);
  const grandTotal = summaryDiscount + summaryShipping;

  const updateLine = (id: string, patch: Partial<PurchaseLine>) => {
    setLines((prev) => prev.map((line) => (line.id === id ? { ...line, ...patch } : line)));
  };

  const addLine = (name: string) => {
    const picked = PRODUCT_OPTIONS.find((p) => p.name === name);
    if (!picked) return;
    setLines((prev) => [
      ...prev,
      {
        id: `${Date.now()}`,
        product: picked.name,
        image: picked.image,
        unitCost: picked.unitCost,
        stock: picked.stock,
        qty: 2,
        discount: 0,
      },
    ]);
    setItemSearch("");
  };

  const removeLine = (id: string) => {
    setLines((prev) => prev.filter((line) => line.id !== id));
  };

  return (
    <div className="min-h-0 space-y-5 bg-[#F3F3F4] p-4 md:p-6">
      <MainTitle title="Create Purchase">
        <div className="flex justify-end">
          <Button
            type="button"
            className="h-9 rounded-md bg-[#003E6B] px-5 text-[11px] font-semibold text-white hover:bg-[#003256]"
          >
            Create New Purchase
          </Button>
        </div>
      </MainTitle>

      <section className="rounded-xl border border-[#E8EAEE] bg-white p-4">
        <div className="grid gap-3 md:grid-cols-3">
          <div className={fieldWrap}>
            <Label className={labelClass}>Supplier</Label>
            <Select defaultValue="enizam">
              <SelectTrigger className={controlClass}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="enizam">Enizam</SelectItem>
                <SelectItem value="janet">Janet Adebayo</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className={fieldWrap}>
            <Label className={labelClass}>Warehouse</Label>
            <Select defaultValue="w6">
              <SelectTrigger className={controlClass}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="w6">Warehouse 006</SelectItem>
                <SelectItem value="w9">Warehouse 009</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className={fieldWrap}>
            <Label className={labelClass}>Date</Label>
            <div className="relative">
              <CalendarDays className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[#98A2B3]" />
              <Input type="text" defaultValue="02/14/2024" className={`${controlClass} pl-10`} />
            </div>
          </div>
        </div>
      </section>

      <section className="rounded-xl border border-[#E8EAEE] bg-white p-4">
        <h2 className="mb-4 text-base font-semibold text-[#1C1D22]">Select Products For Purchase</h2>
        <div className="relative mb-4 w-full md:w-[340px]">
          <div className="flex h-10 items-center gap-2 rounded-md border border-[#E4E7EC] bg-[#F3F4F6] px-3">
            <Search className="size-4 shrink-0 text-[#667085]" />
            <Input
              value={itemSearch}
              onChange={(e) => setItemSearch(e.target.value)}
              placeholder="Search Product"
              className="h-full border-0 bg-transparent p-0 text-[12px] text-[#1C1D22] placeholder:text-[#98A2B3] focus-visible:ring-0"
            />
            <ChevronDown className="size-4 text-[#667085]" />
          </div>
          {filteredProducts.length > 0 ? (
            <div className="absolute left-0 top-11 z-10 w-full rounded-md border border-[#D8DDE5] bg-white shadow-sm">
              {filteredProducts.map((product) => (
                <button
                  key={product.id}
                  type="button"
                  onClick={() => addLine(product.name)}
                  className="flex w-full items-center gap-2 border-b border-[#EEF1F4] px-3 py-2 text-left last:border-0 hover:bg-[#F8FAFC]"
                >
                  <div className="grid size-8 place-items-center rounded bg-[#F3F4F6] text-base">
                    {product.image}
                  </div>
                  <div className="min-w-0">
                    <p className="truncate text-[11px] text-[#1570EF]">{product.name}</p>
                    <p className="text-[12px] text-[#1C1D22]">{currency(product.unitCost)}</p>
                  </div>
                  <span className="ml-auto rounded bg-[#E8F4FF] px-1.5 py-0.5 text-[9px] text-[#1570EF]">
                    In Stock: {product.stock}
                  </span>
                </button>
              ))}
            </div>
          ) : null}
        </div>

        <div className="overflow-x-auto rounded-md border border-[#E4E7EC]">
          <table className="w-full min-w-[980px]">
            <thead>
              <tr className="border-b border-[#E4E7EC] bg-[#F9FAFB]">
                <th className="w-10 px-3 py-2.5 text-left">
                  <input
                    type="checkbox"
                    className="size-3 rounded border border-[#90A4C0]"
                    checked={selectedIds.length === lines.length}
                    onChange={(e) =>
                      setSelectedIds(e.target.checked ? lines.map((line) => line.id) : [])
                    }
                  />
                </th>
                {["Image", "Product", "Unit Cost", "Stock", "Quanfity", "Discount", "Total", "Action"].map((head) => (
                  <th key={head} className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">
                    {head}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {lines.map((line) => {
                const total = line.unitCost * line.qty - line.discount;
                return (
                  <tr key={line.id} className="border-b border-[#F1F3F9] last:border-0">
                    <td className="px-3 py-2">
                      <input
                        type="checkbox"
                        className="size-3 rounded border border-[#90A4C0]"
                        checked={selectedIds.includes(line.id)}
                        onChange={(e) =>
                          setSelectedIds((prev) =>
                            e.target.checked ? [...prev, line.id] : prev.filter((id) => id !== line.id)
                          )
                        }
                      />
                    </td>
                    <td className="px-3 py-2">
                      <div className="grid size-9 place-items-center rounded-md bg-[#F3F4F6] text-lg">
                        {line.image}
                      </div>
                    </td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{line.product}</td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{currency(line.unitCost)}</td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{line.stock}</td>
                    <td className="px-3 py-2">
                      <div className="flex items-center gap-2">
                        <span className="w-5 text-center text-[13px] text-[#272833]">{line.qty}</span>
                        <QtyStep
                          value={line.qty}
                          onChange={(qty) => updateLine(line.id, { qty })}
                          className="flex-col overflow-hidden rounded"
                        />
                      </div>
                    </td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{currency(line.discount)}</td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{currency(total)}</td>
                    <td className="px-3 py-2">
                      <button type="button" onClick={() => removeLine(line.id)} className="text-[#F04438] hover:text-[#d23024]">
                        <Trash2 className="size-4" />
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <div className="mt-3 flex items-center justify-between">
          <Button type="button" variant="outline" className="h-8 border-[#E5E7EB] px-4 text-[10px] text-[#8B8D97]">
            Previous
          </Button>
          <p className="text-[10px] text-[#CFD3D4]">page 1 of 10</p>
          <Button type="button" variant="outline" className="h-8 border-[#E5E7EB] px-4 text-[10px] text-[#8B8D97]">
            Next
          </Button>
        </div>
      </section>

      <div className="grid gap-4 lg:grid-cols-[1fr_1fr]">
        <section className="rounded-xl border border-[#E8EAEE] bg-white p-4">
          <h3 className="mb-3 text-[15px] font-semibold text-[#343A46]">Order Details</h3>
          <div className="space-y-3">
            <div className={fieldWrap}>
              <Label className={labelClass}>Discount</Label>
              <Input
                value={discountValue}
                onChange={(e) => setDiscountValue(e.target.value)}
                className={controlClass}
              />
            </div>
            <div className={fieldWrap}>
              <Label className={labelClass}>Shipping Cost</Label>
              <Input
                value={shippingCost}
                onChange={(e) => setShippingCost(e.target.value)}
                className={controlClass}
              />
            </div>
            <div className={fieldWrap}>
              <Label className={labelClass}>Status</Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger className={controlClass}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="sent">Sent</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="draft">Draft</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className={fieldWrap}>
              <Label className={labelClass}>Note</Label>
              <Textarea
                value={purchaseNote}
                onChange={(e) => setPurchaseNote(e.target.value)}
                rows={4}
                className="min-h-[110px] resize-none rounded-md border-0 bg-[#F3F4F6] px-3 py-2.5 text-[12px] text-[#1C1D22] focus-visible:ring-1 focus-visible:ring-[#003E6B]/25"
              />
            </div>
            <div className="flex justify-end gap-2 pt-1">
              <Button
                type="button"
                onClick={() => router.back()}
                className="h-8 rounded bg-[#F28B20] px-6 text-[10px] font-semibold text-white hover:bg-[#de7e1d]"
              >
                Cancel
              </Button>
              <Button
                type="button"
                onClick={() => router.push(`/${app}/purchase-orders`)}
                className="h-8 rounded bg-[#003E6B] px-6 text-[10px] font-semibold text-white hover:bg-[#003256]"
              >
                Submit Purchase
              </Button>
            </div>
          </div>
        </section>

        <section className="rounded-xl border border-[#E8EAEE] bg-white p-5">
          <div className="space-y-4 text-[20px]">
            <div className="flex items-center justify-between border-b border-[#EEF1F4] pb-3">
              <span className="text-[22px] text-[#45464E]">Discount:</span>
              <span className="text-[30px] font-medium text-[#1C1D22]">{currency(summaryDiscount)}</span>
            </div>
            <div className="flex items-center justify-between border-b border-[#EEF1F4] pb-3">
              <span className="text-[22px] text-[#45464E]">Shipping:</span>
              <span className="text-[30px] font-medium text-[#1C1D22]">{currency(summaryShipping)}</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-[28px] font-semibold text-[#1C1D22]">Total:</span>
              <span className="text-[40px] font-semibold text-[#1C1D22]">{currency(grandTotal)}</span>
            </div>
          </div>
          <p className="mt-5 text-[11px] text-[#98A2B3]">Products subtotal: {currency(subtotal)}</p>
        </section>
      </div>
    </div>
  );
}