'use client'

import { Suspense, useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import Link from 'next/link'
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import { useLanguage } from '@/lib/LanguageContext'

type FundingProgram = 'DIGITALPAKT_1' | 'DIGITALPAKT_2' | 'LANDESFOERDERUNG' | 'SCHULTRAEGER'
type FederalState = 'NI' | 'NRW' | 'BAY' | 'BW' | 'HE' | 'SN' | 'TH' | 'SA' | 'BB' | 'MV' | 'SH' | 'HH' | 'HB' | 'BE' | 'SL' | 'RP'

interface FormData {
  title: string
  funding_program: FundingProgram
  federal_state: FederalState
  preset_id: string
}

const federalStates: { value: string; label: string }[] = [
  { value: 'NI', label: 'Niedersachsen' },
  { value: 'NRW', label: 'Nordrhein-Westfalen' },
  { value: 'BAY', label: 'Bayern' },
  { value: 'BW', label: 'Baden-Wuerttemberg' },
  { value: 'HE', label: 'Hessen' },
  { value: 'SN', label: 'Sachsen' },
  { value: 'TH', label: 'Thueringen' },
  { value: 'SA', label: 'Sachsen-Anhalt' },
  { value: 'BB', label: 'Brandenburg' },
  { value: 'MV', label: 'Mecklenburg-Vorpommern' },
  { value: 'SH', label: 'Schleswig-Holstein' },
  { value: 'HH', label: 'Hamburg' },
  { value: 'HB', label: 'Bremen' },
  { value: 'BE', label: 'Berlin' },
  { value: 'SL', label: 'Saarland' },
  { value: 'RP', label: 'Rheinland-Pfalz' },
]

export default function NewFoerderantragPage() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-slate-50 flex items-center justify-center"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>}>
      <NewFoerderantragContent />
    </Suspense>
  )
}

function NewFoerderantragContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { t, isRTL } = useLanguage()

  const presets = [
    { id: 'breakpilot_basic', nameKey: 'fa_preset_basic_name', descKey: 'fa_preset_basic_desc', budgetKey: 'fa_preset_basic_budget', color: 'blue' },
    { id: 'breakpilot_cluster', nameKey: 'fa_preset_cluster_name', descKey: 'fa_preset_cluster_desc', budgetKey: 'fa_preset_cluster_budget', color: 'purple' },
    { id: '', nameKey: 'fa_preset_custom_name', descKey: 'fa_preset_custom_desc', budgetKey: 'fa_preset_custom_budget', color: 'slate' },
  ]

  const fundingPrograms = [
    { value: 'DIGITALPAKT_2', labelKey: 'fa_program_dp2' },
    { value: 'DIGITALPAKT_1', labelKey: 'fa_program_dp1' },
    { value: 'LANDESFOERDERUNG', labelKey: 'fa_program_landes' },
    { value: 'SCHULTRAEGER', labelKey: 'fa_program_traeger' },
  ]

  const [formData, setFormData] = useState<FormData>({
    title: '',
    funding_program: 'DIGITALPAKT_2',
    federal_state: 'NI',
    preset_id: searchParams.get('preset') || '',
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const preset = searchParams.get('preset')
    if (preset) {
      const presetInfo = presets.find(p => p.id === preset)
      if (presetInfo && presetInfo.id) {
        setFormData(prev => ({
          ...prev,
          preset_id: preset,
          title: `${t(presetInfo.nameKey)} - ${new Date().toLocaleDateString('de-DE')}`,
        }))
      }
    }
  }, [searchParams])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)

    if (!formData.title.trim()) {
      setError(t('fa_project_title_label'))
      return
    }

    setIsSubmitting(true)
    try {
      const mockId = 'demo-' + Date.now()
      router.push(`/foerderantrag/${mockId}`)
    } catch {
      setError('Error')
    } finally {
      setIsSubmitting(false)
    }
  }

  const getPresetColorClasses = (color: string, isSelected: boolean) => {
    const colors: Record<string, { border: string; bg: string; ring: string }> = {
      blue: { border: isSelected ? 'border-blue-500' : 'border-slate-200', bg: isSelected ? 'bg-blue-50' : 'bg-white', ring: 'ring-blue-500' },
      purple: { border: isSelected ? 'border-purple-500' : 'border-slate-200', bg: isSelected ? 'bg-purple-50' : 'bg-white', ring: 'ring-purple-500' },
      slate: { border: isSelected ? 'border-slate-500' : 'border-slate-200', bg: isSelected ? 'bg-slate-50' : 'bg-white', ring: 'ring-slate-500' },
    }
    return colors[color] || colors.slate
  }

  return (
    <>
      <Header />
      <main className={`min-h-screen bg-slate-50 pt-20 ${isRTL ? 'rtl' : ''}`}>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          {/* Back Link */}
          <Link
            href="/foerderantrag"
            className={`inline-flex items-center gap-2 text-slate-600 hover:text-slate-900 mb-6 ${isRTL ? 'flex-row-reverse' : ''}`}
          >
            <svg className={`w-4 h-4 ${isRTL ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            {t('fa_back_overview')}
          </Link>

          {/* Header */}
          <div className="mb-8">
            <h1 className="text-2xl font-bold text-slate-900">{t('fa_new_title')}</h1>
            <p className="mt-2 text-slate-600">{t('fa_new_subtitle')}</p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-8">
            {/* Preset Selection */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-3">
                {t('fa_preset_label')}
              </label>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {presets.map((preset) => {
                  const isSelected = formData.preset_id === preset.id
                  const colors = getPresetColorClasses(preset.color, isSelected)
                  return (
                    <button
                      key={preset.id || 'custom'}
                      type="button"
                      onClick={() => setFormData(prev => ({
                        ...prev,
                        preset_id: preset.id,
                        title: preset.id ? `${t(preset.nameKey)} - ${new Date().toLocaleDateString('de-DE')}` : prev.title,
                      }))}
                      className={`relative p-4 rounded-xl border-2 text-left transition-all ${colors.border} ${colors.bg} ${isSelected ? 'ring-2 ' + colors.ring : ''}`}
                    >
                      {isSelected && (
                        <div className={`absolute top-2 ${isRTL ? 'left-2' : 'right-2'}`}>
                          <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                          </svg>
                        </div>
                      )}
                      <h3 className="font-semibold text-slate-900">{t(preset.nameKey)}</h3>
                      <p className="text-sm text-slate-500 mt-1">{t(preset.descKey)}</p>
                      <p className="text-sm font-medium text-slate-700 mt-2">{t(preset.budgetKey)}</p>
                    </button>
                  )
                })}
              </div>
            </div>

            {/* Funding Program */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-3">
                {t('fa_program_label')} *
              </label>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {fundingPrograms.map((program) => (
                  <label
                    key={program.value}
                    className={`relative flex items-start p-4 rounded-xl border-2 cursor-pointer transition-all ${
                      formData.funding_program === program.value
                        ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500'
                        : 'border-slate-200 bg-white hover:border-slate-300'
                    }`}
                  >
                    <input
                      type="radio"
                      name="funding_program"
                      value={program.value}
                      checked={formData.funding_program === program.value}
                      onChange={(e) => setFormData(prev => ({ ...prev, funding_program: e.target.value as FundingProgram }))}
                      className="sr-only"
                    />
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        <span className="font-medium text-slate-900">{t(program.labelKey)}</span>
                        {formData.funding_program === program.value && (
                          <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                          </svg>
                        )}
                      </div>
                    </div>
                  </label>
                ))}
              </div>
            </div>

            {/* Federal State */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-3">
                {t('fa_state_label')} *
              </label>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                {federalStates.map((state) => (
                  <button
                    key={state.value}
                    type="button"
                    onClick={() => setFormData(prev => ({ ...prev, federal_state: state.value as FederalState }))}
                    className={`px-4 py-3 rounded-lg border-2 text-sm font-medium transition-all ${
                      formData.federal_state === state.value
                        ? 'border-blue-500 bg-blue-50 text-blue-700'
                        : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300'
                    }`}
                  >
                    {state.label}
                  </button>
                ))}
              </div>
              {formData.federal_state === 'NI' && (
                <p className="mt-2 text-sm text-slate-500">{t('fa_ni_hint')}</p>
              )}
            </div>

            {/* Project Title */}
            <div>
              <label htmlFor="title" className="block text-sm font-medium text-slate-700 mb-2">
                {t('fa_project_title_label')} *
              </label>
              <input
                type="text"
                id="title"
                value={formData.title}
                onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
                placeholder={t('fa_project_title_label')}
                className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                maxLength={200}
              />
            </div>

            {/* Error */}
            {error && (
              <div className="p-4 bg-red-50 border border-red-200 rounded-xl text-red-700">
                {error}
              </div>
            )}

            {/* Actions */}
            <div className={`flex items-center justify-between pt-4 border-t border-slate-200 ${isRTL ? 'flex-row-reverse' : ''}`}>
              <Link
                href="/foerderantrag"
                className="px-6 py-3 text-slate-600 hover:text-slate-900 font-medium"
              >
                {t('fa_cancel')}
              </Link>
              <button
                type="submit"
                disabled={isSubmitting}
                className={`px-8 py-3 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors ${isRTL ? 'flex-row-reverse' : ''}`}
              >
                {isSubmitting ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                    {t('fa_wizard_saving')}
                  </>
                ) : (
                  <>
                    {t('fa_submit')}
                    <svg className={`w-4 h-4 ${isRTL ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                  </>
                )}
              </button>
            </div>
          </form>

          {/* Help Box */}
          <div className="mt-8 bg-amber-50 border border-amber-200 rounded-xl p-6">
            <div className={`flex gap-4 ${isRTL ? 'flex-row-reverse' : ''}`}>
              <div className="flex-shrink-0">
                <svg className="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold text-amber-800">{t('fa_ai_hint_title')}</h3>
                <p className="mt-1 text-sm text-amber-700">{t('fa_ai_hint_text')}</p>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </>
  )
}