'use client'

import { CompanyProfile, TargetMarket, TARGET_MARKET_LABELS } from '@/lib/sdk/types'

const STATES_BY_COUNTRY: Record<string, { label: string; options: string[] }> = {
  DE: {
    label: 'Bundesland',
    options: [
      'Baden-W\u00FCrttemberg', 'Bayern', 'Berlin', 'Brandenburg', 'Bremen',
      'Hamburg', 'Hessen', 'Mecklenburg-Vorpommern', 'Niedersachsen',
      'Nordrhein-Westfalen', 'Rheinland-Pfalz', 'Saarland', 'Sachsen',
      'Sachsen-Anhalt', 'Schleswig-Holstein', 'Th\u00FCringen',
    ],
  },
  AT: {
    label: 'Bundesland',
    options: [
      'Burgenland', 'K\u00E4rnten', 'Nieder\u00F6sterreich', 'Ober\u00F6sterreich',
      'Salzburg', 'Steiermark', 'Tirol', 'Vorarlberg', 'Wien',
    ],
  },
  CH: {
    label: 'Kanton',
    options: [
      'Aargau', 'Appenzell Ausserrhoden', 'Appenzell Innerrhoden',
      'Basel-Landschaft', 'Basel-Stadt', 'Bern', 'Freiburg', 'Genf',
      'Glarus', 'Graub\u00FCnden', 'Jura', 'Luzern', 'Neuenburg', 'Nidwalden',
      'Obwalden', 'Schaffhausen', 'Schwyz', 'Solothurn', 'St. Gallen',
      'Tessin', 'Thurgau', 'Uri', 'Waadt', 'Wallis', 'Zug', 'Z\u00FCrich',
    ],
  },
}

export function StepLocations({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  const toggleMarket = (market: TargetMarket) => {
    const current = data.targetMarkets || []
    if (current.includes(market)) {
      onChange({ targetMarkets: current.filter(m => m !== market) })
    } else {
      onChange({ targetMarkets: [...current, market] })
    }
  }

  const countryStates = data.headquartersCountry ? STATES_BY_COUNTRY[data.headquartersCountry] : null
  const stateLabel = countryStates?.label || 'Region / Provinz'

  return (
    <div className="space-y-8">
      {/* Country */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Land des Hauptsitzes <span className="text-red-500">*</span>
        </label>
        <select
          value={data.headquartersCountry || ''}
          onChange={e => onChange({ headquartersCountry: e.target.value, headquartersCountryOther: '' })}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        >
          <option value="">Bitte w&auml;hlen...</option>
          <option value="DE">Deutschland</option>
          <option value="AT">&Ouml;sterreich</option>
          <option value="CH">Schweiz</option>
          <option value="LI">Liechtenstein</option>
          <option value="LU">Luxemburg</option>
          <option value="NL">Niederlande</option>
          <option value="FR">Frankreich</option>
          <option value="IT">Italien</option>
          <option value="other">Anderes Land</option>
        </select>
      </div>

      {data.headquartersCountry === 'other' && (
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Land (Freitext)</label>
          <input
            type="text"
            value={data.headquartersCountryOther || ''}
            onChange={e => onChange({ headquartersCountryOther: e.target.value })}
            placeholder="z.B. Vereinigtes K&ouml;nigreich"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
      )}

      {/* Street + House Number */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Stra&szlig;e und Hausnummer</label>
        <input
          type="text"
          value={data.headquartersStreet || ''}
          onChange={e => onChange({ headquartersStreet: e.target.value })}
          placeholder="Musterstra&szlig;e 42"
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
      </div>

      {/* PLZ + City */}
      <div className="grid grid-cols-3 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">PLZ</label>
          <input
            type="text"
            value={data.headquartersZip || ''}
            onChange={e => onChange({ headquartersZip: e.target.value })}
            placeholder="10115"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
        <div className="col-span-2">
          <label className="block text-sm font-medium text-gray-700 mb-2">Stadt</label>
          <input
            type="text"
            value={data.headquartersCity || ''}
            onChange={e => onChange({ headquartersCity: e.target.value })}
            placeholder="Berlin"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
      </div>

      {/* State / Bundesland / Kanton */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">{stateLabel}</label>
        {countryStates ? (
          <select
            value={data.headquartersState || ''}
            onChange={e => onChange({ headquartersState: e.target.value })}
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          >
            <option value="">Bitte w&auml;hlen...</option>
            {countryStates.options.map(s => (
              <option key={s} value={s}>{s}</option>
            ))}
          </select>
        ) : (
          <input
            type="text"
            value={data.headquartersState || ''}
            onChange={e => onChange({ headquartersState: e.target.value })}
            placeholder="Region / Provinz"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Zielm&auml;rkte <span className="text-red-500">*</span>
          <span className="text-gray-400 font-normal ml-2">Wo verkaufen/operieren Sie?</span>
        </label>
        <div className="space-y-3">
          {Object.entries(TARGET_MARKET_LABELS).map(([value, { label, description }]) => (
            <button
              key={value}
              type="button"
              onClick={() => toggleMarket(value as TargetMarket)}
              className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
                (data.targetMarkets || []).includes(value as TargetMarket)
                  ? '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>
      </div>
    </div>
  )
}