"use client";

import type { ReactNode } from "react";
import { PhotoUploader } from "@/components/admin/PhotoUploader";
import { Button } from "@/components/ui/Button";
import { destinations } from "@/content/destinations";
import type { Offer } from "@/generated/prisma/client";

export function OfferForm({
  offer,
  action,
}: {
  offer?: Offer | null;
  action: (formData: FormData) => void | Promise<void>;
}) {
  return (
    <form action={action} className="flex max-w-2xl flex-col gap-6">
      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="Title (English)" name="titleEn" defaultValue={offer?.titleEn} required />
        <Field
          label="Title (Arabic)"
          name="titleAr"
          defaultValue={offer?.titleAr}
          required
          dir="rtl"
        />
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        <TextArea
          label="Description (English)"
          name="descriptionEn"
          defaultValue={offer?.descriptionEn}
          required
        />
        <TextArea
          label="Description (Arabic)"
          name="descriptionAr"
          defaultValue={offer?.descriptionAr}
          required
          dir="rtl"
        />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <Field
          label="Price"
          name="price"
          type="number"
          step="0.01"
          defaultValue={offer?.price?.toString()}
          required
        />
        <Field label="Currency" name="currency" defaultValue={offer?.currency ?? "EUR"} required />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <Field
          label="Duration (e.g. 5 days)"
          name="duration"
          defaultValue={offer?.duration}
          required
        />
        <Field label="Category" name="category" defaultValue={offer?.category} required />
      </div>
      <div className="flex flex-col gap-1.5">
        <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
          Destination
        </label>
        <select
          name="destinationSlug"
          defaultValue={offer?.destinationSlug ?? ""}
          className="rounded-xl border border-charcoal-950/15 px-4 py-2.5 text-sm focus:border-gold-500 focus:outline-none"
        >
          <option value="">—</option>
          {destinations.map((d) => (
            <option key={d.slug} value={d.slug}>
              {d.nameEn}
            </option>
          ))}
        </select>
      </div>
      <div className="flex flex-col gap-1.5">
        <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
          Image
        </label>
        <PhotoUploader name="imageUrl" defaultValue={offer?.imageUrl} />
      </div>
      <div className="flex items-center gap-6">
        <label className="flex items-center gap-2 text-sm text-charcoal-700">
          <input type="checkbox" name="featured" defaultChecked={offer?.featured ?? false} />
          Featured
        </label>
        <label className="flex items-center gap-2 text-sm text-charcoal-700">
          <input type="checkbox" name="published" defaultChecked={offer?.published ?? true} />
          Published
        </label>
      </div>
      <Button type="submit" className="w-fit">
        {offer ? "Save Changes" : "Create Offer"}
      </Button>
    </form>
  );
}

function Field({
  label,
  name,
  defaultValue,
  required,
  type = "text",
  step,
  dir,
}: {
  label: string;
  name: string;
  defaultValue?: string;
  required?: boolean;
  type?: string;
  step?: string;
  dir?: "rtl" | "ltr";
}) {
  return (
    <div className="flex flex-col gap-1.5">
      <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
        {label}
      </label>
      <input
        name={name}
        type={type}
        step={step}
        dir={dir}
        defaultValue={defaultValue}
        required={required}
        className="rounded-xl border border-charcoal-950/15 px-4 py-2.5 text-sm focus:border-gold-500 focus:outline-none"
      />
    </div>
  );
}

function TextArea({
  label,
  name,
  defaultValue,
  required,
  dir,
}: {
  label: string;
  name: string;
  defaultValue?: string;
  required?: boolean;
  dir?: "rtl" | "ltr";
}): ReactNode {
  return (
    <div className="flex flex-col gap-1.5">
      <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
        {label}
      </label>
      <textarea
        name={name}
        dir={dir}
        rows={4}
        defaultValue={defaultValue}
        required={required}
        className="rounded-xl border border-charcoal-950/15 px-4 py-2.5 text-sm focus:border-gold-500 focus:outline-none"
      />
    </div>
  );
}