"use client";

import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  CalendarDays,
  ChevronDown,
  Copy,
  MapPin,
  MoreVertical,
  Search,
  ShoppingCart,
  UserRound,
} from "lucide-react";
import Image from "next/image";
import avatarImage from "@/assets/images/avatar.jpeg";

type OrderSummaryViewPageBodyProps = {
  app: string;
};

type OrderSummaryRow = {
  id: string;
  imageTone: string;
  name: string;
  orderDate: string;
  orderType: string;
  trackingId: string;
  quantity: number;
  orderTotal: string;
  orderStatus: "Pending" | "Received" | "Ordered";
  paymentStatus: "Partial" | "Paid" | "Due";
};

const ORDER_SUMMARY_ROWS: OrderSummaryRow[] = [
  {
    id: "1",
    imageTone: "from-[#1E293B] to-[#0F172A]",
    name: "Phones",
    orderDate: "11 Feb 2024 - 11:08pm",
    orderType: "Home Delivery",
    trackingId: "9348fjr73",
    quantity: 3,
    orderTotal: "$ 3,000.00",
    orderStatus: "Pending",
    paymentStatus: "Partial",
  },
  {
    id: "2",
    imageTone: "from-[#A855F7] to-[#6D28D9]",
    name: "Headphone",
    orderDate: "11 Feb 2024 - 11:08pm",
    orderType: "Home Delivery",
    trackingId: "9348fjr73",
    quantity: 1,
    orderTotal: "$ 300.00",
    orderStatus: "Received",
    paymentStatus: "Paid",
  },
  {
    id: "3",
    imageTone: "from-[#EAB308] to-[#CA8A04]",
    name: "Joysticks",
    orderDate: "11 Feb 2024 - 11:08pm",
    orderType: "Home Delivery",
    trackingId: "9348fjr73",
    quantity: 5,
    orderTotal: "$ 700.00",
    orderStatus: "Received",
    paymentStatus: "Paid",
  },
  {
    id: "4",
    imageTone: "from-[#111827] to-[#374151]",
    name: "Smart Watches",
    orderDate: "11 Feb 2024 - 11:08pm",
    orderType: "Home Delivery",
    trackingId: "9348fjr73",
    quantity: 8,
    orderTotal: "$ 1,000.00",
    orderStatus: "Ordered",
    paymentStatus: "Due",
  },
  {
    id: "5",
    imageTone: "from-[#1F2937] to-[#4B5563]",
    name: "Mouses",
    orderDate: "11 Feb 2024 - 11:08pm",
    orderType: "Home Delivery",
    trackingId: "9348fjr73",
    quantity: 4,
    orderTotal: "$ 500.00",
    orderStatus: "Pending",
    paymentStatus: "Partial",
  },
  {
    id: "6",
    imageTone: "from-[#3F3F46] to-[#71717A]",
    name: "Macbooks",
    orderDate: "11 Feb 2024 - 11:08pm",
    orderType: "Home Delivery",
    trackingId: "9348fjr73",
    quantity: 6,
    orderTotal: "$ 5,000.00",
    orderStatus: "Received",
    paymentStatus: "Paid",
  },
];

function getOrderStatusClass(status: OrderSummaryRow["orderStatus"]) {
  if (status === "Received") return "border-[#12B76A] text-[#12B76A]";
  if (status === "Ordered") return "border-[#1570EF] text-[#1570EF]";
  return "border-[#F04438] text-[#F04438]";
}

function getPaymentStatusClass(status: OrderSummaryRow["paymentStatus"]) {
  if (status === "Paid") return "border-[#12B76A] text-[#12B76A]";
  if (status === "Due") return "border-[#F04438] text-[#F04438]";
  return "border-[#1570EF] text-[#1570EF]";
}

function SummaryCell({ label, value }: { label: string; value: string }) {
  return (
    <div className="space-y-1">
      <p className="text-[12px] text-[#8B8D97]">{label}</p>
      <p className="text-[17px] font-semibold leading-tight text-[#1C1D22]">{value}</p>
    </div>
  );
}

