"use client";

import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import {
  CalendarDays,
  ChevronDown,
  Copy,
  Gamepad2,
  Headphones,
  MapPin,
  Pencil,
  Search,
  SlidersHorizontal,
  Smartphone,
  Truck,
  Package,
} from "lucide-react";
import Image from "next/image";
import { useState } from "react";
import avatarImage from "@/assets/images/avatar.jpeg";

const BAR_LG = [2, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1];
const BAR_SM = [1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 2, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1];

type ShippingLabelSummaryPageBodyProps = {
  app: string;
  orderId: string;
};

function BarcodeBlock({ className, barClassName }: { className?: string; barClassName?: string }) {
  return (
    <div
      className={cn("inline-flex h-8 max-w-full items-stretch justify-center overflow-hidden", className)}
      role="img"
      aria-label="Barcode"
    >
      {BAR_LG.map((w, i) => (
        <div
          key={i}
          className={cn(
            "h-full min-h-8 bg-[#1C1D22] shrink-0",
            w === 2 ? "w-[2px]" : "w-px",
            barClassName,
          )}
        />
      ))}
    </div>
  );
}

function BarcodeBlockSmall() {
  return (
    <div className="inline-flex h-5 max-w-full items-stretch justify-end overflow-hidden" role="img" aria-label="Item barcode">
      {BAR_SM.map((w, i) => (
        <div
          key={i}
          className={cn("h-full min-h-4 shrink-0 bg-[#1C1D22]/90", w === 2 ? "w-[1.5px]" : "w-px")}
        />
      ))}
    </div>
  );
}

const LINE_ITEMS = [
  {
    id: "1",
    name: "Iphone 13 Pro Max",
    unitWeight: "0.24kg",
    quantity: 2,
    totalWeight: "0.48kg",
    icon: Smartphone,
    tone: "from-slate-700 to-slate-900",
  },
  {
    id: "2",
    name: "Joystick",
    unitWeight: "0.14kg",
    quantity: 1,
    totalWeight: "0.14kg",
    icon: Gamepad2,
    tone: "from-amber-500 to-amber-600",
  },
  {
    id: "3",
    name: "HeadPhone",
    unitWeight: "0.12kg",
    quantity: 1,
    totalWeight: "0.12kg",
    icon: Headphones,
    tone: "from-sky-500 to-sky-600",
  },
] as const;

function LabelValue({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <p className="text-[11px] text-[#98A2B3]">{label}</p>
      <p className="text-[12px] font-medium text-[#1C1D22] sm:text-sm">{value}</p>
    </div>
  );
}

