'use client';

import React, { useEffect, useState } from 'react';
import { apiRequest } from '../../../lib/api';
import { Button } from '../../../components/Button';

export default function AdminCmsPage() {
  const [rules, setRules] = useState({ title: 'MY11s Rules', body: '' });
  const [terms, setTerms] = useState({ title: 'Terms of Service', body: '' });
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState('');

  useEffect(() => {
    (async () => {
      try {
        const res = await apiRequest('/settings?category=GENERAL');
        const list = res.data || [];
        const r = list.find((s: any) => s.key === 'RULES_CONTENT');
        const t = list.find((s: any) => s.key === 'TERMS_CONTENT');
        if (r?.value) setRules(r.value);
        if (t?.value) setTerms(t.value);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  const save = async (key: string, value: { title: string; body: string }) => {
    setBusy(true);
    setMsg('');
    try {
      await apiRequest('/settings', {
        method: 'POST',
        body: JSON.stringify({
          key,
          category: 'GENERAL',
          description: key,
          value,
        }),
      });
      setMsg(`${key} saved`);
    } catch (e: any) {
      setMsg(e.message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold text-white">CMS</h1>
        <p className="text-xs text-zinc-400">Edit public Rules and Terms content</p>
      </div>
      {msg && <p className="text-xs text-emerald-400">{msg}</p>}
      {[
        { key: 'RULES_CONTENT', label: 'Rules', state: rules, set: setRules },
        { key: 'TERMS_CONTENT', label: 'Terms', state: terms, set: setTerms },
      ].map((block) => (
        <section key={block.key} className="space-y-3 rounded-2xl border border-zinc-800 p-4">
          <h2 className="text-sm font-semibold text-zinc-200">{block.label}</h2>
          <input
            value={block.state.title}
            onChange={(e) => block.set({ ...block.state, title: e.target.value })}
            className="w-full rounded-xl border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm"
          />
          <textarea
            rows={6}
            value={block.state.body}
            onChange={(e) => block.set({ ...block.state, body: e.target.value })}
            className="w-full rounded-xl border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm"
          />
          <Button loading={busy} onClick={() => save(block.key, block.state)}>
            Save {block.label}
          </Button>
        </section>
      ))}
    </div>
  );
}