import { useNavigate } from 'react-router-dom';
import Layout from '../components/Layout';

const TOOLS = [
  {
    key: 'creation',
    title: 'Content Erstellen',
    icon: '🎨',
    description: 'Objekte in Bildern einzeichnen, Wörter verknüpfen und Pairs mit Fragen & Aussagen erstellen.',
    path: '/content/creation',
    ready: true,
  },
  {
    key: 'words',
    title: 'Wörter generieren',
    icon: '🪄',
    description: 'Neue Vokabeln zu einem Thema per KI erstellen, prüfen und übernehmen.',
    path: '/content/words',
    ready: true,
  },
  {
    key: 'audio',
    title: 'Audio / TTS',
    icon: '🔊',
    description: 'Sehen was noch kein Audio hat und Sprachausgabe generieren.',
    path: '/audio',
    ready: true,
  },
  {
    key: 'publish',
    title: 'Veröffentlichen',
    icon: '✨',
    description: 'Fertige Pairs prüfen, freigeben und veröffentlichen.',
    path: '/content/publish',
    ready: false,
  },
];

export default function ContentHub() {
  const navigate = useNavigate();

  return (
    <Layout back="/">
      <div className="max-w-3xl mx-auto">
        <h1 className="text-2xl font-bold text-slate-800 mb-2">Content Verwaltung</h1>
        <p className="text-slate-500 mb-8">Wähle ein Tool um loszulegen.</p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          {TOOLS.map(tool => (
            <button
              key={tool.key}
              onClick={() => tool.ready && navigate(tool.path)}
              className={`text-left rounded-2xl p-6 shadow-sm border transition-all
                ${tool.ready
                  ? 'bg-white border-slate-200 hover:shadow-md hover:border-indigo-300 cursor-pointer'
                  : 'bg-slate-50 border-slate-100 opacity-50 cursor-not-allowed'
                }`}
            >
              <div className="text-3xl mb-3">{tool.icon}</div>
              <h2 className="font-semibold text-slate-800 mb-1">{tool.title}</h2>
              <p className="text-sm text-slate-500">{tool.description}</p>
              {!tool.ready && (
                <span className="inline-block mt-3 text-xs bg-slate-200 text-slate-500 rounded-full px-2 py-0.5">
                  Bald verfügbar
                </span>
              )}
            </button>
          ))}
        </div>
      </div>
    </Layout>
  );
}