export default function ShippingLabelSummaryPageBody({ app, orderId }: ShippingLabelSummaryPageBodyProps) {
  void app;
  void orderId; // reserved for API: load label by `orderId`
  const [search, setSearch] = useState("");

  return (
    <div className="min-h-0 space-y-3 bg-[#F3F4F6] p-2 md:space-y-4 md:p-3">
      <MainTitle title="Order Summary" goBack>
        <div className="flex flex-wrap items-center gap-2">
          <Button
            type="button"
            className="h-9 rounded-md bg-[#F28B20] px-4 text-xs font-semibold text-white shadow-none hover:bg-[#de7e1d]"
          >
            Download
          </Button>
          <Button
            type="button"
            className="h-9 rounded-md bg-[#003E6B] px-4 text-xs font-semibold text-white shadow-none hover:bg-[#003256]"
          >
            Print Shipping Label
          </Button>
        </div>
      </MainTitle>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 shadow-sm md:p-5">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-[#1C1D22] sm:gap-x-4 sm:text-base">
              <span>
                <span className="text-[#98A2B3]">Order Number </span>
                <span className="font-semibold">#743648</span>
              </span>
              <span className="text-[#E5E7EB] sm:inline">|</span>
              <span>
                <span className="text-[#98A2B3]">Order Date </span>
                <span className="text-[#667085]">12 Sept 2022 - 12:55 Pm</span>
              </span>
            </div>
            <div className="mt-2 flex flex-wrap items-center gap-2 text-sm">
              <span className="text-[#98A2B3]">Tracking ID:</span>
              <span className="font-medium text-[#1C1D22]">9348fjr73</span>
              <button
                type="button"
                className="inline-flex size-7 items-center justify-center rounded border border-[#E5E7EB] text-[#667085] transition-colors hover:bg-[#F3F4F6]"
                aria-label="Edit tracking ID"
              >
                <Pencil className="size-3.5" />
              </button>
              <button
                type="button"
                className="inline-flex size-7 items-center justify-center rounded border border-[#E5E7EB] text-[#667085] transition-colors hover:bg-[#F3F4F6]"
                aria-label="Copy tracking ID"
              >
                <Copy className="size-3.5" />
              </button>
            </div>
          </div>
          <div className="flex shrink-0 flex-col items-center gap-2 self-center lg:items-end">
            <BarcodeBlock className="h-10 min-w-[12rem] scale-x-90 sm:scale-100" />
            <p className="whitespace-nowrap text-center text-[10px] tracking-widest text-[#667085] sm:text-xs">
              1 2 3 4 5 6 7 8 9 1 2 3 3
            </p>
          </div>
        </div>
      </section>

      <section className="overflow-hidden rounded-lg border border-[#E5E7EB] bg-white p-4 shadow-sm md:p-5">
        <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-4">
          <div className="min-w-0">
            <div className="flex items-start gap-3">
              <Image
                src={avatarImage}
                alt="Customer"
                width={48}
                height={48}
                className="size-12 shrink-0 rounded-full object-cover"
              />
              <div>
                <p className="text-base font-semibold text-[#101828]">Janet Adebayo</p>
                <p className="mt-0.5 text-[12px] text-[#98A2B3]">Customer since 12 Sept 2022</p>
                <p className="mt-2 text-sm text-[#1C1D22]">+1 348 065 6506</p>
                <p className="text-sm text-[#1C1D22]">janet.adebayo@gmail.com</p>
              </div>
            </div>
          </div>

          <div className="min-w-0 xl:border-l xl:border-[#F2F4F7] xl:pl-6">
            <div className="mb-1.5 inline-flex size-8 items-center justify-center rounded-md border border-[#E5E7EB] bg-[#F8FAFC] text-[#667085]">
              <MapPin className="size-4" />
            </div>
            <p className="text-[11px] text-[#98A2B3]">Home Address</p>
            <p className="mt-1 text-sm font-medium leading-relaxed text-[#1C1D22]">
              No. 15 Adekun Street, Yaba, Lagos State
            </p>
          </div>

          <div className="min-w-0 xl:border-l xl:border-[#F2F4F7] xl:pl-6">
            <p className="text-[11px] text-[#98A2B3]">Shipping Address</p>
            <p className="mt-1 text-sm font-medium leading-relaxed text-[#1C1D22]">
              No. 15 Adekun Street, Yaba, Lagos State
            </p>
          </div>

          <div className="relative min-w-0 xl:border-l xl:border-[#F2F4F7] xl:pl-6">
            <p className="absolute right-0 top-0 text-right text-lg font-semibold text-[#1C1D22] sm:text-xl">
              $24.46 <span className="text-sm font-medium text-[#98A2B3]">USD</span>
            </p>
            <div className="pt-8 sm:pt-6">
              <div className="mb-1.5 inline-flex size-8 items-center justify-center rounded-md border border-[#E5E7EB] bg-[#F8FAFC] text-[#667085]">
                <Truck className="size-4" />
              </div>
              <p className="text-[11px] text-[#98A2B3]">Shipping Service</p>
              <p className="mt-1 text-sm font-medium text-[#1C1D22]">USPS First Class Passage</p>
              <button
                type="button"
                className="mt-2 inline-flex h-7 min-w-[120px] items-center justify-center gap-1.5 rounded-full border border-[#12B76A] bg-white px-3 text-xs font-medium text-[#12B76A] hover:bg-[#ECFDF3]"
              >
                Completed
                <ChevronDown className="size-3 shrink-0 text-[#12B76A] opacity-90" />
              </button>
            </div>
          </div>
        </div>
      </section>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 shadow-sm md:px-5 md:py-3">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
          <div className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-[#E5E7EB] bg-[#F8FAFC] text-[#667085]">
            <Package className="size-4" />
          </div>
          <div className="grid flex-1 grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-5 md:gap-6">
            <LabelValue label="Package Name" value="PKG 001" />
            <LabelValue label="Length" value="8.6" />
            <LabelValue label="Width" value="5.4" />
            <LabelValue label="Height" value="1.6" />
            <LabelValue label="Weight" value="3" />
          </div>
        </div>
      </section>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 shadow-sm md:p-5">
        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
          <h2 className="text-[20px] font-semibold text-[#101828] sm:text-[22px]">Customer Orders</h2>
          <div className="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
            <div className="flex h-9 w-full min-w-0 items-center gap-1.5 rounded-md border border-[#E5E7EB] bg-white px-2 sm:w-[220px]">
              <Search className="size-4 shrink-0 text-[#98A2B3]" />
              <Input
                type="search"
                placeholder="Search"
                className="h-full border-0 p-0 text-xs text-[#111827] placeholder:text-[#D1D5DB] focus-visible:ring-0"
                aria-label="Search order items"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <Button type="button" variant="outline" className="h-9 rounded-md border-[#E5E7EB] px-3 text-xs text-[#667085]">
              <SlidersHorizontal className="mr-1.5 size-3.5" />
              Filters
            </Button>
            <Button type="button" variant="outline" className="h-9 rounded-md border-[#E5E7EB] px-3 text-xs text-[#667085]">
              <CalendarDays className="mr-1.5 size-3.5" />
              filters
            </Button>
          </div>
        </div>

        <div className="overflow-x-auto rounded-md border border-[#E5E7EB]">
          <table className="w-full min-w-[800px]">
            <thead>
              <tr className="border-b border-[#E5E7EB] bg-white">
                <th className="w-9 px-2 py-2 text-left">
                  <input
                    type="checkbox"
                    className="size-3.5 rounded border border-[#9CA3AF]"
                    aria-label="Select all items"
                  />
                </th>
                <th className="px-2 py-2 text-left text-[12px] font-semibold text-[#111827]">Image</th>
                <th className="px-2 py-2 text-left text-[12px] font-semibold text-[#111827]">Product Name</th>
                <th className="px-2 py-2 text-left text-[12px] font-semibold text-[#111827]">Unit Weight</th>
                <th className="px-2 py-2 text-left text-[12px] font-semibold text-[#111827]">Quantity</th>
                <th className="px-2 py-2 text-left text-[12px] font-semibold text-[#111827]">Total Weight</th>
                <th className="px-2 py-2 text-right text-[12px] font-semibold text-[#111827]">Bar Code</th>
              </tr>
            </thead>
            <tbody>
              {LINE_ITEMS.filter(
                (row) =>
                  !search.trim() ||
                  row.name.toLowerCase().includes(search.trim().toLowerCase()) ||
                  row.totalWeight.toLowerCase().includes(search.trim().toLowerCase()),
              ).map((row) => {
                const Icon = row.icon;
                return (
                  <tr key={row.id} className="border-b border-[#F3F4F6] last:border-b-0">
                    <td className="px-2 py-2.5">
                      <input
                        type="checkbox"
                        className="size-3.5 rounded border border-[#9CA3AF]"
                        aria-label={`Select ${row.name}`}
                      />
                    </td>
                    <td className="px-2 py-2.5">
                      <div
                        className={cn(
                          "inline-flex size-9 items-center justify-center rounded-md border border-[#E5E7EB] bg-gradient-to-br text-white",
                          row.tone,
                        )}
                      >
                        <Icon className="size-4" strokeWidth={1.75} />
                      </div>
                    </td>
                    <td className="px-2 py-2.5 text-[12px] font-medium text-[#111827]">{row.name}</td>
                    <td className="px-2 py-2.5 text-[12px] text-[#111827]">{row.unitWeight}</td>
                    <td className="px-2 py-2.5 text-[12px] text-[#111827]">{row.quantity}</td>
                    <td className="px-2 py-2.5 text-[12px] text-[#111827]">{row.totalWeight}</td>
                    <td className="px-2 py-2.5 text-right">
                      <div className="ml-auto w-fit pl-1">
                        <BarcodeBlockSmall />
                        <p className="mt-0.5 text-right text-[9px] text-[#98A2B3]">8 9 0 1 2 3 4 5 6 7 8 9 1 2 3 2</p>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <div className="mt-2 flex items-center justify-between">
          <Button
            type="button"
            variant="outline"
            className="h-7 rounded-md border-[#E5E7EB] px-3 text-[10px] font-medium text-[#6B7280] disabled:opacity-50"
            disabled
          >
            Previous
          </Button>
          <p className="text-[10px] text-[#9CA3AF]">page 1 of 1</p>
          <Button
            type="button"
            variant="outline"
            className="h-7 rounded-md border-[#E5E7EB] px-5 text-[10px] font-medium text-[#6B7280] disabled:opacity-50"
            disabled
          >
            Next
          </Button>
        </div>
      </section>
    </div>
  );
}