"use client"

import { useState, useEffect, Suspense } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { motion, AnimatePresence } from "framer-motion"
import { Restaurant } from "@/app/types"

function priceLabel(range: number) {
  return "€".repeat(range)
}

function AdminContent() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const preselectedId = searchParams.get("restaurant")

  const [restaurants, setRestaurants] = useState<Restaurant[]>([])
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState<"add-restaurant" | "add-visit" | "manage">(
    preselectedId ? "add-visit" : "add-restaurant"
  )
  const [feedback, setFeedback] = useState<string | null>(null)

  // Add restaurant form
  const [rForm, setRForm] = useState({
    name: "",
    city: "",
    country: "",
    address: "",
    lat: "",
    lng: "",
    cuisine: "",
    price_range: "2",
  })

  // Add visit form
  const [vForm, setVForm] = useState({
    restaurantId: preselectedId || "",
    date: new Date().toISOString().slice(0, 10),
    dishes: "",
    rating: "8",
    notes: "",
    price_paid: "",
  })

  useEffect(() => {
    fetch("/api/restaurants")
      .then((r) => r.json())
      .then((data) => {
        setRestaurants(data)
        setLoading(false)
      })
      .catch(() => setLoading(false))
  }, [])

  function showFeedback(msg: string) {
    setFeedback(msg)
    setTimeout(() => setFeedback(null), 3000)
  }

  async function handleAddRestaurant(e: React.FormEvent) {
    e.preventDefault()
    const body = {
      name: rForm.name,
      city: rForm.city,
      country: rForm.country,
      address: rForm.address,
      lat: parseFloat(rForm.lat),
      lng: parseFloat(rForm.lng),
      cuisine: rForm.cuisine.split(",").map((c) => c.trim()).filter(Boolean),
      price_range: parseInt(rForm.price_range) as 1 | 2 | 3 | 4,
    }
    const res = await fetch("/api/restaurants", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    })
    if (res.ok) {
      const newR = await res.json()
      setRestaurants((prev) => [...prev, newR])
      setRForm({ name: "", city: "", country: "", address: "", lat: "", lng: "", cuisine: "", price_range: "2" })
      showFeedback("Restaurant added!")
    } else {
      showFeedback("Error adding restaurant")
    }
  }

  async function handleAddVisit(e: React.FormEvent) {
    e.preventDefault()
    if (!vForm.restaurantId) return

    const body = {
      date: new Date(vForm.date).toISOString(),
      dishes: vForm.dishes.split("\n").map((d) => d.trim()).filter(Boolean),
      rating: parseInt(vForm.rating),
      notes: vForm.notes,
      ...(vForm.price_paid ? { price_paid: parseFloat(vForm.price_paid) } : {}),
    }
    const res = await fetch(`/api/restaurants/${vForm.restaurantId}/visits`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    })
    if (res.ok) {
      setVForm((prev) => ({ ...prev, dishes: "", notes: "", price_paid: "" }))
      showFeedback("Visit added!")
      // Refresh
      fetch("/api/restaurants")
        .then((r) => r.json())
        .then(setRestaurants)
    } else {
      showFeedback("Error adding visit")
    }
  }

  async function handleDeleteVisit(restaurantId: string, visitId: string) {
    if (!confirm("Delete this visit?")) return
    const res = await fetch(`/api/restaurants/${restaurantId}/visits/${visitId}`, {
      method: "DELETE",
    })
    if (res.ok) {
      setRestaurants((prev) =>
        prev.map((r) =>
          r.id === restaurantId
            ? { ...r, visits: r.visits.filter((v) => v.id !== visitId) }
            : r
        )
      )
      showFeedback("Visit deleted")
    }
  }

  async function handleDeleteRestaurant(restaurantId: string) {
    if (!confirm("Delete this restaurant and all its visits?")) return
    const res = await fetch(`/api/restaurants/${restaurantId}`, { method: "DELETE" })
    if (res.ok) {
      setRestaurants((prev) => prev.filter((r) => r.id !== restaurantId))
      showFeedback("Restaurant deleted")
    }
  }

  const inputClass =
    "w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-sm text-[#f5f5f5] placeholder-white/25 outline-none focus:border-[#f59e0b]/40 focus:bg-white/[0.06] transition-all"
  const labelClass = "block text-xs font-semibold uppercase tracking-wider text-white/40 mb-1.5"

  const tabs = [
    { id: "add-restaurant", label: "New Place" },
    { id: "add-visit", label: "Add Visit" },
    { id: "manage", label: "Manage" },
  ] as const

  return (
    <div className="max-w-2xl mx-auto px-5 md:px-8 py-8 md:py-12">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
        className="mb-8"
      >
        <h1 className="text-4xl font-black tracking-tight">admin</h1>
        <p className="text-white/30 text-sm mt-1">manage your food journal</p>
      </motion.div>

      {/* Feedback toast */}
      <AnimatePresence>
        {feedback && (
          <motion.div
            initial={{ opacity: 0, y: -16 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -16 }}
            className="fixed top-20 left-1/2 -translate-x-1/2 z-50 bg-[#f59e0b] text-black font-semibold text-sm px-5 py-2.5 rounded-xl shadow-xl"
          >
            {feedback}
          </motion.div>
        )}
      </AnimatePresence>

      {/* Tabs */}
      <div className="flex gap-1 bg-white/[0.04] rounded-xl p-1 mb-8">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-all ${
              activeTab === tab.id
                ? "bg-[#f59e0b] text-black"
                : "text-white/40 hover:text-white/70"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Add Restaurant */}
      {activeTab === "add-restaurant" && (
        <motion.form
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          onSubmit={handleAddRestaurant}
          className="space-y-5"
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
              <label className={labelClass}>Name</label>
              <input
                className={inputClass}
                placeholder="Restaurant name"
                value={rForm.name}
                onChange={(e) => setRForm({ ...rForm, name: e.target.value })}
                required
              />
            </div>
            <div>
              <label className={labelClass}>City</label>
              <input
                className={inputClass}
                placeholder="City"
                value={rForm.city}
                onChange={(e) => setRForm({ ...rForm, city: e.target.value })}
                required
              />
            </div>
            <div>
              <label className={labelClass}>Country</label>
              <input
                className={inputClass}
                placeholder="Country"
                value={rForm.country}
                onChange={(e) => setRForm({ ...rForm, country: e.target.value })}
                required
              />
            </div>
            <div>
              <label className={labelClass}>Price Range</label>
              <select
                className={inputClass}
                value={rForm.price_range}
                onChange={(e) => setRForm({ ...rForm, price_range: e.target.value })}
              >
                <option value="1">€ Budget</option>
                <option value="2">€€ Mid</option>
                <option value="3">€€€ Upscale</option>
                <option value="4">€€€€ Fine Dining</option>
              </select>
            </div>
          </div>

          <div>
            <label className={labelClass}>Address</label>
            <input
              className={inputClass}
              placeholder="Full address"
              value={rForm.address}
              onChange={(e) => setRForm({ ...rForm, address: e.target.value })}
              required
            />
          </div>

          <div className="grid grid-cols-2 gap-5">
            <div>
              <label className={labelClass}>Latitude</label>
              <input
                className={inputClass}
                placeholder="48.8566"
                type="number"
                step="any"
                value={rForm.lat}
                onChange={(e) => setRForm({ ...rForm, lat: e.target.value })}
                required
              />
            </div>
            <div>
              <label className={labelClass}>Longitude</label>
              <input
                className={inputClass}
                placeholder="2.3522"
                type="number"
                step="any"
                value={rForm.lng}
                onChange={(e) => setRForm({ ...rForm, lng: e.target.value })}
                required
              />
            </div>
          </div>

          <div>
            <label className={labelClass}>Cuisine (comma-separated)</label>
            <input
              className={inputClass}
              placeholder="Italian, Pizza, Wine Bar"
              value={rForm.cuisine}
              onChange={(e) => setRForm({ ...rForm, cuisine: e.target.value })}
              required
            />
          </div>

          <button
            type="submit"
            className="w-full bg-[#f59e0b] text-black font-bold py-3.5 rounded-xl hover:bg-[#d97706] transition-colors"
          >
            Add Restaurant
          </button>
        </motion.form>
      )}

      {/* Add Visit */}
      {activeTab === "add-visit" && (
        <motion.form
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          onSubmit={handleAddVisit}
          className="space-y-5"
        >
          <div>
            <label className={labelClass}>Restaurant</label>
            <select
              className={inputClass}
              value={vForm.restaurantId}
              onChange={(e) => setVForm({ ...vForm, restaurantId: e.target.value })}
              required
            >
              <option value="">Select a restaurant...</option>
              {restaurants.map((r) => (
                <option key={r.id} value={r.id}>
                  {r.name} — {r.city}
                </option>
              ))}
            </select>
          </div>

          <div className="grid grid-cols-2 gap-5">
            <div>
              <label className={labelClass}>Date</label>
              <input
                className={inputClass}
                type="date"
                value={vForm.date}
                onChange={(e) => setVForm({ ...vForm, date: e.target.value })}
                required
              />
            </div>
            <div>
              <label className={labelClass}>Rating (1–10)</label>
              <input
                className={inputClass}
                type="number"
                min="1"
                max="10"
                value={vForm.rating}
                onChange={(e) => setVForm({ ...vForm, rating: e.target.value })}
                required
              />
            </div>
          </div>

          <div>
            <label className={labelClass}>Dishes (one per line)</label>
            <textarea
              className={`${inputClass} resize-none h-24`}
              placeholder={"Duck confit\nTruffle pasta\nCrème brûlée"}
              value={vForm.dishes}
              onChange={(e) => setVForm({ ...vForm, dishes: e.target.value })}
              required
            />
          </div>

          <div>
            <label className={labelClass}>Notes</label>
            <textarea
              className={`${inputClass} resize-none h-24`}
              placeholder="How was it? What stood out?"
              value={vForm.notes}
              onChange={(e) => setVForm({ ...vForm, notes: e.target.value })}
            />
          </div>

          <div>
            <label className={labelClass}>Price paid (€, optional)</label>
            <input
              className={inputClass}
              type="number"
              step="0.01"
              placeholder="85"
              value={vForm.price_paid}
              onChange={(e) => setVForm({ ...vForm, price_paid: e.target.value })}
            />
          </div>

          <button
            type="submit"
            className="w-full bg-[#f59e0b] text-black font-bold py-3.5 rounded-xl hover:bg-[#d97706] transition-colors"
          >
            Add Visit
          </button>
        </motion.form>
      )}

      {/* Manage */}
      {activeTab === "manage" && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="space-y-4"
        >
          {loading ? (
            <div className="flex justify-center py-12">
              <motion.div
                animate={{ rotate: 360 }}
                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                className="w-6 h-6 border-2 border-[#f59e0b] border-t-transparent rounded-full"
              />
            </div>
          ) : (
            restaurants.map((r) => (
              <div
                key={r.id}
                className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5"
              >
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <h3 className="font-bold text-[#f5f5f5]">{r.name}</h3>
                    <p className="text-sm text-white/40">
                      {r.city}, {r.country} · {priceLabel(r.price_range)}
                    </p>
                  </div>
                  <button
                    onClick={() => handleDeleteRestaurant(r.id)}
                    className="text-xs text-red-400/60 hover:text-red-400 transition-colors shrink-0"
                  >
                    Delete
                  </button>
                </div>

                {r.visits.length > 0 && (
                  <div className="mt-4 space-y-2">
                    <p className="text-xs text-white/30 uppercase tracking-wider font-semibold">
                      Visits
                    </p>
                    {r.visits.map((v) => (
                      <div
                        key={v.id}
                        className="flex items-center justify-between gap-4 py-2 border-t border-white/[0.04]"
                      >
                        <div>
                          <span className="text-xs text-white/50">
                            {new Date(v.date).toLocaleDateString("en-GB", {
                              day: "numeric",
                              month: "short",
                              year: "numeric",
                            })}
                          </span>
                          <span className="text-[#f59e0b] text-xs font-bold ml-3">
                            {v.rating}/10
                          </span>
                        </div>
                        <button
                          onClick={() => handleDeleteVisit(r.id, v.id)}
                          className="text-[10px] text-red-400/50 hover:text-red-400 transition-colors"
                        >
                          Remove
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))
          )}
        </motion.div>
      )}
    </div>
  )
}

export default function AdminPage() {
  return (
    <Suspense>
      <AdminContent />
    </Suspense>
  )
}