'use client'

import { useEffect } from 'react'
import { useBack } from '@/hooks/useBack'
import ChevronLeftIcon from '@/components/ui/ChevronLeftIcon'
import { useVisitor } from '@/context/VisitorContext'
import { tPlain } from '@/lib/i18n'
import type { SectionDTO } from '@/lib/api/types'

interface Props {
  section: SectionDTO
  slug: string
  configId: string
  languages: string[]
}

export default function WebSection({ section, slug, configId, languages }: Props) {
  const { language, setAvailableLanguages } = useVisitor()
  const back = useBack()

  useEffect(() => { setAvailableLanguages([]) }, [languages])

  const source = section.web?.source ?? section.source
  const title = tPlain(section.title, language)

  return (
    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: '#111' }}>
      {/* AppBar sombre garanti — lisible quelle que soit la couleur de l'instance */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          padding: '0 16px',
          height: 56,
          flexShrink: 0,
          background: 'rgba(0,0,0,0.75)',
          backdropFilter: 'blur(8px)',
        }}
      >
        <button
          onClick={back}
          style={{
            width: 40, height: 40, borderRadius: 16,
            background: 'rgba(255,255,255,0.2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: 'none', cursor: 'pointer', flexShrink: 0,
          }}
        >
          <ChevronLeftIcon color="white" size={20} />
        </button>
        <span style={{ color: 'white', fontWeight: 600, fontSize: 15, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {title || 'Web'}
        </span>
      </div>

      {/* iframe */}
      <div style={{ flex: 1, borderRadius: '20px 20px 0 0', overflow: 'hidden' }}>
        {source ? (
          <iframe
            src={source}
            title={title}
            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
          />
        ) : (
          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999', fontSize: 14, padding: 32, textAlign: 'center' }}>
            La page ne peut pas être affichée, l'URL est incorrecte ou vide.
          </div>
        )}
      </div>
    </div>
  )
}