'use client'

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

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>
  )
}