import React, { useEffect, useState } from 'react';

export default function SettingsPage() {
  const [items, setItems] = useState<Array<{ key: string; value: any }>>([]);
  useEffect(() => {
    fetch('/api/admin/settings')
      .then(r => r.json())
      .then(j => setItems(j));
  }, []);

  async function save(key: string, value: any) {
    await fetch(`/api/admin/settings/${encodeURIComponent(key)}`, {
      method: 'PUT',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ value }),
    });
    setItems(s => s.map(i => (i.key === key ? { ...i, value } : i)));
  }

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Settings</h1>
      <ul>
        {items.map(it => (
          <li key={it.key} className="mb-3">
            <div className="flex items-center gap-4">
              <div className="font-medium">{it.key}</div>
              <textarea
                className="border p-2 w-2/3"
                defaultValue={JSON.stringify(it.value, null, 2)}
                onBlur={e => {
                  try {
                    const v = JSON.parse(e.currentTarget.value);
                    save(it.key, v);
                  } catch (err) {
                    alert('Invalid JSON');
                  }
                }}
              />
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}