import FormSection from "@/src/components/form/FormSection";
import FormInput from "@/src/components/form/FormInput";
import FormSelect from "@/src/components/form/FormSelect";
import FormTextarea from "@/src/components/form/FormTextarea";
import FormMultipleFileUpload from "@/src/components/form/FormMultipleFileUpload";
import { raiseTicketFormData } from "@/src/validation/web/validation";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Control } from "react-hook-form";

interface RaiseATicketProps {
  control: Control<raiseTicketFormData>;
  errors: any;
  isReadOnly: boolean;
}

const QuestionTypeOptions = [
  { label: "Bug Report", value: "bug" },
  { label: "Feature Request", value: "feature" },
  { label: "General Inquiry", value: "inquiry" },
  { label: "Complaint", value: "complaint" },
];

const ApplicationNameOptions = [
  { label: "Tenant Maintenance Requests", value: "tenant_maintenance" },
  { label: "Home Improvement Program", value: "home_improvement" },
  { label: "First-Time Home Buyer Assistance", value: "first_time_buyer" },
];

export default function RaiseATicket({
  control,
  errors,
  isReadOnly,
}: RaiseATicketProps) {
  const router = useRouter();

  const handleCancel = () => {
    router.push("/ticket/ticket-list");
  };
  return (
    <>
      <section
        className="relative w-full bg-cover bg-center bg-no-repeat 
              py-6 md:py-10  px-5 lg:px-20 rounded-lg overflow-hidden mt-5"
        style={{
          backgroundImage: "url('about/about-bg.png')",
        }}
      >
        <div className="absolute inset-0 bg-black/40"></div>

        <div className="relative z-10 max-w-7xl mx-auto">
          <nav className="inline-flex items-center gap-4 px-8 py-2 rounded-full bg-teal-transperent backdrop-blur-sm mb-6">
            <Link
              href="/"
              className="text-[15px] md:text-[17px]  text-white  font-medium cursor-pointer hover:underline"
            >
              What We Offer
            </Link>

            <span className="text-white text-2xl leading-none">›</span>

            <span className=" text-[15px] md:text-[17px]  text-white  font-medium">
              Raise Ticket
            </span>
          </nav>

          <h1 className="text-[20px] lg:text-[35px] font-semibold text-white leading-tight md:leading-snug">
            <span className="inline-flex items-center gap-3 relative pr-[25px]">
              Let us know what's wrong & we'll take care of it.
              <Image
                src="/icons/top-arrow.svg"
                alt="Top Arrow"
                width={36}
                height={36}
                className="absolute right-[0px]  md:right-[-25px] lg:right-[-50px]  top-[-15px]"
              />
            </span>{" "}
            <br />
            Housing & Development.
          </h1>
        </div>
      </section>
      <section className="w-full pt-9 px-0 md:px-10 pb-10">
        <div className="max-w-7xl mx-auto">
          <div className="bg-white rounded-xl shadow-sm p-6 lg:p-10">
            <h2 className="text-xl lg:text-2xl font-semibold text-gray-900 mb-8">
              We're here to help share your concern or request.
            </h2>

            <FormSection title="Ticket Information">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 space-y-6">
                <FormSelect
                  name="questionType"
                  control={control}
                  label="Question Type"
                  options={QuestionTypeOptions}
                  placeholder="Select Question Type"
                  required
                  disabled={isReadOnly}
                  error={errors?.questionType}
                />

                <FormSelect
                  name="applicationName"
                  control={control}
                  label="Application Name"
                  options={ApplicationNameOptions}
                  placeholder="Select Application"
                  required
                  disabled={isReadOnly}
                  error={errors?.applicationName}
                />
              </div>
            </FormSection>

            <FormSection title="Ticket Details">
              <div className="space-y-6">
                <FormInput
                  name="ticketTitle"
                  control={control}
                  label="Ticket Title"
                  placeholder="Enter ticket title"
                  required
                  disabled={isReadOnly}
                  error={errors?.ticketTitle}
                />

                <FormTextarea
                  name="ticketDescription"
                  control={control}
                  label="Ticket Description"
                  placeholder="Enter detailed description of your issue (optional)"
                  required={false}
                  disabled={isReadOnly}
                  error={errors?.ticketDescription}
                  rows={5}
                />

                <FormMultipleFileUpload
                  name="documents"
                  control={control}
                  label="Upload Documents"
                  disabled={isReadOnly}
                  error={errors?.documents}
                  maxFiles={10}
                />
              </div>
            </FormSection>

            <div className="mt-8 flex justify-end gap-4">
              <button
                type="button"
                onClick={handleCancel}
                className="border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm font-medium px-8 py-3 rounded-lg transition"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={isReadOnly}
                className="bg-teal-600 hover:bg-teal-700 disabled:bg-gray-400 text-white text-sm font-medium px-8 py-3 rounded-lg transition"
              >
                Submit Ticket
              </button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}