'use client'

import { useState } from 'react'
import Link from 'next/link'
import { COMPANY_PROFILE_PRESETS, type CompanyProfilePreset } from '@/lib/sdk/company-profile-presets'

const DOC_LABELS: Record<string, { label: string; category: string }> = {
  privacy_policy: { label: 'Datenschutzerklaerung', category: 'Website' },
  impressum: { label: 'Impressum', category: 'Website' },
  agb: { label: 'AGB', category: 'Vertraege' },
  cookie_policy: { label: 'Cookie-Richtlinie', category: 'Website' },
  cookie_banner: { label: 'Cookie-Banner-Texte', category: 'Website' },
  dpa: { label: 'AVV (Auftragsverarbeitung)', category: 'Vertraege' },
  nda: { label: 'Geheimhaltungsvereinbarung', category: 'Vertraege' },
  sla: { label: 'Service Level Agreement', category: 'Vertraege' },
  terms_of_use: { label: 'Nutzungsbedingungen', category: 'Vertraege' },
  community_guidelines: { label: 'Community Guidelines', category: 'Plattform' },
  acceptable_use: { label: 'Acceptable Use Policy', category: 'Plattform' },
  widerruf: { label: 'Widerrufsbelehrung', category: 'E-Commerce' },
  employee_dsi: { label: 'Mitarbeiter-DSI', category: 'HR' },
  applicant_dsi: { label: 'Bewerber-DSI', category: 'HR' },
  whistleblower_policy: { label: 'Whistleblower-Richtlinie', category: 'HR' },
  tom_documentation: { label: 'TOM-Dokumentation', category: 'Compliance' },
  vvt_register: { label: 'Verarbeitungsverzeichnis', category: 'Compliance' },
  loeschkonzept: { label: 'Loeschkonzept', category: 'Compliance' },
  dsfa: { label: 'Datenschutz-Folgenabschaetzung', category: 'Compliance' },
  pflichtenregister: { label: 'Pflichtenregister', category: 'Compliance' },
  isms_manual: { label: 'ISMS-Handbuch', category: 'Sicherheit' },
  social_media_dsi: { label: 'Social-Media-DSI', category: 'Marketing' },
  transfer_impact_assessment: { label: 'Transfer Impact Assessment', category: 'Drittland' },
  media_content_policy: { label: 'Medien-Richtlinie', category: 'Plattform' },
  cloud_service_agreement: { label: 'Cloud-Vertrag', category: 'Vertraege' },
}

const CATEGORY_COLORS: Record<string, string> = {
  Website: 'bg-blue-50 text-blue-700',
  Vertraege: 'bg-purple-50 text-purple-700',
  Plattform: 'bg-indigo-50 text-indigo-700',
  'E-Commerce': 'bg-green-50 text-green-700',
  HR: 'bg-amber-50 text-amber-700',
  Compliance: 'bg-red-50 text-red-700',
  Sicherheit: 'bg-gray-100 text-gray-700',
  Marketing: 'bg-pink-50 text-pink-700',
  Drittland: 'bg-orange-50 text-orange-700',
}

export function PresetSection({ projectId }: { projectId?: string }) {
  const [selectedPreset, setSelectedPreset] = useState<CompanyProfilePreset | null>(null)

  // Group recommended docs by category
  const groupedDocs = selectedPreset
    ? selectedPreset.recommendedDocs.reduce<Record<string, string[]>>((acc, docType) => {
        const info = DOC_LABELS[docType]
        if (!info) return acc
        if (!acc[info.category]) acc[info.category] = []
        acc[info.category].push(info.label)
        return acc
      }, {})
    : null

  return (
    <div className="bg-gradient-to-br from-purple-50 to-white rounded-xl border border-purple-200 p-6 space-y-4">
      <div>
        <h2 className="text-lg font-bold text-gray-900">Schnellstart: Welcher Unternehmenstyp sind Sie?</h2>
        <p className="text-sm text-gray-500 mt-1">
          Waehlen Sie Ihre Branche — wir zeigen Ihnen welche Dokumente Sie benoetigen.
        </p>
      </div>

      {/* Preset Cards */}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
        {COMPANY_PROFILE_PRESETS.map((preset) => (
          <button
            key={preset.id}
            onClick={() => setSelectedPreset(selectedPreset?.id === preset.id ? null : preset)}
            className={`flex flex-col items-center gap-2 p-3 rounded-xl transition-all text-center ${
              selectedPreset?.id === preset.id
                ? 'bg-purple-100 border-2 border-purple-500 shadow-md'
                : 'bg-white border border-gray-200 hover:border-purple-300 hover:shadow-sm'
            }`}
          >
            <span className="text-2xl">{preset.icon}</span>
            <span className={`text-xs font-medium ${selectedPreset?.id === preset.id ? 'text-purple-700' : 'text-gray-900'}`}>
              {preset.label}
            </span>
            <span className="text-[10px] text-gray-400 leading-tight">{preset.description}</span>
          </button>
        ))}
      </div>

      {/* Document Preview — shown when a preset is selected */}
      {selectedPreset && groupedDocs && (
        <div className="bg-white rounded-xl border border-gray-200 p-5 space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="font-semibold text-gray-900">
                {selectedPreset.icon} {selectedPreset.label} — Ihre Dokumente
              </h3>
              <p className="text-xs text-gray-500 mt-0.5">
                {selectedPreset.recommendedDocs.length} Dokumente werden fuer Sie vorbereitet
              </p>
            </div>
            <Link
              href={projectId
                ? `/sdk/company-profile?project=${projectId}&preset=${selectedPreset.id}`
                : `/sdk/company-profile?preset=${selectedPreset.id}`}
              className="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700 transition-colors"
            >
              Jetzt starten
            </Link>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
            {Object.entries(groupedDocs).map(([category, docs]) => (
              <div key={category} className="space-y-1.5">
                <span className={`inline-block px-2 py-0.5 rounded-full text-[10px] font-medium ${CATEGORY_COLORS[category] || 'bg-gray-100 text-gray-600'}`}>
                  {category}
                </span>
                {docs.map((doc) => (
                  <div key={doc} className="text-xs text-gray-700 pl-1">
                    {doc}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}