"use client";

import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { CalendarDays, ChevronDown, ChevronUp, Search, Trash2 } from "lucide-react";
import { useRouter } from "next/navigation";

type CreateQuotationPageBodyProps = {
  app: string;
};

type QuotationLine = {
  id: string;
  image: string;
  product: string;
  unitCost: string;
  stock: string;
  quantity: string;
  discount: string;
  total: string;
};

const QUOTATION_LINES: QuotationLine[] = [
  { id: "1", image: "📱", product: "Phone", unitCost: "$510.00", stock: "120", quantity: "1", discount: "$20.00", total: "$492.00" },
  { id: "2", image: "🎮", product: "Joystick", unitCost: "$310.00", stock: "98", quantity: "2", discount: "$62.00", total: "$558.00" },
  { id: "3", image: "⌚", product: "Smart Watch", unitCost: "$150.00", stock: "120", quantity: "5", discount: "$80.00", total: "$670.00" },
  { id: "4", image: "💻", product: "MacBook", unitCost: "$90.00", stock: "120", quantity: "6", discount: "$20.00", total: "$520.00" },
  { id: "5", image: "🎧", product: "Head Phones", unitCost: "$110.00", stock: "120", quantity: "4", discount: "$30.00", total: "$410.00" },
];

export default function CreateQuotationPageBody({ app }: CreateQuotationPageBodyProps) {
  const router = useRouter();

  return (
    <div className="min-h-0 space-y-4 bg-[#F3F4F6] p-2 md:p-3">
      <MainTitle title="Create Quotation" />

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 md:p-5">
        <div className="grid gap-3 md:grid-cols-3">
          <div className="relative">
            <CalendarDays className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#98A2B3]" />
            <Input
              type="text"
              defaultValue="12/12/2020"
              className="h-10 rounded-md border-0 bg-[#F5F7FA] pr-10 text-[12px] text-[#1C1D22] focus-visible:ring-1 focus-visible:ring-[#003E6B]/25"
            />
          </div>

          <Select defaultValue="customer-1">
            <SelectTrigger className="h-10 rounded-md border-0 bg-[#F5F7FA] text-[12px] text-[#1C1D22] focus:ring-[#003E6B]/25">
              <SelectValue placeholder="Customer" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="customer-1">Customer</SelectItem>
              <SelectItem value="customer-2">Victor James</SelectItem>
              <SelectItem value="customer-3">Warren Smith</SelectItem>
            </SelectContent>
          </Select>

          <Select defaultValue="warehouse-1">
            <SelectTrigger className="h-10 rounded-md border-0 bg-[#F5F7FA] text-[12px] text-[#1C1D22] focus:ring-[#003E6B]/25">
              <SelectValue placeholder="Select Warehouse" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="warehouse-1">Select Warehouse</SelectItem>
              <SelectItem value="warehouse-2">Warehouse 006</SelectItem>
              <SelectItem value="warehouse-3">Warehouse 009</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </section>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 md:p-5">
        <h2 className="mb-4 text-[18px] font-semibold text-[#1C1D22]">Select Products For Quotation</h2>

        <div className="mb-4 w-full md:w-[340px]">
          <div className="flex h-10 items-center gap-2 rounded-md border border-[#E4E7EC] bg-[#F5F7FA] px-3">
            <Search className="size-4 shrink-0 text-[#667085]" />
            <Input
              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>
        </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-white">
                <th className="w-10 px-3 py-2 text-left">
                  <input type="checkbox" className="size-3 rounded border border-[#90A4C0]" aria-label="Select all rows" />
                </th>
                {["Image", "Product", "Unit Cost", "Stock", "Quanfity", "Discount", "Total", "Action"].map((head) => (
                  <th key={head} className="px-3 py-2 text-left text-[13px] font-semibold text-[#1C1D22]">
                    {head}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {QUOTATION_LINES.map((line) => (
                <tr key={line.id} className="border-b border-[#F1F3F9] last:border-0">
                  <td className="px-3 py-2.5">
                    <input type="checkbox" className="size-3 rounded border border-[#90A4C0]" aria-label={`Select ${line.product}`} />
                  </td>
                  <td className="px-3 py-2.5">
                    <div className="grid size-9 place-items-center rounded-md bg-[#F3F4F6] text-lg">{line.image}</div>
                  </td>
                  <td className="px-3 py-2.5 text-[13px] text-[#272833]">{line.product}</td>
                  <td className="px-3 py-2.5 text-[13px] text-[#272833]">{line.unitCost}</td>
                  <td className="px-3 py-2.5 text-[13px] text-[#272833]">{line.stock}</td>
                  <td className="px-3 py-2.5">
                    <div className="flex items-center gap-2">
                      <span className="w-5 text-center text-[13px] text-[#272833]">{line.quantity}</span>
                      <div className="inline-flex flex-col overflow-hidden rounded border border-[#E4E7EC]">
                        <button
                          type="button"
                          className="grid h-[13px] w-[22px] place-items-center border-b border-[#E4E7EC] bg-[#EEF1F4] text-[#667085]"
                          aria-label="Increase quantity"
                        >
                          <ChevronUp className="size-3" />
                        </button>
                        <button
                          type="button"
                          className="grid h-[13px] w-[22px] place-items-center bg-[#EEF1F4] text-[#667085]"
                          aria-label="Decrease quantity"
                        >
                          <ChevronDown className="size-3" />
                        </button>
                      </div>
                    </div>
                  </td>
                  <td className="px-3 py-2.5 text-[13px] text-[#272833]">{line.discount}</td>
                  <td className="px-3 py-2.5 text-[13px] text-[#272833]">{line.total}</td>
                  <td className="px-3 py-2.5">
                    <button type="button" className="text-[#F04438] hover:text-[#d23024]" aria-label={`Delete ${line.product}`}>
                      <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-lg border border-[#E5E7EB] bg-white p-4 md:p-5">
          <h3 className="mb-3 text-[24px] font-semibold text-[#1C1D22]">Order Details</h3>
          <div className="space-y-3">
            <div className="space-y-1.5">
              <label className="text-[11px] font-medium text-[#667085]">Discount</label>
              <Input
                defaultValue="192"
                className="h-10 rounded-md border-0 bg-[#F5F7FA] text-[12px] text-[#1C1D22] focus-visible:ring-1 focus-visible:ring-[#003E6B]/25"
              />
            </div>
            <div className="space-y-1.5">
              <label className="text-[11px] font-medium text-[#667085]">Shipping Cost</label>
              <Input
                defaultValue="50"
                className="h-10 rounded-md border-0 bg-[#F5F7FA] text-[12px] text-[#1C1D22] focus-visible:ring-1 focus-visible:ring-[#003E6B]/25"
              />
            </div>
            <div className="space-y-1.5">
              <label className="text-[11px] font-medium text-[#667085]">Status</label>
              <Select defaultValue="sent">
                <SelectTrigger className="h-10 rounded-md border-0 bg-[#F5F7FA] text-[12px] text-[#1C1D22] focus:ring-[#003E6B]/25">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="sent">Sent</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1.5">
              <label className="text-[11px] font-medium text-[#667085]">Note</label>
              <Textarea
                defaultValue="This Content is dummy text and its just used for Ui Design."
                rows={4}
                className="min-h-[110px] resize-none rounded-md border-0 bg-[#F5F7FA] 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}/quotations`)}
                className="h-8 rounded bg-[#003E6B] px-6 text-[10px] font-semibold text-white hover:bg-[#003256]"
              >
                Submit Quotation
              </Button>
            </div>
          </div>
        </section>

        <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 md:p-5">
          <div className="space-y-4">
            <div className="flex items-center justify-between border-b border-[#EEF1F4] pb-3">
              <span className="text-[14px] font-medium text-[#45464E]">Discount:</span>
              <span className="text-[16px] font-medium text-[#1C1D22]">$ 192.00</span>
            </div>
            <div className="flex items-center justify-between border-b border-[#EEF1F4] pb-3">
              <span className="text-[14px] font-medium text-[#45464E]">Shipping:</span>
              <span className="text-[16px] font-medium text-[#1C1D22]">$ 50.00</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-[14px] font-semibold text-[#1C1D22]">Total:</span>
              <span className="text-[16px] font-semibold text-[#1C1D22]">$ 242.00</span>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}