"use client";

import Button from "@/components/ui/Button";

import { cn } from "@/lib/utils";

interface SupportRequestFormProps {
  subjectLabel?: string;
  subjectPlaceholder?: string;
  descriptionLabel?: string;
  descriptionPlaceholder?: string;
  attachmentsLabel?: string;
  cancelLabel?: string;
  submitLabel?: string;
  showSubject?: boolean;
  showDescription?: boolean;
  showAttachments?: boolean;
  showCancel?: boolean;
  onCancel?: () => void;
  onSubmit?: (formData: FormData) => void;
  className?: string;
}

function RequiredLabel({ children }: { children: React.ReactNode }) {
  return (
    <label className="text-sm font-medium text-[#1f2440]">
      {children} <span className="text-red-500">*</span>
    </label>
  );
}

export default function SupportRequestForm({
  subjectLabel = "Subject",
  subjectPlaceholder = "Enter Subject Here",
  descriptionLabel = "Description",
  descriptionPlaceholder = "Please Provide detailed information about your issue ....",
  attachmentsLabel = "Attachments",
  cancelLabel = "Cancel",
  submitLabel = "Submit",
  showSubject = true,
  showDescription = true,
  showAttachments = true,
  showCancel = true,
  onCancel,
  onSubmit,
  className,
}: SupportRequestFormProps) {
  return (
    <form
      className={cn("w-full rounded-lg bg-white text-[#1f2440]", className)}
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit?.(new FormData(event.currentTarget));
      }}
    >
      <div className="space-y-5">
        {showSubject && (
          <div className="space-y-2">
            <RequiredLabel>{subjectLabel}</RequiredLabel>
            <input
              name="subject"
              type="text"
              required
              placeholder={subjectPlaceholder}
              className="h-12 w-full rounded-full bg-gray-100 px-6 text-sm outline-none placeholder:text-gray-400"
            />
          </div>
        )}

        {showDescription && (
          <div className="space-y-2">
            <RequiredLabel>{descriptionLabel}</RequiredLabel>
            <textarea
              name="description"
              required
              rows={3}
              placeholder={descriptionPlaceholder}
              className="w-full resize-none rounded-2xl bg-gray-100 px-6 py-4 text-sm outline-none placeholder:text-gray-400"
            />
          </div>
        )}

        {showAttachments && (
          <div className="space-y-2">
            <RequiredLabel>{attachmentsLabel}</RequiredLabel>
            <label className="flex min-h-[150px] cursor-pointer flex-col items-center justify-center rounded-md bg-gray-100 px-6 py-8 text-center transition-colors hover:bg-gray-200">
              <input name="attachments" type="file" multiple className="sr-only" />
              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-white text-gray-500 shadow-sm">
                <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 16V4M8 8l4-4 4 4M20 16.5V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2.5" />
                </svg>
              </span>
              <p className="mt-4 text-sm font-semibold text-gray-900">
                Drag & Drop files here or <span className="text-[#00AFC1] underline">Choose File</span>
              </p>
              <p className="mt-2 text-xs text-gray-500">
                Files supported: PDF, JPG, PNG | Maximum size : 5MB
              </p>
            </label>
          </div>
        )}
      </div>

      <div className="mt-6 flex justify-end gap-4">
        {showCancel && (
          <Button
            type="button"
            variant="ghost"
            onClick={onCancel}
            className="h-11 min-w-40 rounded-full bg-gray-100 text-sm font-semibold text-gray-700 hover:bg-gray-200"
          >
            {cancelLabel}
          </Button>
        )}
        <Button type="submit" variant="teal" className="h-11 min-w-40 rounded-full text-sm font-semibold">
          {submitLabel}
        </Button>
      </div>
    </form>
  );
}