export default function OrderSummaryViewPageBody({ app }: OrderSummaryViewPageBodyProps) {
  void app;

  return (
    <div className="min-h-0 space-y-3 bg-[#F3F4F6] p-2 md:p-3">
      <MainTitle title="Order Summary" goBack>
        <div className="flex flex-wrap items-center gap-2">
          <Button className="h-9 rounded-md bg-[#F28B20] px-4 text-xs font-semibold text-white hover:bg-[#de7e1d]">
            Cancel Order
          </Button>
          <Button className="h-9 rounded-md bg-[#003E6B] px-4 text-xs font-semibold text-white hover:bg-[#003256]">
            Mark as complete
            <ChevronDown className="ml-1.5 size-4" aria-hidden />
          </Button>
        </div>
      </MainTitle>

      <div className="rounded-lg border border-[#E5E7EB] bg-white p-3">
        <div className="mb-2 flex justify-end">
          <Button className="h-8 rounded-md bg-[#F28B20] px-5 text-xs font-semibold text-white hover:bg-[#de7e1d]">
            Edit
          </Button>
        </div>

        <p className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-[20px] text-[#45464E]">
          <span>
            Order Number <span className="font-semibold">#743648</span>
          </span>
          <span>
            Order Date <span className="font-medium text-[#98A2B3]">12 Sept 2022 - 12:55 Pm</span>
          </span>
          <span className="inline-flex items-center gap-1">
            Tracking ID <span className="font-medium text-[#98A2B3]">9348fjr73</span>
            <Copy className="size-4 text-[#667085]" />
          </span>
        </p>

        <section className="grid gap-3 lg:grid-cols-3">
          <div className="rounded-md border border-[#E5E7EB] p-3">
            <div className="mb-2 flex items-start gap-2">
              <Image src={avatarImage} alt="Customer avatar" width={36} height={36} className="size-9 rounded-md object-cover" />
              <div>
                <p className="text-[18px] font-medium text-[#1C1D22]">Janet Adebayo</p>
                <p className="text-[13px] text-[#667085]">Customer since 12 Sept 2022</p>
              </div>
              <span className="ml-auto rounded-md border border-[#12B76A] px-2 py-0.5 text-[12px] font-medium text-[#12B76A]">
                Active
              </span>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <SummaryCell label="Phone" value="+1 34 065 506" />
              <SummaryCell label="Email" value="janet.adebayo@gmail.com" />
            </div>
          </div>

          <div className="rounded-md border border-[#E5E7EB] p-3">
            <span className="mb-2 inline-flex size-6 items-center justify-center rounded-md border border-[#E5E7EB] bg-[#F8FAFC] text-[#667085]">
              <MapPin className="size-4" aria-hidden />
            </span>
            <SummaryCell label="Home Address" value="No. 15 Adekun Street, Yaba, Lagos State" />
          </div>

          <div className="rounded-md border border-[#E5E7EB] p-3">
            <div className="mb-2 flex items-center justify-between">
              <span className="inline-flex size-6 items-center justify-center rounded-md border border-[#E5E7EB] bg-[#F8FAFC] text-[#667085]">
                <CalendarDays className="size-4" aria-hidden />
              </span>
              <button type="button" className="inline-flex items-center text-[12px] text-[#667085]">
                All Time
                <ChevronDown className="ml-1 size-4" aria-hidden />
              </button>
            </div>
            <SummaryCell label="Total Orders" value="$25,00,00" />
          </div>
        </section>
      </div>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-3">
        <div className="grid grid-cols-2 gap-y-4 md:grid-cols-3 lg:grid-cols-7">
          {[
            { label: "All Orders", value: "10", icon: CalendarDays, showDate: true },
            { label: "Pending", value: "2" },
            { label: "Completed", value: "8" },
            { label: "Cancelled", value: "0", icon: CalendarDays, showDate: true },
            { label: "Returned", value: "0" },
            { label: "Damaged", value: "0", showDate: true },
            { label: "Abandoned Cart", value: "2", icon: ShoppingCart, danger: true },
          ].map((card) => {
            const Icon = card.icon;
            return (
              <article key={card.label} className="border-r border-[#F3F4F6] px-3 last:border-r-0">
                <div className="mb-1.5 flex min-h-6 items-center justify-between">
                  {Icon ? (
                    <span className="inline-flex size-5 items-center justify-center rounded-sm border border-[#E5E7EB] bg-white text-[#667085]">
                      <Icon className="size-3.5" aria-hidden />
                    </span>
                  ) : (
                    <span />
                  )}
                  {card.showDate ? (
                    <span className="inline-flex items-center text-[10px] text-[#98A2B3]">
                      All time
                      <ChevronDown className="ml-1 size-3.5" aria-hidden />
                    </span>
                  ) : null}
                </div>
                <p className={`text-[13px] ${card.danger ? "text-[#F04438]" : "text-[#667085]"}`}>{card.label}</p>
                <p className="text-sm font-semibold text-[#101828]">{card.value}</p>
              </article>
            );
          })}
        </div>
      </section>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 md:p-5">
        <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
          <div>
            <h2 className="text-[30px] font-semibold text-[#101828]">Janat Order&apos;s</h2>
            <div className="mt-2 flex items-center gap-6 border-b border-[#E5E7EB]">
              <button type="button" className="border-b-2 border-[#EF7D00] pb-1.5 text-[22px] font-semibold text-[#EF7D00]">
                Orders
              </button>
              <button type="button" className="pb-1.5 text-[22px] font-medium text-[#475467]">
                Return
              </button>
              <button type="button" className="pb-1.5 text-[22px] font-medium text-[#475467]">
                Cancelled
              </button>
            </div>
          </div>

          <div className="flex w-full flex-wrap items-center justify-end gap-2 md:w-auto">
            <div className="flex h-9 w-full items-center gap-1.5 rounded-md border border-[#E5E7EB] bg-white px-2 md:w-[220px]">
              <Search className="size-4 shrink-0 text-[#98A2B3]" aria-hidden />
              <Input
                type="search"
                placeholder="Search"
                className="h-full border-0 p-0 text-xs text-[#111827] placeholder:text-[#D1D5DB] focus-visible:ring-0"
              />
            </div>
            <Button type="button" variant="outline" className="h-9 rounded-md border-[#E5E7EB] px-3 text-xs text-[#667085]">
              <ChevronDown className="mr-1.5 size-3.5 rotate-90" aria-hidden />
              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" aria-hidden />
              filters
            </Button>
          </div>
        </div>

        <div className="overflow-x-auto rounded-md border border-[#E5E7EB]">
          <table className="w-full min-w-[1200px]">
            <thead>
              <tr className="border-b border-[#E5E7EB] bg-white">
                <th className="w-10 px-3 py-2 text-left">
                  <input type="checkbox" className="size-3.5 rounded border border-[#9CA3AF]" />
                </th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Image</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Product Name</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Order Date</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Order Type</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Tracking ID</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Quantity</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Order Total</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Order Status</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Payment Status</th>
              </tr>
            </thead>
            <tbody>
              {ORDER_SUMMARY_ROWS.map((row) => (
                <tr key={row.id} className="border-b border-[#F3F4F6] last:border-b-0">
                  <td className="px-3 py-2.5">
                    <input type="checkbox" className="size-3.5 rounded border border-[#9CA3AF]" />
                  </td>
                  <td className="px-3 py-2.5">
                    <div className={`size-9 rounded-md bg-gradient-to-br ${row.imageTone}`} />
                  </td>
                  <td className="px-3 py-2.5 text-[12px] font-medium text-[#111827]">{row.name}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.orderDate}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.orderType}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">
                    <span className="inline-flex items-center gap-1">
                      {row.trackingId}
                      <Copy className="size-3.5 text-[#98A2B3]" />
                    </span>
                  </td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.quantity}</td>
                  <td className="px-3 py-2.5 text-[12px] font-medium text-[#111827]">{row.orderTotal}</td>
                  <td className="px-3 py-2.5">
                    <button
                      type="button"
                      className={`inline-flex h-6 min-w-[88px] items-center justify-between rounded border px-2 text-[11px] font-medium ${getOrderStatusClass(
                        row.orderStatus
                      )}`}
                    >
                      {row.orderStatus}
                      <ChevronDown className="ml-1 size-3.5" aria-hidden />
                    </button>
                  </td>
                  <td className="px-3 py-2.5">
                    <button
                      type="button"
                      className={`inline-flex h-6 min-w-[74px] items-center justify-between rounded border px-2 text-[11px] font-medium ${getPaymentStatusClass(
                        row.paymentStatus
                      )}`}
                    >
                      {row.paymentStatus}
                      <ChevronDown className="ml-1 size-3.5" aria-hidden />
                    </button>
                  </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]">
            Previous
          </Button>
          <p className="text-[10px] text-[#9CA3AF]">page 1 of 10</p>
          <Button type="button" variant="outline" className="h-7 rounded-md border-[#E5E7EB] px-5 text-[10px] font-medium text-[#6B7280]">
            Next
          </Button>
        </div>
      </section>
    </div>
  );
}