breakpilot-lehrer/studio-v2/components/B2BWizardSteps.tsx

'use client'

import { useTheme } from '@/lib/ThemeContext'
import { B2BTemplate, Package, getPackageIcon, getPackageLabel } from '@/lib/AlertsB2BContext'
import { InfoBox, TipBox, StepBox } from './InfoBox'

// =============================================================================
// Step 1: Company Name
// =============================================================================

interface Step1Props {
  companyName: string
  setCompanyName: (v: string) => void
}

export function WizardStep1({ companyName, setCompanyName }: Step1Props) {
  const { isDark } = useTheme()
  return (
    <div>
      <h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
        Willkommen im B2B-Bereich
      </h2>
      <p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
        Wie heisst Ihr Unternehmen?
      </p>

      <div className="max-w-md mx-auto space-y-4">
        <input
          type="text"
          placeholder="z.B. Hectronic GmbH"
          value={companyName}
          onChange={(e) => setCompanyName(e.target.value)}
          className={`w-full px-4 py-3 rounded-xl border text-lg ${
            isDark
              ? 'bg-white/10 border-white/20 text-white placeholder-white/40'
              : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'
          }`}
        />

        <InfoBox variant="info" title="Warum fragen wir das?" icon="💡">
          <p>Ihr Firmenname wird verwendet, um:</p>
          <ul className="list-disc list-inside mt-2 space-y-1">
            <li>Ihre eindeutige E-Mail-Adresse zu generieren</li>
            <li>Berichte und Digests zu personalisieren</li>
            <li>Ihr Dashboard anzupassen</li>
          </ul>
        </InfoBox>
      </div>
    </div>
  )
}

// =============================================================================
// Step 2: Template Selection
// =============================================================================

interface Step2Props {
  availableTemplates: B2BTemplate[]
  selectedTemplateId: string | null
  setSelectedTemplateId: (v: string | null) => void
}

