'use client'

import { TemplateContext } from '../contextBridge'
import { SECTION_LABELS, MODULE_LABELS } from '../_constants'
import ContextSectionForm from './ContextSectionForm'

interface GeneratorPlaceholdersTabProps {
  placeholders: string[]
  relevantSections: (keyof TemplateContext)[]
  uncovered: string[]
  missing: string[]
  expandedSections: Set<string>
  toggleSection: (sec: string) => void
  context: TemplateContext
  onContextChange: (section: keyof TemplateContext, key: string, value: unknown) => void
  extraPlaceholders: Record<string, string>
  onExtraChange: (key: string, value: string) => void
  relevantModules: string[]
  enabledModules: string[]
  onModuleToggle: (mod: string, checked: boolean) => void
  onGotoPreview: () => void
}

export default function GeneratorPlaceholdersTab({
  placeholders,
  relevantSections,
  uncovered,
  missing,
  expandedSections,
  toggleSection,
  context,
  onContextChange,
  extraPlaceholders,
  onExtraChange,
  relevantModules,
  enabledModules,
  onModuleToggle,
  onGotoPreview,
}: GeneratorPlaceholdersTabProps) {
  return (
    <div className="space-y-4">
      {placeholders.length === 0 ? (
        <div className="text-sm text-gray-500 text-center py-4">
          Keine Platzhalter — Vorlage kann direkt verwendet werden.
        </div>
      ) : (
        <>
          {relevantSections.length === 0 ? (
            <p className="text-sm text-gray-500">Alle Platzhalter müssen manuell befüllt werden.</p>
          ) : (
            <div className="space-y-3">
              {relevantSections.map((section) => (
                <div key={section} className="border border-gray-200 rounded-xl overflow-hidden">
                  <button
                    onClick={() => toggleSection(section)}
                    className="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
                  >
                    <span className="text-sm font-medium text-gray-800">{SECTION_LABELS[section]}</span>
                    <svg
                      className={`w-4 h-4 text-gray-400 transition-transform ${expandedSections.has(section) ? 'rotate-180' : ''}`}
                      fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </button>
                  {expandedSections.has(section) && (
                    <div className="p-4 border-t border-gray-100">
                      <ContextSectionForm
                        section={section}
                        context={context}
                        onChange={onContextChange}
                      />
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}

          {uncovered.length > 0 && (
            <div className="border border-dashed border-gray-300 rounded-xl p-4">
              <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-3">
                Weitere Platzhalter (manuell ausfüllen)
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {uncovered.map((ph) => (
                  <div key={ph}>
                    <label className="block text-xs text-gray-500 mb-1 font-mono">{ph}</label>
                    <input
                      type="text"
                      value={extraPlaceholders[ph] || ''}
                      onChange={(e) => onExtraChange(ph, e.target.value)}
                      placeholder={`Wert für ${ph}`}
                      className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-400"
                    />
                  </div>
                ))}
              </div>
            </div>
          )}

          {relevantModules.length > 0 && (
            <div className="border border-gray-200 rounded-xl p-4">
              <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-3">Module</p>
              <div className="space-y-2">
                {relevantModules.map((modId) => (
                  <label key={modId} className="flex items-center gap-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={enabledModules.includes(modId)}
                      onChange={(e) => onModuleToggle(modId, e.target.checked)}
                      className="w-4 h-4 accent-purple-600"
                    />
                    <span className="text-xs font-mono text-gray-600">{modId}</span>
                    {MODULE_LABELS[modId] && (
                      <span className="text-xs text-gray-500">{MODULE_LABELS[modId]}</span>
                    )}
                  </label>
                ))}
              </div>
            </div>
          )}

          <div className="flex items-center justify-between pt-2 flex-wrap gap-3">
            <div>
              {missing.length > 0 ? (
                <span className="text-sm text-orange-600">
                  ⚠ {missing.length} Pflichtfeld{missing.length > 1 ? 'er' : ''} fehlt{missing.length === 1 ? '' : 'en'}
                  <span className="ml-1 text-xs text-orange-400">
                    ({missing.map((m) => m.replace(/\{\{|\}\}/g, '')).slice(0, 3).join(', ')}{missing.length > 3 ? ` +${missing.length - 3}` : ''})
                  </span>
                </span>
              ) : (
                <span className="text-sm text-green-600">Alle Pflichtfelder ausgefüllt</span>
              )}
            </div>
            <button
              onClick={onGotoPreview}
              className="px-5 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors"
            >
              Zur Vorschau →
            </button>
          </div>
        </>
      )}
    </div>
  )
}
