import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { __ } from '@/lib/i18n';

export default function TabPage() {
  const { tab } = useParams();
  const [schema, setSchema] = useState<any>(null);

  useEffect(() => {
    if (!tab) return;
    fetch(`${(window as any).WNW_API}/settings/${tab}`, { credentials: 'include' })
      .then(r => r.json()).then(setSchema);
  }, [tab]);

  if (!schema) return <div className="p-6">{__('Loading…')}</div>;
  return (
    <div className="p-6">
      <h2 className="text-lg font-semibold mb-3">{schema.tab}</h2>
      {schema.fields?.map((f:any, i:number) => (
        <div key={i} className="mb-3">
          <div className="text-sm font-medium">{f.label}</div>
          <div className="text-xs opacity-70">{f.desc}</div>
          <div className="mt-1">
            {/* super simple fallback render just to verify schema */}
            <input
              defaultValue={f.value}
              placeholder={f.default || ''}
              className="border rounded px-2 py-1 w-96"
            />
          </div>
        </div>
      ))}
    </div>
  );
}