"use client";
/* eslint-disable @next/next/no-img-element */

import { ChangeEvent, useRef, useState } from "react";
import { Pencil, X } from "lucide-react";
import type { Dish } from "@/lib/types";

export function AdminDishEditor({ dish }: { dish: Dish }) {
  const [open, setOpen] = useState(false);
  const [draft, setDraft] = useState({ name: dish.name, description: dish.fullDescription, shortDescription: dish.shortDescription, weightText: dish.weight, priceRubles: String(dish.price), imageUrl: dish.image, isAvailable: !dish.temporarilyUnavailable, showOnWebsite: true, showDetails: dish.showDetails !== false, publishToYandex: true, allowOnlineOrder: dish.deliveryAvailable, allowDelivery: dish.deliveryAvailable, isAlcohol: Boolean(dish.alcohol) });
  const [uploading, setUploading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
  const change = (field: string, value: string | boolean) => setDraft((current) => ({ ...current, [field]: value }));

  async function upload(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0]; event.target.value = ""; if (!file) return;
    setUploading(true); setMessage("");
    try { const form = new FormData(); form.append("file", file); form.append("slug", dish.slug); form.append("name", draft.name); const csrf = document.cookie.split("; ").find((part) => part.startsWith("kiln-admin-csrf="))?.split("=")[1]; const response = await fetch("/api/admin/menu/image", { method: "POST", headers: csrf ? { "x-csrf-token": decodeURIComponent(csrf) } : {}, body: form }); const result = await response.json(); if (!response.ok) throw new Error(result.error || "Не удалось загрузить фото"); change("imageUrl", result.url); } catch (error) { setMessage(error instanceof Error ? error.message : "Ошибка загрузки фото"); } finally { setUploading(false); }
  }

  async function save(event: React.FormEvent) {
    event.preventDefault(); setSaving(true); setMessage("");
    try { const csrf = document.cookie.split("; ").find((part) => part.startsWith("kiln-admin-csrf="))?.split("=")[1]; const response = await fetch("/api/admin/menu", { method: "PATCH", headers: { "content-type": "application/json", ...(csrf ? { "x-csrf-token": decodeURIComponent(csrf) } : {}) }, body: JSON.stringify({ type: "item", id: Number(dish.id), slug: dish.slug, ...draft }) }); const result = await response.json(); if (!response.ok) throw new Error(result.error || "Ошибка сохранения"); location.reload(); } catch (error) { setMessage(error instanceof Error ? error.message : "Ошибка сохранения"); setSaving(false); }
  }

  return <><button type="button" className="button button-secondary inline-flex items-center gap-2" onClick={() => setOpen(true)}><Pencil size={15} aria-hidden="true" />Редактировать</button>{open ? <div className="dish-modal" role="presentation" onMouseDown={(event) => event.target === event.currentTarget && !saving && setOpen(false)}><section className="dish-modal-panel !block max-w-2xl" role="dialog" aria-modal="true" aria-labelledby={`edit-${dish.id}`}><div className="dish-modal-content max-h-[92dvh]"><div className="mb-5 flex items-start justify-between gap-4"><div><p className="eyebrow">Позиция меню</p><h2 id={`edit-${dish.id}`} className="mt-1 text-2xl">Редактировать блюдо</h2></div><button type="button" className="icon-button" onClick={() => setOpen(false)} aria-label="Закрыть"><X size={18} /></button></div><form className="grid gap-3" onSubmit={save}><input className="input" required placeholder="Название" value={draft.name} onChange={(event) => change("name", event.target.value)} /><textarea className="input min-h-28" placeholder="Полное описание" value={draft.description} onChange={(event) => change("description", event.target.value)} /><input className="input" placeholder="Короткое описание" value={draft.shortDescription} onChange={(event) => change("shortDescription", event.target.value)} /><div className="grid gap-3 sm:grid-cols-2"><input className="input" placeholder="Вес/объём" value={draft.weightText} onChange={(event) => change("weightText", event.target.value)} /><input className="input" required min="0" step="0.01" type="number" placeholder="Цена, ₽" value={draft.priceRubles} onChange={(event) => change("priceRubles", event.target.value)} /></div><div className="grid gap-2 rounded border border-white/10 p-3"><label className="flex gap-2"><input type="checkbox" checked={draft.isAvailable} onChange={(event) => change("isAvailable", event.target.checked)} /> В наличии</label><label className="flex gap-2"><input type="checkbox" checked={draft.showOnWebsite} onChange={(event) => change("showOnWebsite", event.target.checked)} /> Показывать на сайте</label><label className="flex gap-2"><input type="checkbox" checked={draft.showDetails} onChange={(event) => change("showDetails", event.target.checked)} /> Показывать кнопку «Подробнее»</label><label className="flex gap-2"><input type="checkbox" checked={draft.publishToYandex} onChange={(event) => change("publishToYandex", event.target.checked)} /> Публиковать в Яндекс</label><label className="flex gap-2"><input type="checkbox" checked={draft.allowOnlineOrder} onChange={(event) => change("allowOnlineOrder", event.target.checked)} /> Разрешить онлайн-заказ</label><label className="flex gap-2"><input type="checkbox" checked={draft.allowDelivery} onChange={(event) => change("allowDelivery", event.target.checked)} /> Разрешить доставку</label><label className="flex gap-2"><input type="checkbox" checked={draft.isAlcohol} onChange={(event) => change("isAlcohol", event.target.checked)} /> Алкоголь</label></div><div className="rounded border border-white/10 p-3"><div className="flex flex-wrap items-center gap-3">{draft.imageUrl ? <img src={draft.imageUrl} alt="" className="h-20 w-20 rounded object-cover" /> : <div className="flex h-20 w-20 items-center justify-center rounded bg-white/5 text-xs">Нет фото</div>}<div className="flex gap-2"><input ref={inputRef} className="sr-only" type="file" accept="image/jpeg,image/png,image/webp,image/avif" onChange={upload} /><button type="button" className="button button-secondary" disabled={uploading} onClick={() => inputRef.current?.click()}>{uploading ? "Загрузка…" : "Заменить фото"}</button><button type="button" className="button button-secondary" disabled={uploading || !draft.imageUrl} onClick={() => change("imageUrl", "")}>Удалить</button></div></div><p className="mt-2 text-xs text-kiln-milk/50">Фото сохранится вместе с изменениями.</p></div>{message ? <p className="text-kiln-flame">{message}</p> : null}<div className="mt-2 flex justify-end gap-3"><button type="button" className="button button-secondary" onClick={() => setOpen(false)} disabled={saving}>Отмена</button><button type="submit" className="button button-primary" disabled={saving || uploading}>{saving ? "Сохранение…" : "Сохранить изменения"}</button></div></form></div></section></div> : null}</>;
}