"use client";

import { useState } from "react";
import { PhotoIcon } from "./Icons";

export default function AddPropertyForm() {
  const [photos, setPhotos] = useState<string[]>(["Photo 1", "Photo 2", "Photo 3"]);

  function handleAddPhoto() {
    setPhotos((prev) => [...prev, `Photo ${prev.length + 1}`]);
  }

  function handleRemovePhoto(index: number) {
    setPhotos((prev) => prev.filter((_, i) => i !== index));
  }

  return (
    <div className="bg-white border border-mist rounded-md">
      <div className="flex flex-wrap justify-between items-center gap-3 px-5 py-4 border-b border-mist">
        <h3 className="text-lg">Add a new property</h3>
        <span className="text-xs text-ink-soft">
          Submitted listings go to Villa for review before they appear in search.
        </span>
      </div>
      <form className="p-5" onSubmit={(e) => e.preventDefault()}>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <Field label="Property title">
            <input type="text" placeholder="e.g. 2-Bedroom House" />
          </Field>
          <Field label="House type">
            <select defaultValue="2 bedroom">
              <option>Single room</option>
              <option>2 bedroom</option>
              <option>3 bedroom</option>
              <option>Compound house</option>
            </select>
          </Field>
          <Field label="Town">
            <select defaultValue="Akim Oda">
              <option>Akim Oda</option>
              <option>New Tafo</option>
              <option>Kade</option>
              <option>Asamankese</option>
            </select>
          </Field>
          <Field label="Street / area">
            <input type="text" placeholder="e.g. Adweso Road" />
          </Field>
          <Field label="Price (GH₵ / month)">
            <input type="number" placeholder="e.g. 1200" />
          </Field>
          <Field label="Availability">
            <select defaultValue="Available now">
              <option>Available now</option>
              <option>Available from a date</option>
              <option>Currently occupied</option>
            </select>
          </Field>
          <Field label="Description" full>
            <textarea
              className="min-h-[100px] resize-y"
              placeholder="Describe the property, compound, water and electricity supply, and nearby landmarks."
            />
          </Field>

          <div className="sm:col-span-2 flex flex-col gap-2">
            <label className="font-mono text-xs uppercase tracking-widest text-ink-soft">
              Property photos
            </label>
            <button
              type="button"
              onClick={handleAddPhoto}
              className="border-2 border-dashed border-mist rounded-md p-10 text-center text-sm text-ink-soft bg-white hover:border-forest transition-colors"
            >
              <PhotoIcon className="w-8 h-8 mx-auto mb-3 text-ink-soft" />
              <strong className="text-forest">Click to upload</strong> or drag photos here. Add
              at least 4 photos to help Villa verify the property faster.
            </button>
            <div className="grid grid-cols-3 sm:grid-cols-5 gap-3 mt-2">
              {photos.map((photo, i) => (
                <div
                  key={photo}
                  className="relative aspect-square rounded-sm bg-gradient-to-br from-mist to-sage flex items-center justify-center text-[11px] font-mono text-ink-soft"
                >
                  {photo}
                  <button
                    type="button"
                    onClick={() => handleRemovePhoto(i)}
                    aria-label={`Remove ${photo}`}
                    className="absolute top-1 right-1 w-5 h-5 rounded-full bg-white text-xs leading-none flex items-center justify-center"
                  >
                    ×
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="flex gap-3 mt-6">
          <button
            type="submit"
            className="inline-flex items-center justify-center font-semibold text-sm px-6 py-3 rounded-pill bg-forest text-white hover:bg-forest-deep transition-colors"
          >
            Submit for review
          </button>
          <button
            type="button"
            className="inline-flex items-center justify-center font-semibold text-sm px-6 py-3 rounded-pill border border-mist text-forest hover:bg-forest hover:border-forest hover:text-white transition-colors"
          >
            Save as draft
          </button>
        </div>
      </form>
    </div>
  );
}

function Field({ label, full, children }: { label: string; full?: boolean; children: React.ReactNode }) {
  return (
    <div className={`flex flex-col gap-2 ${full ? "sm:col-span-2" : ""}`}>
      <label className="font-mono text-xs uppercase tracking-widest text-ink-soft">{label}</label>
      <div className="[&_input]:w-full [&_select]:w-full [&_textarea]:w-full [&_input]:border [&_select]:border [&_textarea]:border [&_input]:border-mist [&_select]:border-mist [&_textarea]:border-mist [&_input]:rounded-sm [&_select]:rounded-sm [&_textarea]:rounded-sm [&_input]:px-4 [&_select]:px-4 [&_textarea]:px-4 [&_input]:py-3 [&_select]:py-3 [&_textarea]:py-3 [&_input]:text-sm [&_select]:text-sm [&_textarea]:text-sm [&_input]:bg-white [&_select]:bg-white [&_textarea]:bg-white focus-within:[&_input]:outline-2 focus-within:[&_input]:outline-gold">
        {children}
      </div>
    </div>
  );
}