export function WizardStep2({ availableTemplates, selectedTemplateId, setSelectedTemplateId }: Step2Props) {
  const { isDark } = useTheme()
  return (
    <div>
      <h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
        Branchenvorlage waehlen
      </h2>
      <p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
        Waehlen Sie eine Vorlage fuer Ihre Branche oder starten Sie leer
      </p>

      <div className="space-y-4">
        {availableTemplates.map((template) => (
          <button
            key={template.templateId}
            onClick={() => setSelectedTemplateId(template.templateId)}
            className={`w-full text-left p-5 rounded-xl border-2 transition-all ${
              selectedTemplateId === template.templateId
                ? 'border-blue-500 bg-blue-500/20 shadow-lg'
                : isDark
                  ? 'border-white/10 bg-white/5 hover:bg-white/10'
                  : 'border-slate-200 bg-white hover:bg-slate-50'
            }`}
          >
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-2xl">
                🏭
              </div>
              <div className="flex-1">
                <h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  {template.templateName}
                </h3>
                <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                  {template.templateDescription}
                </p>
                <div className="flex flex-wrap gap-2 mt-3">
                  {template.guidedConfig.packageSelector.options.map(pkg => (
                    <span
                      key={pkg}
                      className={`px-2 py-1 rounded-full text-xs font-medium ${
                        template.guidedConfig.packageSelector.default.includes(pkg)
                          ? isDark ? 'bg-blue-500/30 text-blue-300' : 'bg-blue-100 text-blue-700'
                          : isDark ? 'bg-white/10 text-white/50' : 'bg-slate-100 text-slate-500'
                      }`}
                    >
                      {getPackageIcon(pkg)} {getPackageLabel(pkg)}
                    </span>
                  ))}
                </div>
              </div>
              {selectedTemplateId === template.templateId && (
                <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
              )}
            </div>
          </button>
        ))}

        {/* Custom option */}
        <button
          onClick={() => setSelectedTemplateId('custom')}
          className={`w-full text-left p-5 rounded-xl border-2 transition-all ${
            selectedTemplateId === 'custom'
              ? 'border-blue-500 bg-blue-500/20 shadow-lg'
              : isDark
                ? 'border-white/10 bg-white/5 hover:bg-white/10'
                : 'border-slate-200 bg-white hover:bg-slate-50'
          }`}
        >
          <div className="flex items-start gap-4">
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center text-2xl ${
              isDark ? 'bg-white/20' : 'bg-slate-100'
            }`}>
              ⚙️
            </div>
            <div className="flex-1">
              <h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                Eigene Konfiguration
              </h3>
              <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                Starten Sie ohne Vorlage und konfigurieren Sie alles selbst
              </p>
            </div>
          </div>
        </button>
      </div>
    </div>
  )
}

// =============================================================================
// Step 3: Migration Method
// =============================================================================

export type MigrationMethod = 'email' | 'rss' | 'reconstruct' | null

interface Step3Props {
  migrationMethod: MigrationMethod
  setMigrationMethod: (v: MigrationMethod) => void
}

export function WizardStep3({ migrationMethod, setMigrationMethod }: Step3Props) {
  const { isDark } = useTheme()
  return (
    <div>
      <h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
        Nutzen Sie bereits Google Alerts?
      </h2>
      <p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
        Waehlen Sie, wie Sie Ihre bestehenden Alerts uebernehmen moechten
      </p>

      <div className="space-y-4">
        {/* Email Forwarding (Recommended) */}
        <button
          onClick={() => setMigrationMethod('email')}
          className={`w-full text-left p-5 rounded-xl border-2 transition-all ${
            migrationMethod === 'email'
              ? 'border-green-500 bg-green-500/20 shadow-lg'
              : isDark
                ? 'border-white/10 bg-white/5 hover:bg-white/10'
                : 'border-slate-200 bg-white hover:bg-slate-50'
          }`}
        >
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center text-2xl">
              📧
            </div>
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  E-Mail Weiterleitung
                </h3>
                <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-500">
                  Empfohlen
                </span>
              </div>
              <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                Leiten Sie Ihre bestehenden Google Alert E-Mails an uns weiter.
                Keine Aenderung an Ihren Alerts noetig.
              </p>
            </div>
          </div>
        </button>

        {/* RSS Import */}
        <button
          onClick={() => setMigrationMethod('rss')}
          className={`w-full text-left p-5 rounded-xl border-2 transition-all ${
            migrationMethod === 'rss'
              ? 'border-blue-500 bg-blue-500/20 shadow-lg'
              : isDark
                ? 'border-white/10 bg-white/5 hover:bg-white/10'
                : 'border-slate-200 bg-white hover:bg-slate-50'
          }`}
        >
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-2xl">
              📡
            </div>
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  RSS-Feed Import
                </h3>
                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-100 text-amber-700'}`}>
                  Eingeschraenkt
                </span>
              </div>
              <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                RSS-Feeds, falls in Ihrem Google-Konto verfuegbar.
              </p>
              <p className={`text-xs mt-1 ${isDark ? 'text-amber-400/70' : 'text-amber-600'}`}>
                ⚠️ Google hat RSS fuer viele Konten deaktiviert
              </p>
            </div>
          </div>
        </button>

        {/* Reconstruction */}
        <button
          onClick={() => setMigrationMethod('reconstruct')}
          className={`w-full text-left p-5 rounded-xl border-2 transition-all ${
            migrationMethod === 'reconstruct'
              ? 'border-amber-500 bg-amber-500/20 shadow-lg'
              : isDark
                ? 'border-white/10 bg-white/5 hover:bg-white/10'
                : 'border-slate-200 bg-white hover:bg-slate-50'
          }`}
        >
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-2xl">
              🔄
            </div>
            <div className="flex-1">
              <h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                Rekonstruktion
              </h3>
              <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                Beschreiben Sie, was Sie beobachten moechten. Wir erstellen die
                optimale Konfiguration fuer Sie.
              </p>
            </div>
          </div>
        </button>
      </div>

      <TipBox title="Kein Neustart noetig" icon="💡" className="mt-6">
        <p>
          Ihre bestehenden Google Alerts bleiben bestehen. Wir sind eine zusaetzliche
          Intelligenzschicht, die filtert, priorisiert und zusammenfasst.
        </p>
      </TipBox>
    </div>
  )
}