"use client";

import Image from "next/image";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { Menu, X, Home, Box, Briefcase, Newspaper } from "lucide-react";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Textarea } from "../ui/textarea";
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";

export default function Header() {
  const [open, setOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);

  return (
    <>
      <header className="relative w-full bg-white overflow-hidden">
        {/* SIDEBAR */}
        <aside
          className={`fixed right-0 top-0 z-50 h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${
            open ? "translate-x-0" : "translate-x-full"
          }`}
        >
          <div className="flex items-center justify-between border-b border-white/20 p-6">
            <div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]">
              <button className="rounded-full bg-white px-3 py-1">ID</button>
              <button className="px-3 py-1">EN</button>
            </div>

            <button onClick={() => setOpen(false)}>
              <X />
            </button>
          </div>

          <nav className="flex flex-col gap-6 p-6 text-sm font-medium">
            <MenuItem icon={<Home size={18} />} label="Home" />
            <MenuItem icon={<Box size={18} />} label="Product" />
            <MenuItem icon={<Briefcase size={18} />} label="Services" />
            <MenuItem
              icon={<Newspaper size={18} />}
              label="News and Services"
            />
          </nav>
        </aside>

        {/* HERO */}
        <div className="container mx-auto flex min-h-[90vh] items-center px-6">
          <div className="flex-1 space-y-6">
            <h1 className="text-4xl font-extrabold leading-tight md:text-6xl">
              <span className="relative inline-block">
                <span className="absolute bottom-1 left-0 h-3 w-full bg-[#966314]"></span>
                <span className="relative">Beyond Expectations</span>
              </span>
              <br />
              Build <span className="text-[#966314]">Reputation.</span>
            </h1>

            <Button
              size="lg"
              onClick={() => setContactOpen(true)}
              className="rounded-full bg-[#966314] px-8 py-6 text-base hover:bg-[#7c520f]"
            >
              Contact Us
            </Button>
          </div>

          <div className="relative hidden flex-1 justify-end md:flex">
            <Image
              src="/image/img1.png"
              alt="Illustration"
              width={520}
              height={520}
              className="object-contain"
            />
          </div>
        </div>
      </header>

      {/* CONTACT MODAL */}
      {contactOpen && <ContactDialog onClose={() => setContactOpen(false)} />}
    </>
  );
}

function MenuItem({ icon, label }: { icon: React.ReactNode; label: string }) {
  return (
    <div className="flex cursor-pointer items-center justify-between border-b border-white/20 pb-3">
      <span>{label}</span>
      {icon}
    </div>
  );
}

function ContactDialog({ onClose }: { onClose: () => void }) {
  const [contactMethod, setContactMethod] = useState("office");

  return (
    <div className="fixed inset-0 z-[999] bg-black/40 backdrop-blur-sm flex items-end md:items-center justify-center">
      {/* CONTAINER */}
      <div
        className="
        w-full 
        h-[90vh] md:h-auto 
        md:max-w-2xl 
        bg-white 
        rounded-t-3xl md:rounded-2xl 
        p-5 md:p-8 
        shadow-2xl 
        relative 
        overflow-y-auto
      "
      >
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute right-4 top-4 md:right-6 md:top-6 text-gray-500 hover:text-black"
        >
          <X size={20} />
        </button>

        {/* Header */}
        <h2 className="text-xl md:text-2xl font-bold text-[#966314] mb-2">
          Contact Us
        </h2>
        <p className="text-sm md:text-base text-gray-500 mb-6">
          Select a contact method and fill in your personal information. We will
          get back to you shortly.
        </p>

        {/* Contact Method */}
        <div className="space-y-3 md:space-y-4 mb-6">
          <RadioGroup
            value={contactMethod}
            onValueChange={setContactMethod}
            className="space-y-3"
          >
            {/* Option 1 */}
            <div
              className={`flex items-start space-x-3 rounded-xl p-4 cursor-pointer border transition ${
                contactMethod === "office" ? "border-[#966314]" : "border-muted"
              }`}
            >
              <RadioGroupItem value="office" id="office" className="mt-1" />
              <div className="space-y-1">
                <Label htmlFor="office" className="font-medium cursor-pointer">
                  Office Presentation
                </Label>
                <p className="text-sm text-muted-foreground">
                  Our team will come to your office for a presentation.
                </p>
              </div>
            </div>

            {/* Option 2 */}
            <div
              className={`flex items-start space-x-3 rounded-xl p-4 cursor-pointer border transition ${
                contactMethod === "hais" ? "border-[#966314]" : "border-muted"
              }`}
            >
              <RadioGroupItem value="hais" id="hais" className="mt-1" />
              <div className="space-y-1">
                <Label htmlFor="hais" className="font-medium cursor-pointer">
                  Via HAIs
                </Label>
                <p className="text-sm text-muted-foreground">
                  Online consultation through HAIs platform.
                </p>
              </div>
            </div>
          </RadioGroup>
        </div>

        {/* Form */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="fullName">
              Full Name <span className="text-red-500">*</span>
            </Label>
            <Input id="fullName" placeholder="Enter full name" />
          </div>

          <div className="space-y-2">
            <Label htmlFor="email">
              Email <span className="text-red-500">*</span>
            </Label>
            <Input id="email" type="email" placeholder="email@example.com" />
          </div>

          <div className="space-y-2">
            <Label htmlFor="phone">
              Phone Number <span className="text-red-500">*</span>
            </Label>
            <Input id="phone" placeholder="08xx xxxx xxxx" />
          </div>

          <div className="space-y-2">
            <Label htmlFor="company">
              Company Name <span className="text-red-500">*</span>
            </Label>
            <Input id="company" placeholder="PT. Example Company" />
          </div>
        </div>

        <div className="space-y-2 mt-4">
          <Label htmlFor="message">Message / Requirement</Label>
          <Textarea
            id="message"
            placeholder="Describe your needs or questions..."
            className="min-h-[120px]"
          />
        </div>

        {/* Buttons */}
        <div className="mt-6 flex flex-col-reverse md:flex-row gap-3 md:justify-end">
          <button
            onClick={onClose}
            className="w-full md:w-auto rounded-xl border px-6 py-3 hover:bg-gray-100"
          >
            Cancel
          </button>

          <button className="w-full md:w-auto rounded-xl bg-[#966314] px-6 py-3 text-white hover:bg-[#7c520f]">
            Send Request
          </button>
        </div>
      </div>
    </div>
  );
}