"use client";
import { useEffect, useState } from "react";
type Values = { authEnabled: boolean; authVkEnabled: boolean; authYandexEnabled: boolean; authTelegramEnabled: boolean; authMaxEnabled: boolean; ordersEnabled: boolean; ordersPickupEnabled: boolean; ordersDeferredEnabled: boolean; address: string; phone: string };
export function AdminSiteSettings() {
  const [values, setValues] = useState<Values>({ authEnabled: false, authVkEnabled: true, authYandexEnabled: true, authTelegramEnabled: true, authMaxEnabled: true, ordersEnabled: false, ordersPickupEnabled: true, ordersDeferredEnabled: true, address: "", phone: "" });
  const [message, setMessage] = useState("");
  useEffect(() => { fetch("/api/admin/settings").then((response) => response.ok ? response.json() : null).then((data) => data && setValues(data)); }, []);
  async function save(next: Values) {
    setValues(next);
    const csrf = document.cookie.split("; ").find((part) => part.startsWith("kiln-admin-csrf="))?.split("=")[1];
    const response = await fetch("/api/admin/settings", { method: "PATCH", headers: { "content-type": "application/json", ...(csrf ? { "x-csrf-token": decodeURIComponent(csrf) } : {}) }, body: JSON.stringify(next) });
    setMessage(response.ok ? "Настройки сохранены" : "Не удалось сохранить настройку");
  }
  return <section className="card mb-8 grid gap-5 p-5">
    <div><p className="eyebrow">Настройки сайта</p><h2 className="mt-1 text-2xl">Контакты и публичные функции</h2></div>
    <label className="grid gap-1"><span className="text-sm">Адрес ресторана</span><input className="input" value={values.address} onChange={(event) => setValues({ ...values, address: event.target.value })} onBlur={() => save(values)} /></label>
    <label className="grid gap-1"><span className="text-sm">Телефон ресторана</span><input className="input" type="tel" value={values.phone} onChange={(event) => setValues({ ...values, phone: event.target.value })} onBlur={() => save(values)} /></label>
    <label className="flex items-center justify-between gap-4"><span><strong>Авторизация</strong><br /><small className="text-kiln-milk/60">Разрешить вход через VK и Яндекс</small></span><input type="checkbox" checked={values.authEnabled} onChange={(event) => save({ ...values, authEnabled: event.target.checked })} /></label>
    <div className="ml-4 grid gap-4 border-l border-white/10 pl-4">
      <label className="flex items-center justify-between gap-4"><span><strong>VK</strong><br /><small className="text-kiln-milk/60">Показывать и разрешать вход через VK</small></span><input type="checkbox" checked={values.authVkEnabled} onChange={(event) => save({ ...values, authVkEnabled: event.target.checked })} /></label>
      <label className="flex items-center justify-between gap-4"><span><strong>Яндекс</strong><br /><small className="text-kiln-milk/60">Показывать и разрешать вход через Яндекс</small></span><input type="checkbox" checked={values.authYandexEnabled} onChange={(event) => save({ ...values, authYandexEnabled: event.target.checked })} /></label>
      <label className="flex items-center justify-between gap-4"><span><strong>Telegram</strong><br /><small className="text-kiln-milk/60">Показывать и разрешать вход через Telegram</small></span><input type="checkbox" checked={values.authTelegramEnabled} onChange={(event) => save({ ...values, authTelegramEnabled: event.target.checked })} /></label>
      <label className="flex items-center justify-between gap-4"><span><strong>MAX</strong><br /><small className="text-kiln-milk/60">Показывать и разрешать вход через MAX</small></span><input type="checkbox" checked={values.authMaxEnabled} onChange={(event) => save({ ...values, authMaxEnabled: event.target.checked })} /></label>
    </div>
    <label className="flex items-center justify-between gap-4"><span><strong>Приём заказов</strong><br /><small className="text-kiln-milk/60">Разрешить создание заказов через сайт</small></span><input type="checkbox" checked={values.ordersEnabled} onChange={(event) => save({ ...values, ordersEnabled: event.target.checked })} /></label>
    <label className="flex items-center justify-between gap-4"><span><strong>Самовывоз</strong><br /><small className="text-kiln-milk/60">Разрешить оформление самовывоза</small></span><input type="checkbox" checked={values.ordersPickupEnabled} onChange={(event) => save({ ...values, ordersPickupEnabled: event.target.checked })} /></label>
    <label className="flex items-center justify-between gap-4"><span><strong>Отложенные заказы</strong><br /><small className="text-kiln-milk/60">Разрешить заказ к дате и времени</small></span><input type="checkbox" checked={values.ordersDeferredEnabled} onChange={(event) => save({ ...values, ordersDeferredEnabled: event.target.checked })} /></label>
    {message ? <p className="text-sm text-kiln-milk/60">{message}</p> : null}
  </section>;
}