import React, { useState } from 'react';
import { useConfigContext } from '../../contexts/ConfigContext';
import './RulesDisplay.css';

const TABS = [
  { key: 'ueber-uns',      label: 'Nachsuchenstation Heidekreis' },
  { key: 'anwendung',      label: 'Anwendung der App' },
  { key: 'regeln',         label: 'Verhaltensregeln' },
  { key: 'ansprechpartner', label: 'Ansprechpartner' }
];

const RulesDisplay = () => {
  const { rules, sections, loading } = useConfigContext();
  const [activeTab, setActiveTab] = useState('ueber-uns');

  if (loading) {
    return <div className="loading">Lädt...</div>;
  }

  const getSection = (key) => {
    const s = sections.find(s => s.key === key);
    return s ? s.content : '';
  };

  return (
    <div className="allgemeines-container">
      <div className="allgemeines-tabs">
        {TABS.map(tab => (
          <button
            key={tab.key}
            className={`allgemeines-tab-btn ${activeTab === tab.key ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.key)}
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div className="allgemeines-content">
        {activeTab === 'ueber-uns' && (
          <div className="section-text">
            <h2>Die Nachsuchenstation Heidekreis</h2>
            <div className="section-body">
              {getSection('ueber-uns').split('\n').map((line, i) => (
                <p key={i}>{line || '\u00a0'}</p>
              ))}
            </div>
          </div>
        )}

        {activeTab === 'anwendung' && (
          <div className="section-text">
            <h2>Anwendung der App</h2>
            <div className="section-body">
              {getSection('anwendung').split('\n').map((line, i) => (
                <p key={i}>{line || '\u00a0'}</p>
              ))}
            </div>
          </div>
        )}

        {activeTab === 'regeln' && (
          <div className="section-text">
            <h2>Verhaltensregeln</h2>
            <ol className="rules-list">
              {rules.map((rule, index) => (
                <li key={index} className="rule-item">{rule}</li>
              ))}
            </ol>
          </div>
        )}

        {activeTab === 'ansprechpartner' && (
          <div className="section-text">
            <h2>Ansprechpartner und Koordination</h2>
            <div className="section-body contact-block">
              {getSection('ansprechpartner').split('\n').map((line, i) => {
                const telMatch = line.match(/Tel\.?\s*(.+)/);
                const mailMatch = line.match(/Mail:\s*(.+)/);
                if (telMatch) {
                  return (
                    <p key={i}>
                      Tel.{' '}
                      {telMatch[1].split('/').map((num, j, arr) => (
                        <span key={j}>
                          <a href={`tel:${num.trim().replace(/\s/g, '')}`}>{num.trim()}</a>
                          {j < arr.length - 1 ? ' / ' : ''}
                        </span>
                      ))}
                    </p>
                  );
                }
                if (mailMatch) {
                  return (
                    <p key={i}>
                      Mail: <a href={`mailto:${mailMatch[1].trim()}`}>{mailMatch[1].trim()}</a>
                    </p>
                  );
                }
                return <p key={i}>{line || '\u00a0'}</p>;
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default RulesDisplay;
