import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import axios from '../services/api';

const TOOLS = [
  { icon: '🔒', path: '/tools/md5',       title: 'MD5 Hasher',           desc: 'MD5-Hash berechnen (nur zur Analyse)' },
  { icon: '#️⃣', path: '/tools/hasher',    title: 'SHA256 / bcrypt',      desc: 'Sichere Hash-Algorithmen für Strings' },
  { icon: '📦', path: '/tools/base64',    title: 'Base64',               desc: 'Text kodieren und dekodieren' },
  { icon: '🔑', path: '/tools/jwt',       title: 'JWT Decoder',          desc: 'JWT Token analysieren (ohne Signaturprüfung)' },
  { icon: '🔐', path: '/tools/password',  title: 'Passwort-Generator',   desc: 'Sichere Passwörter generieren' },
  { icon: '🕐', path: '/tools/timestamp', title: 'Timestamp Converter',  desc: 'Unix Timestamp in Datum umrechnen' },
  { icon: '📝', path: '/tools/textdiff',  title: 'Text Diff',            desc: 'Zwei Texte vergleichen' },
  { icon: '📷', path: '/tools/qrcode',   title: 'QR-Code Generator',    desc: 'Text oder URL als QR-Code generieren' },
  { icon: '📄', path: '/tools/markdown', title: 'Markdown Editor',      desc: 'Markdown live rendern und vorschauen' },
  { icon: '🎨', path: '/tools/color',    title: 'Farb-Konverter',       desc: 'HEX, RGB und HSL konvertieren' },
  { icon: '{ }', path: '/tools/json',   title: 'JSON Formatter',       desc: 'JSON formatieren und validieren' },
  { icon: '🔍', path: '/tools/regex',      title: 'Regex Tester',          desc: 'Reguläre Ausdrücke live testen' },
  { icon: '✅', path: '/tools/hashverify', title: 'Hash Verifier',         desc: 'Prüfen ob Text und Hash übereinstimmen' },
  { icon: '🔗', path: '/tools/url',        title: 'URL Encoder/Decoder',   desc: 'URLs kodieren und dekodieren' },
  { icon: '✏️', path: '/tools/string',     title: 'String Utilities',      desc: 'Text analysieren und transformieren' },
  { icon: '⏰', path: '/tools/cron',       title: 'Cron Erklärer',         desc: 'Cron-Ausdrücke auf Deutsch erklären' },
  { icon: '🌐', path: '/tools/ipcalc',     title: 'IP / Subnetz Rechner',  desc: 'CIDR Netzwerke berechnen' },
  { icon: '📃', path: '/tools/lorem',      title: 'Lorem Ipsum Generator', desc: 'Blindtext generieren' },
  { icon: '📊', path: '/tools/csv',        title: 'CSV Viewer',            desc: 'CSV-Daten als Tabelle anzeigen' },
  { icon: '🗒️', path: '/tools/notes',     title: 'Notizen & Snippets',    desc: 'Code und Texte speichern' },
];

function ToolOverview() {
  const navigate = useNavigate();
  const [websites, setWebsites] = useState([]);
  const [loadingWebsites, setLoadingWebsites] = useState(true);

  useEffect(() => {
    const load = async () => {
      try {
        const res = await axios.get('/api/websites');
        setWebsites(res.data);
      } catch {
        setWebsites([]);
      } finally {
        setLoadingWebsites(false);
      }
    };
    load();
  }, []);

  return (
    <div className="main-content">
      <h2>Tool-Übersicht</h2>
      <p>Wähle ein Tool aus:</p>

      <div className="card-grid">
        {TOOLS.map((tool) => (
          <div
            key={tool.path}
            className="link-card"
            onClick={() => navigate(tool.path)}
            style={{ cursor: 'pointer' }}
          >
            <div className="link-card__icon">{tool.icon}</div>
            <div>
              <div className="link-card__title">{tool.title}</div>
              <div className="link-card__desc">{tool.desc}</div>
            </div>
          </div>
        ))}
      </div>

      <h3 style={{ marginTop: '24px' }}>Externe Webseiten</h3>
      {loadingWebsites ? (
        <p className="muted">Lade Links...</p>
      ) : websites.length === 0 ? (
        <p className="muted">Keine Links angelegt.</p>
      ) : (
        <div className="card-grid">
          {websites.map((w) => (
            <a
              key={w.id}
              className="link-card"
              href={w.url}
              target="_blank"
              rel="noreferrer"
            >
              <div className="link-card__icon">🌐</div>
              <div>
                <div className="link-card__title">{w.name}</div>
                <div className="link-card__desc">{w.description || w.url}</div>
              </div>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

export default ToolOverview;