import React, { useState } from 'react';
import { FaChevronDown, FaChevronUp, FaFilePdf, FaRuler } from 'react-icons/fa';
import styles from './BauvorschriftenSection.module.css';

export interface BauvorschriftenZone {
  zonenbezeichnung: string;
  ausnuetzungsziffer?: number;
  vollgeschosse?: number;
  gebaeudelaengeMax?: number;
  grenzabstand?: number;
  mehrlaengenzuschlag?: string;
  hoechstmassMax?: number;
  fassadenhoehe?: string;
  quelleUrl?: string;
  extraktionsDatum?: string;
}

export interface BauvorschriftenSectionProps {
  bauvorschriften: BauvorschriftenZone;
}

export const BauvorschriftenSection: React.FC<BauvorschriftenSectionProps> = ({ bauvorschriften }) => {
  const [isExpanded, setIsExpanded] = useState(true);

  return (
    <div className={styles.bauvorschriftenSection}>
      <div className={styles.bauvorschriftenHeader} onClick={() => setIsExpanded(!isExpanded)}>
        <h4 className={styles.subSectionTitle}>
          <FaRuler style={{ marginRight: '8px', display: 'inline' }} />
          Bauvorschriften - {bauvorschriften.zonenbezeichnung}
        </h4>
        <button className={styles.expandButton}>
          {isExpanded ? <FaChevronUp /> : <FaChevronDown />}
        </button>
      </div>

      {isExpanded && (
        <div className={styles.bauvorschriftenContent}>
          <div className={styles.bauvorschriftenGrid}>
            {bauvorschriften.ausnuetzungsziffer !== undefined && bauvorschriften.ausnuetzungsziffer !== null && (
              <div className={styles.bauvorschriftItem}>
                <span className={styles.label}>Ausnützungsziffer:</span>
                <span className={styles.value}>{bauvorschriften.ausnuetzungsziffer}%</span>
              </div>
            )}
            {bauvorschriften.vollgeschosse !== undefined && bauvorschriften.vollgeschosse !== null && (
              <div className={styles.bauvorschriftItem}>
                <span className={styles.label}>Vollgeschosse:</span>
                <span className={styles.value}>{bauvorschriften.vollgeschosse}</span>
              </div>
            )}
            {bauvorschriften.gebaeudelaengeMax !== undefined && bauvorschriften.gebaeudelaengeMax !== null && (
              <div className={styles.bauvorschriftItem}>
                <span className={styles.label}>Gebäudelänge max:</span>
                <span className={styles.value}>{bauvorschriften.gebaeudelaengeMax} m</span>
              </div>
            )}
            {bauvorschriften.grenzabstand !== undefined && bauvorschriften.grenzabstand !== null && (
              <div className={styles.bauvorschriftItem}>
                <span className={styles.label}>Grenzabstand:</span>
                <span className={styles.value}>{bauvorschriften.grenzabstand} m</span>
              </div>
            )}
            {bauvorschriften.mehrlaengenzuschlag && (
              <div className={styles.bauvorschriftItem}>
                <span className={styles.label}>Mehrlängenzuschlag:</span>
                <span className={styles.value}>{bauvorschriften.mehrlaengenzuschlag}</span>
              </div>
            )}
            {bauvorschriften.hoechstmassMax !== undefined && bauvorschriften.hoechstmassMax !== null && (
              <div className={styles.bauvorschriftItem}>
                <span className={styles.label}>Höchstmass max:</span>
                <span className={styles.value}>{bauvorschriften.hoechstmassMax} m</span>
              </div>
            )}
            {bauvorschriften.fassadenhoehe && (
              <div className={styles.bauvorschriftItem}>
                <span className={styles.label}>Fassadenhöhe:</span>
                <span className={styles.value}>{bauvorschriften.fassadenhoehe}</span>
              </div>
            )}
          </div>

          {bauvorschriften.quelleUrl && bauvorschriften.quelleUrl !== 'config' && (
            <div className={styles.sourceLink}>
              <a
                href={bauvorschriften.quelleUrl}
                target="_blank"
                rel="noopener noreferrer"
                className={styles.sourceLinkButton}
              >
                <FaFilePdf style={{ marginRight: '8px' }} />
                Nutzungsplan öffnen
              </a>
            </div>
          )}

          {bauvorschriften.extraktionsDatum && (
            <div className={styles.bauvorschriftenFooter}>
              <span className={styles.lastUpdated}>
                Extrahiert: {new Date(bauvorschriften.extraktionsDatum).toLocaleString('de-CH')}
              </span>
            </div>
          )}
        </div>
      )}
    </div>
  );
};