import type {
  Media,
  RealEstate,
  RealEstateMedia,
  RealEstateStatus,
} from "@prisma/client";

import {
  deleteRealEstateAction,
  saveRealEstateAction,
} from "@/app/(admin)/admin/nekretnine/actions";
import { AdminDeleteButton } from "@/components/admin/common/AdminDeleteButton";
import { AdminSaveNotice } from "@/components/admin/common/AdminSaveNotice";
import { UnsavedChangesWatcher } from "@/components/admin/common/UnsavedChangesWatcher";
import { VideoEmbedField } from "@/components/admin/forms/VideoEmbedField";
import { AdminEntityCompanyField } from "@/components/admin/forms/AdminEntityCompanyField";
import { RegionPicker } from "@/components/common/RegionPicker";
import { RealEstateGalleryManager } from "@/components/admin/media/RealEstateGalleryManager";
import {
  getListingForLabel,
  getRealEstateStatusLabel,
} from "@/lib/module-formatters";
import { SubmitButton } from "@/components/common/SubmitButton";
import {
  ENERGY_CLASS_OPTIONS,
  FURNISHED_OPTIONS,
  HEATING_TYPE_OPTIONS,
  LEGAL_STATUS_OPTIONS,
  ORIENTATION_OPTIONS,
  OWNERSHIP_TYPE_OPTIONS,
  PARKING_TYPE_OPTIONS,
  PROPERTY_AMENITY_OPTIONS,
  PROPERTY_CONDITION_OPTIONS,
} from "@/lib/constants/real-estate-options";
import { formatDateTimeLocalInput } from "@/lib/module-formatters";

type RealEstateDetails = RealEstate & {
  company?: { id: string; name: string; slug: string; type: string } | null;
  gallery?: Array<RealEstateMedia & { media: Media }>;
};

type PropertyTypeOption = {
  id: string;
  nameSr: string;
};

const REAL_ESTATE_STATUS_OPTIONS: RealEstateStatus[] = [
  "PENDING",
  "PUBLISHED",
  "SOLD_RENTED",
  "EXPIRED",
  "REJECTED",
];

const statusColors: Record<RealEstateStatus, string> = {
  PENDING: "bg-amber-100 text-amber-800 border-amber-200",
  PUBLISHED: "bg-emerald-100 text-emerald-800 border-emerald-200",
  SOLD_RENTED: "bg-blue-100 text-blue-800 border-blue-200",
  EXPIRED: "bg-gray-100 text-gray-600 border-gray-200",
  REJECTED: "bg-red-100 text-red-700 border-red-200",
};

// ─── Section wrapper ──────────────────────────────────────────────────────────

function FormSection({
  title,
  icon,
  children,
}: {
  title: string;
  icon: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <section className="overflow-hidden rounded-2xl border border-border bg-white shadow-sm">
      <div className="flex items-center gap-3 border-b border-border/60 bg-muted/40 px-5 py-4">
        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-white text-primary shadow-sm border border-border/60">
          {icon}
        </div>
        <h3 className="text-sm font-bold uppercase tracking-[0.12em] text-foreground">{title}</h3>
      </div>
      <div className="p-5">{children}</div>
    </section>
  );
}

// ─── Field helpers ────────────────────────────────────────────────────────────

function Field({
  label,
  hint,
  children,
}: {
  label: string;
  hint?: string;
  children: React.ReactNode;
}) {
  return (
    <div className="space-y-1.5">
      <label className="block text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">
        {label}
      </label>
      {children}
      {hint ? <p className="text-xs leading-5 text-muted-foreground/70">{hint}</p> : null}
    </div>
  );
}

const inputCls = "adminx-input";
const selectCls = "adminx-select";

// ─── Main component ───────────────────────────────────────────────────────────

