'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { api } from '@/lib/api'

interface MenuItem {
  id: string
  category_id: string
  name: string
  description: string | null
  price: number
  is_available: boolean
  is_featured: boolean
}

interface Category {
  id: string
  name: string
  sort_order: number
  is_active: boolean
  items: MenuItem[]
}

// ────────────────────────────────────────────────────────────────
// RESTAURANT MENU MANAGEMENT
// ────────────────────────────────────────────────────────────────

export default function RestaurantMenuPage() {
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(true)
  const [showAddCategory, setShowAddCategory] = useState(false)
  const [newCategoryName, setNewCategoryName] = useState('')
  const [addingCategory, setAddingCategory] = useState(false)
  const [addingToCategory, setAddingToCategory] = useState<string | null>(null)
  const [editingItem, setEditingItem] = useState<MenuItem | null>(null)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  const load = async () => {
    try {
      const { data } = await api.get('/restaurants/menu/items')
      setCategories(data)
    } catch {}
    setLoading(false)
  }

  useEffect(() => { load() }, [])

  const addCategory = async () => {
    if (!newCategoryName.trim()) return
    setAddingCategory(true)
    try {
      const { data } = await api.post('/restaurants/menu/categories', { name: newCategoryName })
      setCategories((prev) => [...prev, { ...data, items: [] }])
      setNewCategoryName('')
      setShowAddCategory(false)
    } catch {}
    setAddingCategory(false)
  }

  const toggleAvailability = async (item: MenuItem) => {
    try {
      const { data } = await api.patch(`/restaurants/menu/items/${item.id}`, {
        isAvailable: !item.is_available,
      })
      setCategories((prev) => prev.map((cat) => ({
        ...cat,
        items: cat.items.map((i) => i.id === item.id ? { ...i, is_available: data.is_available } : i),
      })))
    } catch {}
  }

  const saveItem = async (catId: string, form: NewItemForm) => {
    setSaving(true)
    setError('')
    try {
      const { data } = await api.post('/restaurants/menu/items', {
        categoryId: catId,
        name: form.name,
        description: form.description || undefined,
        price: parseFloat(form.price),
        dietaryTags: form.dietaryTags.length > 0 ? form.dietaryTags : undefined,
      })
      setCategories((prev) => prev.map((cat) =>
        cat.id === catId ? { ...cat, items: [...cat.items, data] } : cat
      ))
      setAddingToCategory(null)
    } catch (err: any) {
      setError(err.response?.data?.message || 'Failed to add item')
    }
    setSaving(false)
  }

  const saveEdit = async (form: EditItemForm) => {
    if (!editingItem) return
    setSaving(true)
    setError('')
    try {
      const { data } = await api.patch(`/restaurants/menu/items/${editingItem.id}`, {
        name: form.name,
        description: form.description || null,
        price: parseFloat(form.price),
      })
      setCategories((prev) => prev.map((cat) => ({
        ...cat,
        items: cat.items.map((i) => i.id === editingItem.id ? { ...i, ...data } : i),
      })))
      setEditingItem(null)
    } catch (err: any) {
      setError(err.response?.data?.message || 'Failed to update item')
    }
    setSaving(false)
  }

  const deleteItem = async (item: MenuItem) => {
    if (!confirm(`Delete "${item.name}"?`)) return
    try {
      await api.delete(`/restaurants/menu/items/${item.id}`)
      setCategories((prev) => prev.map((cat) => ({
        ...cat,
        items: cat.items.filter((i) => i.id !== item.id),
      })))
    } catch {}
  }

  const totalItems = categories.reduce((sum, c) => sum + c.items.length, 0)
  const liveItems = categories.reduce((sum, c) => sum + c.items.filter((i) => i.is_available).length, 0)

  return (
    <div className="min-h-screen bg-slate-50">
      {/* Header */}
      <div className="bg-white border-b border-slate-100 px-6 py-4 sticky top-0 z-10">
        <div className="max-w-3xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Link href="/restaurant/dashboard" className="text-slate-400 hover:text-vibe-teal text-sm">← Dashboard</Link>
            <span className="text-slate-300">|</span>
            <h1 className="font-bold text-vibe-dark">Menu</h1>
            <span className="text-slate-400 text-sm">{liveItems}/{totalItems} items live</span>
          </div>
          <button
            onClick={() => setShowAddCategory(true)}
            className="bg-vibe-teal text-white px-4 py-2 rounded-xl text-sm font-semibold hover:bg-teal-700 transition"
          >
            + Add Category
          </button>
        </div>
      </div>

      <div className="max-w-3xl mx-auto px-4 py-6 space-y-6">

        {/* Add category inline */}
        {showAddCategory && (
          <div className="bg-white rounded-2xl border-2 border-vibe-teal/40 p-4">
            <h3 className="font-semibold text-vibe-dark mb-3">New Category</h3>
            <div className="flex gap-3">
              <input
                autoFocus
                type="text"
                value={newCategoryName}
                onChange={(e) => setNewCategoryName(e.target.value)}
                onKeyDown={(e) => { if (e.key === 'Enter') addCategory(); if (e.key === 'Escape') setShowAddCategory(false) }}
                placeholder="e.g. Burgers, Starters, Drinks..."
                className="flex-1 border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
              />
              <button
                onClick={addCategory}
                disabled={addingCategory || !newCategoryName.trim()}
                className="bg-vibe-teal text-white px-5 py-2.5 rounded-xl font-semibold text-sm hover:bg-teal-700 transition disabled:opacity-50"
              >
                {addingCategory ? 'Adding...' : 'Add'}
              </button>
              <button onClick={() => setShowAddCategory(false)} className="text-slate-400 px-3 hover:text-slate-600">✕</button>
            </div>
          </div>
        )}

        {loading ? (
          <div className="space-y-4">
            {[1, 2, 3].map((i) => <div key={i} className="bg-white rounded-2xl h-40 animate-pulse" />)}
          </div>
        ) : categories.length === 0 ? (
          <div className="text-center py-20">
            <div className="text-5xl mb-4">🍽️</div>
            <h3 className="font-bold text-vibe-dark text-lg mb-2">No menu yet</h3>
            <p className="text-slate-500 text-sm mb-6">Add a category to get started — e.g. "Burgers", "Drinks"</p>
            <button
              onClick={() => setShowAddCategory(true)}
              className="bg-vibe-teal text-white px-6 py-3 rounded-xl font-semibold hover:bg-teal-700 transition"
            >
              + Add First Category
            </button>
          </div>
        ) : (
          categories.map((cat) => (
            <CategorySection
              key={cat.id}
              category={cat}
              addingItem={addingToCategory === cat.id}
              saving={saving}
              error={error}
              editingItem={editingItem}
              onStartAdd={() => { setAddingToCategory(cat.id); setError('') }}
              onCancelAdd={() => setAddingToCategory(null)}
              onSaveItem={(form) => saveItem(cat.id, form)}
              onToggle={toggleAvailability}
              onEdit={(item) => { setEditingItem(item); setError('') }}
              onCancelEdit={() => setEditingItem(null)}
              onSaveEdit={saveEdit}
              onDelete={deleteItem}
            />
          ))
        )}
      </div>

      {/* Edit modal */}
      {editingItem && (
        <EditItemModal
          item={editingItem}
          saving={saving}
          error={error}
          onSave={saveEdit}
          onClose={() => setEditingItem(null)}
        />
      )}
    </div>
  )
}

