import { Settings } from 'lucide-react'
import EmailSettings from '../components/EmailSettings'
import { api } from '../utils/api'

export default function AdminSystemPage() {
  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:16}}>
        <Settings size={18} color="var(--accent)"/>
        <h2 style={{fontSize:17,fontWeight:700,margin:0}}>Basiseinstellungen</h2>
      </div>
      <p style={{fontSize:13,color:'var(--text2)',marginBottom:16,lineHeight:1.6}}>
        SMTP für System-E-Mails und Export der Placeholder-Metadaten für Dokumentation und Compliance.
      </p>

      <EmailSettings />

      <div className="card section-gap" style={{marginTop:16}}>
        <div style={{fontWeight:700,fontSize:14,marginBottom:12,display:'flex',alignItems:'center',gap:6}}>
          <Settings size={16} color="var(--accent)"/> Placeholder-Metadaten (Export)
        </div>
        <div style={{fontSize:12,color:'var(--text3)',marginBottom:12,lineHeight:1.5}}>
          Vollständige Metadaten aller registrierten Platzhalter (JSON/ZIP für Katalog und Reports).
        </div>
        <div style={{display:'grid',gap:8}}>
          <button type="button" className="btn btn-secondary btn-full"
            onClick={async()=>{
              try {
                const data = await api.exportPlaceholdersExtendedJson()
                const blob = new Blob([JSON.stringify(data, null, 2)], {type:'application/json'})
                const url = window.URL.createObjectURL(blob)
                const a = document.createElement('a')
                a.href = url
                a.download = `placeholder-metadata-extended-${new Date().toISOString().split('T')[0]}.json`
                a.click()
                window.URL.revokeObjectURL(url)
              } catch(e) {
                alert('Fehler beim Export: '+e.message)
              }
            }}>
            📄 Complete JSON exportieren
          </button>
          <button type="button" className="btn btn-secondary btn-full"
            onClick={()=>{
              try {
                const token = localStorage.getItem('bodytrack_token')
                const a = document.createElement('a')
                a.href = `/api/prompts/placeholders/export-catalog-zip?token=${token}`
                a.download = `placeholder-catalog-${new Date().toISOString().split('T')[0]}.zip`
                a.click()
              } catch(e) {
                alert('Fehler beim Export: '+e.message)
              }
            }}>
            📦 Complete ZIP (JSON + Markdown + Reports)
          </button>
        </div>
        <div style={{fontSize:11,color:'var(--text3)',marginTop:8,lineHeight:1.5}}>
          <strong>JSON:</strong> Maschinenlesbare Metadaten ·{' '}
          <strong>ZIP:</strong> Katalog, Gap Report, Export Spec
        </div>
      </div>
    </div>
  )
}