'use client'

import {
  CompanyProfile,
  BusinessModel,
  OfferingType,
  BUSINESS_MODEL_LABELS,
  OFFERING_TYPE_LABELS,
} from '@/lib/sdk/types'
import { OFFERING_URL_CONFIG } from './constants'

export function StepBusinessModel({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  const toggleOffering = (offering: OfferingType) => {
    const current = data.offerings || []
    if (current.includes(offering)) {
      const urls = { ...(data.offeringUrls || {}) }
      delete urls[offering]
      onChange({ offerings: current.filter(o => o !== offering), offeringUrls: urls })
    } else {
      onChange({ offerings: [...current, offering] })
    }
  }

  const updateOfferingUrl = (offering: string, url: string) => {
    onChange({ offeringUrls: { ...(data.offeringUrls || {}), [offering]: url } })
  }

  const selectedWithUrls = (data.offerings || []).filter(o => o in OFFERING_URL_CONFIG)

  return (
    <div className="space-y-8">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Gesch&auml;ftsmodell <span className="text-red-500">*</span>
        </label>
        <div className="grid grid-cols-4 gap-4">
          {Object.entries(BUSINESS_MODEL_LABELS).map(([value, { short }]) => (
            <button
              key={value}
              type="button"
              onClick={() => onChange({ businessModel: value as BusinessModel })}
              className={`p-4 rounded-xl border-2 text-center transition-all ${
                data.businessModel === value
                  ? 'border-purple-500 bg-purple-50 text-purple-700'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="font-semibold">{short}</div>
            </button>
          ))}
        </div>
        {data.businessModel && (
          <p className="text-sm text-gray-500 mt-2">
            {BUSINESS_MODEL_LABELS[data.businessModel].description}
          </p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Was bieten Sie an? <span className="text-gray-400">(Mehrfachauswahl m&ouml;glich)</span>
        </label>
        <div className="grid grid-cols-2 gap-3">
          {Object.entries(OFFERING_TYPE_LABELS).map(([value, { label, description }]) => (
            <button
              key={value}
              type="button"
              onClick={() => toggleOffering(value as OfferingType)}
              className={`p-4 rounded-xl border-2 text-left transition-all ${
                (data.offerings || []).includes(value as OfferingType)
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="font-medium text-gray-900">{label}</div>
              <div className="text-sm text-gray-500">{description}</div>
            </button>
          ))}
        </div>

        {(data.offerings || []).includes('webshop') && (data.offerings || []).includes('software_saas') && (
          <div className="mt-3 flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
            <svg className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <p className="text-sm text-amber-800">
              <strong>Hinweis:</strong> Wenn Sie reine Software verkaufen, genuegt <em>SaaS/Cloud</em> — <em>Online-Shop</em> ist nur fuer physische Produkte oder Hardware mit Abo-Modell gedacht.
            </p>
          </div>
        )}
      </div>

      {selectedWithUrls.length > 0 && (
        <div className="space-y-4">
          <label className="block text-sm font-medium text-gray-700">
            Zugeh&ouml;rige URLs
          </label>
          {selectedWithUrls.map(offering => {
            const config = OFFERING_URL_CONFIG[offering]!
            return (
              <div key={offering}>
                <label className="block text-sm text-gray-600 mb-1">{config.label}</label>
                <input
                  type="url"
                  value={(data.offeringUrls || {})[offering] || ''}
                  onChange={e => updateOfferingUrl(offering, e.target.value)}
                  placeholder={config.placeholder}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                />
                <p className="text-xs text-gray-400 mt-1">{config.hint}</p>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}