import React, { useState } from 'react';
import { FaChevronDown, FaChevronUp, FaFilePdf, FaInfoCircle } from 'react-icons/fa';
import { UrlContentPreview } from '../../ContentPreview';
import styles from './OerebSection.module.css';
import { useLanguage } from '../../../providers/language/LanguageContext';

export interface OerebData {
  extract_url?: string;
  restrictions?: Array<{
    theme: string;
    type?: string;
    law_status?: string;
    information?: string;
    documents?: Array<{ reference: string }>;
  }>;
  last_updated?: string;
  canton?: string;
}

export interface OerebSectionProps {
  oereb: OerebData;
}

export const OerebSection: React.FC<OerebSectionProps> = ({ oereb }) => {
  const { t } = useLanguage();
  const [isExpanded, setIsExpanded] = useState(true);
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
  const restrictions = oereb.restrictions || [];

  if (restrictions.length === 0 && !oereb.extract_url) {
    return null;
  }

  return (
    <div className={styles.oerebSection}>
      <div className={styles.oerebHeader} onClick={() => setIsExpanded(!isExpanded)}>
        <h4 className={styles.subSectionTitle}>
          <FaInfoCircle style={{ marginRight: '8px', display: 'inline' }} />
          {t('ÖREB-Kataster')}
          {restrictions.length > 0 && (
            <span className={styles.badge}>({restrictions.length})</span>
          )}
        </h4>
        <button className={styles.expandButton}>
          {isExpanded ? <FaChevronUp /> : <FaChevronDown />}
        </button>
      </div>

      {isExpanded && (
        <div className={styles.oerebContent}>
          {oereb.extract_url && (
            <div className={styles.oerebExtractLink}>
              <button
                onClick={() => setIsPreviewOpen(true)}
                className={styles.oerebLink}
                type="button"
              >
                <FaFilePdf style={{ marginRight: '8px' }} />
                {t('Vollständigen ÖREB-Auszug öffnen (PDF)')}
              </button>
            </div>
          )}

          {restrictions.length > 0 ? (
            <div className={styles.restrictionsList}>
              {restrictions.map((restriction, index) => (
                <div key={index} className={styles.restrictionItem}>
                  <div className={styles.restrictionHeader}>
                    <span className={styles.restrictionTheme}>{restriction.theme}</span>
                    {restriction.law_status && (
                      <span className={styles.restrictionStatus}>
                        {restriction.law_status === 'inKraft' || restriction.law_status === 'inForce' 
                          ? t('In Kraft') 
                          : restriction.law_status}
                      </span>
                    )}
                  </div>
                  {restriction.type && (
                    <div className={styles.restrictionType}>
                      <span className={styles.label}>{t('Typ:')}</span>
                      <span className={styles.value}>{restriction.type}</span>
                    </div>
                  )}
                  {restriction.information && (
                    <div className={styles.restrictionInfo}>
                      <span className={styles.value}>{restriction.information}</span>
                    </div>
                  )}
                  {restriction.documents && restriction.documents.length > 0 && (
                    <div className={styles.restrictionDocuments}>
                      <span className={styles.label}>{t('Dokumente:')}</span>
                      {restriction.documents.map((doc, docIndex) => (
                        <a
                          key={docIndex}
                          href={doc.reference}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={styles.documentLink}
                        >
                          {t('Dokument {nr}', { nr: String(docIndex + 1) })}
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <div className={styles.noRestrictions}>
              {t('Keine öffentlich-rechtlichen Beschränkungen gefunden.')}
            </div>
          )}

          {oereb.last_updated && (
            <div className={styles.oerebFooter}>
              <span className={styles.lastUpdated}>
                {t('Aktualisiert')}: {new Date(oereb.last_updated).toLocaleString('de-CH')}
              </span>
            </div>
          )}
        </div>
      )}

      {oereb.extract_url && (
        <UrlContentPreview
          isOpen={isPreviewOpen}
          onClose={() => setIsPreviewOpen(false)}
          url={oereb.extract_url}
          fileName={t('ÖREB-Auszug.pdf')}
          mimeType="application/pdf"
        />
      )}
    </div>
  );
};
