"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

type SearchHit = {
  placeId: string;
  name: string;
  address: string;
  lat: number | null;
  lng: number | null;
  rating: number | null;
  reviewCount: number | null;
  types: string[];
};

type PlaceDetails = {
  placeId: string;
  name: string;
  address: string | null;
  city: string | null;
  postalCode: string | null;
  phone: string | null;
  website: string | null;
  lat: number | null;
  lng: number | null;
  rating: number | null;
  reviewCount: number | null;
  primaryType: string | null;
  types: string[];
  workingHours: Array<{
    dayOfWeek: number;
    openTime: string | null;
    closeTime: string | null;
    isClosed: boolean;
  }>;
  photoUrls: string[];
  reviews: Array<{ authorName: string; rating: number; text: string }>;
  googleMapsUrl: string | null;
};

const DAY_LABELS = ["Ned", "Pon", "Uto", "Sre", "Čet", "Pet", "Sub"];

export function GoogleImportTool() {
  const router = useRouter();
  const [query, setQuery] = useState("");
  const [hits, setHits] = useState<SearchHit[]>([]);
  const [searching, setSearching] = useState(false);
  const [selected, setSelected] = useState<PlaceDetails | null>(null);
  const [loadingDetails, setLoadingDetails] = useState(false);
  const [listingType, setListingType] = useState<"COMPANY" | "PLACE">("COMPANY");
  const [includeHours, setIncludeHours] = useState(true);
  const [applying, setApplying] = useState(false);
  const [result, setResult] = useState<
    | { kind: "ok"; submissionId: string; name: string; alreadyImported?: boolean }
    | { kind: "err"; text: string }
    | null
  >(null);

  async function doSearch(e: React.FormEvent) {
    e.preventDefault();
    if (query.trim().length < 3) return;
    setSearching(true);
    setHits([]);
    setSelected(null);
    setResult(null);
    try {
      const res = await fetch(
        `/api/admin/google-import/search?q=${encodeURIComponent(query.trim())}`,
      );
      const data = await res.json();
      if (!res.ok) {
        setResult({ kind: "err", text: data?.error || "Greška u pretrazi." });
        return;
      }
      setHits(data.hits ?? []);
      if ((data.hits ?? []).length === 0) {
        setResult({ kind: "err", text: "Nema rezultata. Probaj sa drugim ključnim rečima." });
      }
    } finally {
      setSearching(false);
    }
  }

  async function loadDetails(placeId: string) {
    setLoadingDetails(true);
    setSelected(null);
    setResult(null);
    try {
      const res = await fetch(
        `/api/admin/google-import/details?placeId=${encodeURIComponent(placeId)}`,
      );
      const data = await res.json();
      if (!res.ok) {
        setResult({ kind: "err", text: data?.error || "Ne mogu da povučem detalje." });
        return;
      }
      setSelected(data.details);
    } finally {
      setLoadingDetails(false);
    }
  }

  async function applyImport() {
    if (!selected) return;
    setApplying(true);
    setResult(null);
    try {
      // 2026-05 redizajn: umesto da kreiramo Submission, navigujemo admina
      // direktno na full CompanyForm sa svim Google podacima pre-popunjenim
      // (uključujući auto-detektovan grad/opština/naselje i kategorije).
      // Admin može da edituje SVE pre nego što kliknom Save kreira pravu firmu.
      const targetPath =
        listingType === "PLACE" ? "/admin/mesta/nova" : "/admin/kompanije/nova";
      const params = new URLSearchParams({
        fromGoogle: selected.placeId,
        ...(includeHours ? {} : { skipHours: "1" }),
      });
      router.push(`${targetPath}?${params.toString()}`);
    } catch (err) {
      setResult({
        kind: "err",
        text: err instanceof Error ? err.message : "Neuspešna navigacija.",
      });
    } finally {
      setApplying(false);
    }
  }

  return (
    <div className="space-y-6">
      {/* ─── Search bar ─── */}
      <form
        onSubmit={doSearch}
        className="surface flex flex-wrap gap-3 rounded-[2rem] p-5"
      >
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder='Naziv firme + grad (npr. "Auto Servis Pera Beograd")'
          className="h-12 flex-1 min-w-[280px] rounded-2xl border border-border bg-white px-4 text-sm"
        />
        <button
          type="submit"
          disabled={searching || query.trim().length < 3}
          className="rounded-2xl bg-primary px-6 text-sm font-bold text-primary-foreground transition hover:bg-primary/90 disabled:opacity-50"
        >
          {searching ? "Tražim..." : "🔍 Pretraži Google"}
        </button>
      </form>

      {/* ─── Search results ─── */}
      {hits.length > 0 && !selected && (
        <section className="rounded-2xl border border-border bg-white">
          <p className="border-b border-border px-4 py-3 text-sm font-bold text-foreground">
            Rezultati ({hits.length}) — klikni firmu za detalje
          </p>
          <ul className="divide-y divide-border">
            {hits.map((h) => (
              <li key={h.placeId}>
                <button
                  type="button"
                  onClick={() => loadDetails(h.placeId)}
                  disabled={loadingDetails}
                  className="block w-full px-4 py-3 text-left transition hover:bg-zinc-50"
                >
                  <p className="font-semibold text-foreground">{h.name}</p>
                  <p className="mt-0.5 text-xs text-muted-foreground">{h.address}</p>
                  <div className="mt-1 flex gap-2 text-[0.7rem]">
                    {h.rating !== null && (
                      <span className="rounded-full bg-amber-50 px-2 py-0.5 text-amber-700">
                        ⭐ {h.rating.toFixed(1)} ({h.reviewCount} recenzija)
                      </span>
                    )}
                    {h.types.slice(0, 2).map((t) => (
                      <span
                        key={t}
                        className="rounded-full bg-zinc-100 px-2 py-0.5 text-zinc-600"
                      >
                        {t.replace(/_/g, " ")}
                      </span>
                    ))}
                  </div>
                </button>
              </li>
            ))}
          </ul>
        </section>
      )}

      {/* ─── Place details preview ─── */}
      {loadingDetails && (
        <p className="rounded-2xl border border-border bg-white p-6 text-center text-sm text-muted-foreground">
          Učitavam podatke iz Google-a...
        </p>
      )}

      {selected && (
        <section className="space-y-4 rounded-2xl border border-primary/30 bg-primary/5 p-5">
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div>
              <p className="text-xs font-bold uppercase tracking-wide text-primary">
                Pregled pre uvoza
              </p>
              <h3 className="mt-1 font-display text-xl font-bold text-foreground">
                {selected.name}
              </h3>
              <p className="mt-1 text-sm text-muted-foreground">{selected.address}</p>
            </div>
            <button
              type="button"
              onClick={() => setSelected(null)}
              className="text-xs font-bold text-muted-foreground hover:text-foreground"
            >
              ✕ Zatvori
            </button>
          </div>

          <div className="grid gap-3 sm:grid-cols-2">
            <div className="rounded-xl bg-white p-3">
              <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
                Kontakt
              </p>
              <p className="mt-1 text-sm">
                <strong>Telefon:</strong> {selected.phone ?? "—"}
                <br />
                <strong>Sajt:</strong> {selected.website ?? "—"}
              </p>
            </div>
            <div className="rounded-xl bg-white p-3">
              <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
                Lokacija
              </p>
              <p className="mt-1 text-sm">
                {selected.city ?? "—"} · {selected.postalCode ?? "—"}
                <br />
                {selected.lat?.toFixed(5) ?? "—"}, {selected.lng?.toFixed(5) ?? "—"}
              </p>
            </div>
            <div className="rounded-xl bg-white p-3">
              <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
                Google ocena
              </p>
              <p className="mt-1 text-sm">
                {selected.rating !== null
                  ? `⭐ ${selected.rating.toFixed(1)} / 5 (${selected.reviewCount} recenzija)`
                  : "—"}
              </p>
            </div>
            <div className="rounded-xl bg-white p-3">
              <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
                Kategorija
              </p>
              <p className="mt-1 text-sm">{selected.primaryType ?? "—"}</p>
            </div>
          </div>

          {/* Working hours */}
          {selected.workingHours.some((h) => !h.isClosed) && (
            <div className="rounded-xl bg-white p-3">
              <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
                Radno vreme
              </p>
              <div className="mt-2 grid grid-cols-7 gap-1 text-xs">
                {selected.workingHours.map((h) => (
                  <div key={h.dayOfWeek} className="text-center">
                    <div className="font-bold">{DAY_LABELS[h.dayOfWeek]}</div>
                    <div className="text-muted-foreground">
                      {h.isClosed
                        ? "—"
                        : `${h.openTime}–${h.closeTime?.replace("23:59", "0:00") || ""}`}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Photos */}
          {selected.photoUrls.length > 0 && (
            <div className="rounded-xl bg-white p-3">
              <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
                Fotografije sa Google-a
              </p>
              <div className="mt-2 grid grid-cols-3 gap-2 sm:grid-cols-5">
                {selected.photoUrls.map((url, i) => (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    key={i}
                    src={url}
                    alt={`Fotografija ${i + 1}`}
                    className="aspect-square w-full rounded-lg object-cover"
                  />
                ))}
              </div>
              <p className="mt-2 text-xs text-muted-foreground">
                💡 Google fotografije čuvamo SAMO kao reference u napomeni — moraš ih
                ručno preuzeti i dodati ako želiš da budu na profilu.
              </p>
            </div>
          )}

          {/* Reviews preview */}
          {selected.reviews.length > 0 && (
            <div className="rounded-xl bg-white p-3">
              <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
                Prve Google recenzije (snimak)
              </p>
              <ul className="mt-2 space-y-2">
                {selected.reviews.slice(0, 3).map((r, i) => (
                  <li key={i} className="border-l-2 border-amber-300 pl-3 text-xs">
                    <p className="font-bold">
                      {r.authorName} <span className="font-normal text-amber-600">⭐ {r.rating}</span>
                    </p>
                    <p className="mt-0.5 text-muted-foreground">
                      {r.text.slice(0, 150)}
                      {r.text.length > 150 ? "..." : ""}
                    </p>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Apply controls */}
          <div className="space-y-3 border-t border-primary/20 pt-4">
            <div className="flex flex-wrap items-center gap-4">
              <label className="flex items-center gap-2 text-sm">
                <span className="font-bold">Tip profila:</span>
                <select
                  value={listingType}
                  onChange={(e) => setListingType(e.target.value as never)}
                  className="rounded-lg border border-border bg-white px-3 py-1.5"
                >
                  <option value="COMPANY">Kompanija (B2B fokus)</option>
                  <option value="PLACE">Mesto (restoran, salon, prodavnica...)</option>
                </select>
              </label>
              <label className="flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  checked={includeHours}
                  onChange={(e) => setIncludeHours(e.target.checked)}
                  className="h-4 w-4 accent-primary"
                />
                Uvezi radno vreme
              </label>
            </div>
            <button
              type="button"
              onClick={applyImport}
              disabled={applying}
              className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-bold text-primary-foreground transition hover:bg-primary/90 disabled:opacity-50"
            >
              {applying ? "Otvaram formu..." : "📝 Otvori za uređivanje i objavu"}
            </button>
            <p className="text-xs text-muted-foreground">
              Sistem kreira novu prijavu u <strong>/admin/prijave</strong> sa svim podacima
              iz Google-a. Tamo možeš da pregledaš, dopuniš i konvertuješ u profil firme.
            </p>
          </div>
        </section>
      )}

      {/* ─── Result ─── */}
      {result && result.kind === "ok" && (
        <section className="rounded-2xl border border-emerald-500/40 bg-emerald-500/10 p-5">
          <p className="text-sm font-bold text-emerald-700">
            ✓{" "}
            {result.alreadyImported
              ? "Već postoji aktivna prijava za ovu firmu"
              : "Uspešno uvezeno"}
            : <strong>{result.name}</strong>
          </p>
          <a
            href={`/admin/prijave/${result.submissionId}`}
            className="mt-2 inline-flex items-center gap-2 text-sm font-bold text-emerald-700 hover:underline"
          >
            Otvori prijavu → /admin/prijave/{result.submissionId.slice(0, 8)}...
          </a>
        </section>
      )}
      {result && result.kind === "err" && (
        <p className="rounded-xl border border-rose-300 bg-rose-50 p-4 text-sm text-rose-700">
          {result.text}
        </p>
      )}
    </div>
  );
}