export function RealEstateForm({
  listing,
  propertyTypes,
}: {
  listing?: RealEstateDetails | null;
  propertyTypes: PropertyTypeOption[];
}) {
  const isEdit = Boolean(listing?.id);

  return (
    <div className="space-y-5">
      <form action={saveRealEstateAction} className="space-y-5">
        <UnsavedChangesWatcher />
        <input type="hidden" name="id" value={listing?.id ?? ""} />

        {/* ── Top action bar ───────────────────────────────── */}
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-border bg-white px-5 py-4 shadow-sm">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">
              {isEdit ? "Uređivanje oglasa" : "Novi oglas"}
            </p>
            <p className="mt-0.5 text-sm font-semibold text-foreground">
              {isEdit ? (listing?.title ?? "—") : "Popunite podatke o nekretnini"}
            </p>
          </div>
          <div className="flex items-center gap-3">
            {listing?.id ? (
              <AdminDeleteButton
                action={deleteRealEstateAction}
                title="Obrisati nekretninu?"
                description="Oglas za nekretninu biće uklonjen iz admina i javnog listinga."
                triggerLabel="Obriši"
                inputs={[{ name: "id", value: listing.id }]}
              />
            ) : null}
            <SubmitButton className="primary-button h-10 px-5 text-sm">
              Sačuvaj nekretninu
            </SubmitButton>
          </div>
        </div>
        <AdminSaveNotice message="Nekretnina je sačuvana." />

        {/* ── Two-column layout ────────────────────────────── */}
        <div className="grid gap-5 2xl:grid-cols-[minmax(0,1fr)_320px]">

          {/* Left column */}
          <div className="space-y-5">

            {/* Osnovni podaci */}
            <FormSection
              title="Osnovni podaci"
              icon={
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" />
                </svg>
              }
            >
              <div className="space-y-4">
                <Field label="Kompanija / agencija">
                  <AdminEntityCompanyField
                    initialCompany={listing?.company ?? null}
                    searchLabel="Pretražite kompaniju ili agenciju"
                    placeholder="Ukucajte naziv agencije ili kompanije…"
                    emptyHint="Opciono. Ako oglas unosi fizičko lice, ostavite profil prazan i unesite kontakt prodavca ispod."
                  />
                </Field>

                <div className="grid gap-4 sm:grid-cols-3">
                  <Field label="Ime prodavca" hint="Obavezno samo ako oglas nije vezan za profil.">
                    <input name="ownerName" defaultValue={listing?.ownerName ?? ""} className={inputCls} placeholder="npr. Marko Marković" />
                  </Field>
                  <Field label="Telefon prodavca">
                    <input name="ownerPhone" defaultValue={listing?.ownerPhone ?? ""} className={inputCls} placeholder="+381..." />
                  </Field>
                  <Field label="E-mail prodavca">
                    <input name="ownerEmail" type="email" defaultValue={listing?.ownerEmail ?? ""} className={inputCls} placeholder="ime@email.com" />
                  </Field>
                </div>

                <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_200px]">
                  <Field label="Naslov oglasa">
                    <input required name="title" defaultValue={listing?.title ?? ""} className={inputCls} placeholder="npr. Trosoban stan u centru, 82 m²" />
                  </Field>
                  <Field label="Slug">
                    <input name="slug" defaultValue={listing?.slug ?? ""} className={inputCls} placeholder="trosoban-stan-centar" />
                  </Field>
                </div>

                <Field label="Opis">
                  <textarea
                    name="description"
                    defaultValue={listing?.description ?? ""}
                    className="min-h-32 w-full resize-y rounded-xl border border-border bg-white px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/10 transition"
                    placeholder="Detaljni opis nekretnine — lokacija, stanje, posebnosti, oprema..."
                  />
                </Field>
              </div>
            </FormSection>

            {/* Specifikacija */}
            <FormSection
              title="Specifikacija"
              icon={
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
                </svg>
              }
            >
              <div className="space-y-4">
                <div className="grid gap-4 sm:grid-cols-2">
                  <Field label="Tip oglasa">
                    <select name="listingFor" defaultValue={listing?.listingFor ?? "PRODAJA"} className={selectCls}>
                      {["PRODAJA", "IZDAVANJE"].map((v) => (
                        <option key={v} value={v}>{getListingForLabel(v)}</option>
                      ))}
                    </select>
                  </Field>
                  <Field label="Tip nekretnine" hint="Lista se puni iz šifrarnika aktivnih tipova.">
                    <select name="propertyType" defaultValue={listing?.propertyType ?? ""} className={selectCls}>
                      <option value="">— Izaberi tip —</option>
                      {propertyTypes.map((o) => (
                        <option key={o.id} value={o.nameSr}>{o.nameSr}</option>
                      ))}
                    </select>
                  </Field>
                </div>

                {/* Price / Currency / Area / Rooms — 4 col grid */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                  <Field label="Cena">
                    <div className="relative">
                      <input name="price" defaultValue={listing?.price ?? ""} className={inputCls + " pr-14"} placeholder="0" />
                    </div>
                  </Field>
                  <Field label="Valuta">
                    <select name="currency" defaultValue={listing?.currency ?? "EUR"} className={selectCls}>
                      <option value="EUR">EUR €</option>
                      <option value="RSD">RSD din</option>
                    </select>
                  </Field>
                  <Field label="Kvadratura (m²)">
                    <div className="relative">
                      <input name="areaM2" defaultValue={listing?.areaM2 ?? ""} className={inputCls + " pr-10"} placeholder="0" />
                      <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">m²</span>
                    </div>
                  </Field>
                  <Field label="Broj soba">
                    <input name="rooms" defaultValue={listing?.rooms ?? ""} className={inputCls} placeholder="npr. 3 ili 2.5" />
                  </Field>
                  <Field label="Broj kupatila">
                    <input name="bathrooms" defaultValue={listing?.bathrooms ?? ""} className={inputCls} placeholder="npr. 1 ili 1.5" />
                  </Field>
                  <Field label="Terase / balkoni">
                    <input type="number" min="0" name="balconies" defaultValue={listing?.balconies ?? ""} className={inputCls} placeholder="0" />
                  </Field>
                  <Field label="Sprat">
                    <input type="number" name="floor" defaultValue={listing?.floor ?? ""} className={inputCls} placeholder="npr. 4" />
                  </Field>
                  <Field label="Ukupno spratova">
                    <input type="number" min="0" name="totalFloors" defaultValue={listing?.totalFloors ?? ""} className={inputCls} placeholder="npr. 8" />
                  </Field>
                </div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                  <Field label="Stanje nekretnine">
                    <select name="condition" defaultValue={listing?.condition ?? ""} className={selectCls}>
                      <option value="">— Izaberi stanje —</option>
                      {PROPERTY_CONDITION_OPTIONS.map((value) => <option key={value} value={value}>{value}</option>)}
                    </select>
                  </Field>
                  <Field label="Godina izgradnje">
                    <input type="number" min="1800" max="2100" name="constructionYear" defaultValue={listing?.constructionYear ?? ""} className={inputCls} placeholder="npr. 2022" />
                  </Field>
                  <Field label="Grejanje">
                    <select name="heatingType" defaultValue={listing?.heatingType ?? ""} className={selectCls}>
                      <option value="">— Izaberi grejanje —</option>
                      {HEATING_TYPE_OPTIONS.map((value) => <option key={value} value={value}>{value}</option>)}
                    </select>
                  </Field>
                  <Field label="Nameštenost">
                    <select name="furnished" defaultValue={listing?.furnished ?? ""} className={selectCls}>
                      <option value="">— Izaberi —</option>
                      {FURNISHED_OPTIONS.map((value) => <option key={value} value={value}>{value}</option>)}
                    </select>
                  </Field>
                  <Field label="Parking">
                    <select name="parkingType" defaultValue={listing?.parkingType ?? ""} className={selectCls}>
                      <option value="">— Izaberi parking —</option>
                      {PARKING_TYPE_OPTIONS.map((value) => <option key={value} value={value}>{value}</option>)}
                    </select>
                  </Field>
                  <Field label="Energetski razred">
                    <select name="energyClass" defaultValue={listing?.energyClass ?? ""} className={selectCls}>
                      <option value="">— Izaberi razred —</option>
                      {ENERGY_CLASS_OPTIONS.map((value) => <option key={value} value={value}>{value}</option>)}
                    </select>
                  </Field>
                  <Field label="Orijentacija">
                    <select name="orientation" defaultValue={listing?.orientation ?? ""} className={selectCls}>
                      <option value="">— Izaberi orijentaciju —</option>
                      {ORIENTATION_OPTIONS.map((value) => <option key={value} value={value}>{value}</option>)}
                    </select>
                  </Field>
                  <Field label="Vrsta vlasništva">
                    <select name="ownershipType" defaultValue={listing?.ownershipType ?? ""} className={selectCls}>
                      <option value="">— Izaberi vlasništvo —</option>
                      {OWNERSHIP_TYPE_OPTIONS.map((value) => <option key={value} value={value}>{value}</option>)}
                    </select>
                  </Field>
                  <Field label="Pravni status">
                    <select name="legalStatus" defaultValue={listing?.legalStatus ?? ""} className={selectCls}>
                      <option value="">— Izaberi status —</option>
                      {LEGAL_STATUS_OPTIONS.map((value) => <option key={value} value={value}>{value}</option>)}
                    </select>
                  </Field>
                  <Field label="Mesečni troškovi">
                    <input type="number" min="0" name="monthlyCosts" defaultValue={listing?.monthlyCosts ?? ""} className={inputCls} placeholder="RSD" />
                  </Field>
                  <Field label="Depozit">
                    <input type="number" min="0" name="deposit" defaultValue={listing?.deposit ?? ""} className={inputCls} placeholder="Iznos u valuti oglasa" />
                  </Field>
                  <Field label="Dostupno od">
                    <input type="date" name="availableFrom" defaultValue={formatDateTimeLocalInput(listing?.availableFrom).slice(0, 10)} className={inputCls} />
                  </Field>
                </div>
              </div>
            </FormSection>

            <FormSection
              title="Oprema i pogodnosti"
              icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>}
            >
              <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                {PROPERTY_AMENITY_OPTIONS.map((amenity) => (
                  <label key={amenity} className="flex cursor-pointer items-center gap-3 rounded-xl border border-border bg-muted/30 px-3.5 py-3 text-sm font-medium text-foreground transition hover:border-primary/30 hover:bg-primary/5">
                    <input type="checkbox" name="amenities" value={amenity} defaultChecked={listing?.amenities.includes(amenity)} className="h-4 w-4 rounded border-border accent-primary" />
                    {amenity}
                  </label>
                ))}
              </div>
            </FormSection>

            {/* Lokacija */}
            <FormSection
              title="Lokacija"
              icon={
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" />
                </svg>
              }
            >
              <div className="space-y-4">
                <Field label="Adresa">
                  <input name="address" defaultValue={listing?.address ?? ""} className={inputCls} placeholder="npr. Knez Mihailova 10, lokal 3" />
                </Field>

                <RegionPicker
                  cityValue={listing?.cityId ?? ""}
                  municipalityValue={listing?.municipalityId ?? ""}
                  neighborhoodValue={listing?.neighborhoodId ?? ""}
                />

                <div className="grid gap-4 sm:grid-cols-2">
                  <Field label="Latitude" hint="Opciono — tačne GPS koordinate.">
                    <input name="lat" defaultValue={listing?.lat ?? ""} className={inputCls} placeholder="44.8145" />
                  </Field>
                  <Field label="Longitude">
                    <input name="lng" defaultValue={listing?.lng ?? ""} className={inputCls} placeholder="20.4661" />
                  </Field>
                </div>
              </div>
            </FormSection>

            {/* Promo video — YouTube / Vimeo / upload MP4 direktno na R2 */}
            <FormSection
              title="Promo video"
              icon={
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polygon points="23 7 16 12 23 17 23 7" /><rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
                </svg>
              }
            >
              <VideoEmbedField
                urlName="videoUrl"
                titleName="videoTitle"
                defaultUrl={listing?.videoUrl ?? ""}
                defaultTitle={listing?.videoTitle ?? ""}
                uploadDirectory={`nekretnine/${listing?.id ?? "draft"}/video`}
                hint="Posetioci će videti video na javnoj strani nekretnine. Podržano: YouTube, Vimeo, MP4 link, ili upload MP4/WebM/MOV fajla."
              />
              <div className="mt-4">
                <Field label="3D virtuelna tura" hint="Matterport ili druga javna virtuelna tura koja kupcu omogućava obilazak nekretnine.">
                  <input type="url" name="virtualTourUrl" defaultValue={listing?.virtualTourUrl ?? ""} className={inputCls} placeholder="https://…" />
                </Field>
              </div>
            </FormSection>
          </div>

          {/* Right column — Objava */}
          <div className="space-y-5">
            <FormSection
              title="Objava"
              icon={
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
                </svg>
              }
            >
              <div className="space-y-4">
                <Field label="Status">
                  <select name="status" defaultValue={listing?.status ?? "PENDING"} className={selectCls}>
                    {REAL_ESTATE_STATUS_OPTIONS.map((s) => (
                      <option key={s} value={s}>{getRealEstateStatusLabel(s)}</option>
                    ))}
                  </select>
                </Field>

                {/* Status indicator */}
                {listing?.status ? (
                  <div className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold ${statusColors[listing.status]}`}>
                    <span className="h-1.5 w-1.5 rounded-full bg-current opacity-70" />
                    {getRealEstateStatusLabel(listing.status)}
                  </div>
                ) : null}

                <label className="flex cursor-pointer items-center gap-3 rounded-xl border border-border bg-muted/40 px-4 py-3 transition hover:border-primary/30 hover:bg-primary/5">
                  <input
                    type="checkbox"
                    name="isFeatured"
                    defaultChecked={listing?.isFeatured ?? false}
                    className="h-4 w-4 rounded border-border accent-primary"
                  />
                  <div>
                    <p className="text-sm font-semibold text-foreground">Istaknuto</p>
                    <p className="text-xs text-muted-foreground">Prikazuje se na vrhu listinga</p>
                  </div>
                </label>

                <label className="flex cursor-pointer items-center gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 transition hover:border-amber-300">
                  <input type="checkbox" name="isExclusive" defaultChecked={listing?.isExclusive ?? false} className="h-4 w-4 rounded border-amber-300 accent-amber-600" />
                  <div>
                    <p className="text-sm font-semibold text-amber-950">Ekskluzivna ponuda</p>
                    <p className="text-xs text-amber-700">Oglas dobija jasnu premium oznaku</p>
                  </div>
                </label>

                {listing?.company ? (
                  <div className="rounded-xl border border-border bg-muted/40 px-4 py-3">
                    <p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">Vezano za profil</p>
                    <p className="mt-1 text-sm font-semibold text-foreground">{listing.company.name}</p>
                    <p className="text-xs text-muted-foreground">{listing.company.type === "PLACE" ? "Mesto" : "Kompanija"}</p>
                  </div>
                ) : listing?.ownerName ? (
                  <div className="rounded-xl border border-border bg-muted/40 px-4 py-3">
                    <p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">Privatni prodavac</p>
                    <p className="mt-1 text-sm font-semibold text-foreground">{listing.ownerName}</p>
                    <p className="text-xs text-muted-foreground">{listing.ownerPhone || listing.ownerEmail || "Kontakt nije dodat"}</p>
                  </div>
                ) : null}
              </div>
            </FormSection>

            {/* Meta info */}
            {listing?.createdAt ? (
              <div className="rounded-2xl border border-border bg-white p-4 shadow-sm">
                <p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">Info</p>
                <div className="mt-3 space-y-2 text-xs text-muted-foreground">
                  <div className="flex justify-between gap-2">
                    <span>Kreiran</span>
                    <span className="font-medium text-foreground">
                      {new Date(listing.createdAt).toLocaleDateString("sr-RS")}
                    </span>
                  </div>
                  <div className="flex justify-between gap-2">
                    <span>Ažuriran</span>
                    <span className="font-medium text-foreground">
                      {new Date(listing.updatedAt).toLocaleDateString("sr-RS")}
                    </span>
                  </div>
                  {listing.id ? (
                    <div className="flex justify-between gap-2">
                      <span>ID</span>
                      <span className="font-mono text-[0.68rem] text-muted-foreground">{listing.id.slice(-8)}</span>
                    </div>
                  ) : null}
                </div>
              </div>
            ) : null}
          </div>
        </div>

        {/* Bottom save */}
        <div className="flex justify-end rounded-2xl border border-border bg-white px-5 py-4 shadow-sm">
          <SubmitButton className="primary-button h-10 px-6 text-sm">
            Sačuvaj nekretninu
          </SubmitButton>
        </div>
      </form>

      {/* Galerija */}
      {listing?.id ? (
        <section className="overflow-hidden rounded-2xl border border-border bg-white shadow-sm">
          <div className="flex items-center gap-3 border-b border-border/60 bg-muted/40 px-5 py-4">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-white text-primary shadow-sm border border-border/60">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" />
              </svg>
            </div>
            <h3 className="text-sm font-bold uppercase tracking-[0.12em] text-foreground">Galerija nekretnine</h3>
          </div>
          <div className="p-5">
            <RealEstateGalleryManager
              realEstateId={listing.id}
              title={listing.title}
              initialItems={
                listing.gallery?.map((item) => ({
                  id: item.id,
                  mediaId: item.mediaId,
                  sortOrder: item.sortOrder,
                  media: { url: item.media.url, alt: item.media.alt },
                })) ?? []
              }
            />
          </div>
        </section>
      ) : (
        <div className="flex items-center gap-3 rounded-2xl border border-dashed border-border bg-white/60 px-5 py-5">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-muted-foreground">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" />
          </svg>
          <p className="text-sm text-muted-foreground">
            Sačuvajte nekretninu prvi put da biste aktivirali galeriju fotografija.
          </p>
        </div>
      )}
    </div>
  );
}