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, X } from "lucide-react";
import Link from "next/link";

type NewExpensePageProps = {
  params: {
    app: string;
  };
};

const fieldClass =
  "h-10 rounded-md border-0 bg-[#F6F8FB] px-3 text-[13px] text-[#344054] shadow-none placeholder:text-[#98A2B3] focus-visible:ring-1 focus-visible:ring-[#003E6B]/25";

export default function NewExpensePage({ params }: NewExpensePageProps) {
  const backHref = `/${params.app}/expenses`;

  return (
    <div className="relative min-h-[calc(100vh-190px)] overflow-hidden rounded-xl bg-[#1F293733]">
      <div className="absolute inset-0 backdrop-blur-[1px]" aria-hidden />
      <div className="relative mx-auto mt-10 w-full max-w-[860px] px-4 pb-10">
        <section className="rounded-xl bg-white p-5 shadow-[0_20px_45px_rgba(16,24,40,0.22)] md:p-6">
          <div className="mb-6 flex items-center justify-between gap-3">
            <h1 className="text-[22px] font-semibold text-[#101828]">Create Expenses</h1>
            <Button
              asChild
              variant="outline"
              size="icon"
              className="size-8 rounded-lg border-0 bg-[#EEF4FA] text-[#667085] shadow-none hover:bg-[#E5EDF6]"
            >
              <Link href={backHref} aria-label="Close create expense form">
                <X className="size-4" />
              </Link>
            </Button>
          </div>

          <form className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="relative">
                <Input type="text" defaultValue="12/12/2020" className={`${fieldClass} pr-10`} />
                <CalendarDays className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#667085]" />
              </div>

              <Select defaultValue="w-2">
                <SelectTrigger className={fieldClass}>
                  <SelectValue placeholder="Select Warehouse" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="w-2">Warehouse 002</SelectItem>
                  <SelectItem value="w-3">Warehouse 003</SelectItem>
                  <SelectItem value="w-8">Warehouse 008</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <Select defaultValue="gadgets">
                <SelectTrigger className={fieldClass}>
                  <SelectValue placeholder="Select Category" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="gadgets">Gadgets</SelectItem>
                  <SelectItem value="home">Home Accesories</SelectItem>
                  <SelectItem value="office">Office Accesories</SelectItem>
                </SelectContent>
              </Select>

              <div className="grid grid-cols-[1fr_44px_28px] overflow-hidden rounded-md">
                <Input
                  type="number"
                  defaultValue={0}
                  className={`${fieldClass} rounded-none rounded-l-md [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none`}
                />
                <div className="grid place-items-center border-l border-[#E4E7EC] bg-[#EEF2F6] text-[#667085]">$</div>
                <div className="grid border-l border-[#E4E7EC] bg-[#EEF2F6]">
                  <button
                    type="button"
                    className="grid place-items-center border-b border-[#E4E7EC] text-[#667085] hover:bg-[#E5EBF2]"
                    aria-label="Increase amount"
                  >
                    <ChevronUp className="size-3.5" />
                  </button>
                  <button
                    type="button"
                    className="grid place-items-center text-[#667085] hover:bg-[#E5EBF2]"
                    aria-label="Decrease amount"
                  >
                    <ChevronDown className="size-3.5" />
                  </button>
                </div>
              </div>
            </div>

            <Textarea
              rows={5}
              placeholder="Details"
              className="resize-none rounded-md border-0 bg-[#F6F8FB] px-3 py-3 text-[13px] text-[#344054] placeholder:text-[#98A2B3] focus-visible:ring-1 focus-visible:ring-[#003E6B]/25"
            />

            <div className="flex items-center justify-center gap-4 pt-1">
              <Button
                asChild
                type="button"
                className="h-9 min-w-[104px] rounded-md bg-[#F79009] px-4 text-xs font-semibold text-white shadow-none hover:bg-[#dc7b06]"
              >
                <Link href={backHref}>Cancel</Link>
              </Button>
              <Button
                type="button"
                className="h-9 min-w-[112px] rounded-md bg-[#003E6B] px-4 text-xs font-semibold text-white shadow-none hover:bg-[#003256]"
              >
                Create Expense
              </Button>
            </div>
          </form>
        </section>
      </div>
    </div>
  );
}