// ────────────────────────────────────────────────────────────────

interface NewItemForm { name: string; description: string; price: string; dietaryTags: string[] }
interface EditItemForm { name: string; description: string; price: string }

const DIETARY_OPTIONS = ['Vegan', 'Vegetarian', 'Gluten-Free', 'Dairy-Free', 'Nut-Free', 'Halal', 'Spicy']

function CategorySection({ category, addingItem, saving, error, editingItem, onStartAdd, onCancelAdd, onSaveItem, onToggle, onEdit, onCancelEdit, onSaveEdit, onDelete }: {
  category: Category
  addingItem: boolean
  saving: boolean
  error: string
  editingItem: MenuItem | null
  onStartAdd: () => void
  onCancelAdd: () => void
  onSaveItem: (form: NewItemForm) => void
  onToggle: (item: MenuItem) => void
  onEdit: (item: MenuItem) => void
  onCancelEdit: () => void
  onSaveEdit: (form: EditItemForm) => void
  onDelete: (item: MenuItem) => void
}) {
  const [form, setForm] = useState<NewItemForm>({ name: '', description: '', price: '', dietaryTags: [] })

  const liveCount = category.items.filter((i) => i.is_available).length

  return (
    <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden">
      {/* Category header */}
      <div className="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
        <div>
          <h2 className="font-bold text-vibe-dark">{category.name}</h2>
          <p className="text-xs text-slate-400 mt-0.5">
            {category.items.length} items · {liveCount} live
          </p>
        </div>
        <button
          onClick={onStartAdd}
          className="text-vibe-teal text-sm font-semibold hover:underline"
        >
          + Add Item
        </button>
      </div>

      {/* Add item form */}
      {addingItem && (
        <div className="border-b border-slate-100 bg-slate-50 px-5 py-4">
          <h3 className="text-sm font-semibold text-slate-600 mb-3">New Item in {category.name}</h3>
          <div className="space-y-3">
            <div className="grid grid-cols-3 gap-3">
              <div className="col-span-2">
                <input
                  autoFocus
                  type="text"
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  placeholder="Item name *"
                  className="w-full border border-slate-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
                />
              </div>
              <div>
                <div className="relative">
                  <span className="absolute left-3 top-2.5 text-slate-400 text-sm">$</span>
                  <input
                    type="number"
                    min="0"
                    step="0.01"
                    value={form.price}
                    onChange={(e) => setForm({ ...form, price: e.target.value })}
                    placeholder="0.00"
                    className="w-full border border-slate-200 rounded-xl pl-7 pr-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
                  />
                </div>
              </div>
            </div>
            <textarea
              value={form.description}
              onChange={(e) => setForm({ ...form, description: e.target.value })}
              placeholder="Description (optional) — ingredients, allergens, portion size..."
              rows={2}
              className="w-full border border-slate-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal resize-none"
            />
            <div>
              <p className="text-xs text-slate-500 mb-2">Dietary tags (optional)</p>
              <div className="flex flex-wrap gap-2">
                {DIETARY_OPTIONS.map((tag) => (
                  <button
                    key={tag}
                    type="button"
                    onClick={() => setForm((f) => ({
                      ...f,
                      dietaryTags: f.dietaryTags.includes(tag)
                        ? f.dietaryTags.filter((t) => t !== tag)
                        : [...f.dietaryTags, tag],
                    }))}
                    className={`text-xs px-3 py-1 rounded-full border transition ${
                      form.dietaryTags.includes(tag)
                        ? 'bg-vibe-teal text-white border-vibe-teal'
                        : 'bg-white text-slate-500 border-slate-200 hover:border-vibe-teal'
                    }`}
                  >
                    {tag}
                  </button>
                ))}
              </div>
            </div>
            {error && <p className="text-red-600 text-sm bg-red-50 rounded-xl px-3 py-2">{error}</p>}
            <div className="flex gap-3">
              <button
                onClick={() => { onSaveItem(form); setForm({ name: '', description: '', price: '', dietaryTags: [] }) }}
                disabled={saving || !form.name.trim() || !form.price}
                className="bg-vibe-teal text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:bg-teal-700 transition disabled:opacity-50"
              >
                {saving ? 'Adding...' : 'Add to Menu'}
              </button>
              <button onClick={onCancelAdd} className="text-slate-500 text-sm hover:text-slate-700 px-3">Cancel</button>
            </div>
          </div>
        </div>
      )}

      {/* Items list */}
      {category.items.length === 0 && !addingItem ? (
        <div className="px-5 py-6 text-center">
          <p className="text-slate-400 text-sm">No items yet.</p>
          <button onClick={onStartAdd} className="text-vibe-teal text-sm hover:underline mt-1">+ Add the first item</button>
        </div>
      ) : (
        <div className="divide-y divide-slate-50">
          {category.items.map((item) => (
            <div key={item.id} className={`px-5 py-3.5 flex items-center justify-between gap-4 ${!item.is_available ? 'opacity-60' : ''}`}>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-vibe-dark text-sm">{item.name}</span>
                  {item.is_featured && <span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full">Featured</span>}
                  {!item.is_available && <span className="text-xs bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded-full">Hidden</span>}
                </div>
                {item.description && (
                  <p className="text-xs text-slate-400 mt-0.5 truncate">{item.description}</p>
                )}
              </div>

              <div className="flex items-center gap-3 flex-shrink-0">
                <span className="font-bold text-vibe-dark text-sm">${Number(item.price).toFixed(2)}</span>

                {/* Live/hidden toggle */}
                <button
                  onClick={() => onToggle(item)}
                  title={item.is_available ? 'Click to hide from customers' : 'Click to make live'}
                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
                    item.is_available ? 'bg-vibe-teal' : 'bg-slate-200'
                  }`}
                >
                  <span className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform ${
                    item.is_available ? 'translate-x-4.5' : 'translate-x-0.5'
                  }`} />
                </button>

                <button
                  onClick={() => onEdit(item)}
                  className="text-slate-400 hover:text-vibe-teal text-xs px-2 py-1 rounded-lg hover:bg-slate-50 transition"
                >
                  Edit
                </button>
                <button
                  onClick={() => onDelete(item)}
                  className="text-slate-300 hover:text-red-500 text-xs px-2 py-1 rounded-lg hover:bg-red-50 transition"
                >
                  ✕
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

function EditItemModal({ item, saving, error, onSave, onClose }: {
  item: MenuItem
  saving: boolean
  error: string
  onSave: (form: EditItemForm) => void
  onClose: () => void
}) {
  const [form, setForm] = useState<EditItemForm>({
    name: item.name,
    description: item.description || '',
    price: String(Number(item.price).toFixed(2)),
  })

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 px-4">
      <div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-xl">
        <h2 className="font-bold text-vibe-dark text-lg mb-4">Edit Item</h2>

        <div className="space-y-3">
          <div>
            <label className="block text-xs text-slate-500 mb-1">Name *</label>
            <input
              autoFocus
              type="text"
              value={form.name}
              onChange={(e) => setForm({ ...form, name: e.target.value })}
              className="w-full border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
            />
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">Description</label>
            <textarea
              value={form.description}
              onChange={(e) => setForm({ ...form, description: e.target.value })}
              rows={3}
              className="w-full border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal resize-none"
            />
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">Price *</label>
            <div className="relative">
              <span className="absolute left-4 top-2.5 text-slate-400 text-sm">$</span>
              <input
                type="number"
                min="0"
                step="0.01"
                value={form.price}
                onChange={(e) => setForm({ ...form, price: e.target.value })}
                className="w-full border border-slate-200 rounded-xl pl-8 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
              />
            </div>
          </div>
          {error && <p className="text-red-600 text-sm bg-red-50 rounded-xl px-3 py-2">{error}</p>}
        </div>

        <div className="flex gap-3 mt-6">
          <button
            onClick={() => onSave(form)}
            disabled={saving || !form.name.trim() || !form.price}
            className="flex-1 bg-vibe-teal text-white py-3 rounded-xl font-semibold text-sm hover:bg-teal-700 transition disabled:opacity-50"
          >
            {saving ? 'Saving...' : 'Save Changes'}
          </button>
          <button onClick={onClose} className="px-5 py-3 text-slate-500 text-sm hover:text-slate-700">
            Cancel
          </button>
        </div>
      </div>
    </div>
  )
}