'use client'

import React from 'react'
import { useCompanyProfileForm } from './_hooks/useCompanyProfileForm'
import { STEP_EXPLANATIONS } from './_components/constants'
import { StepBasicInfo } from './_components/StepBasicInfo'
import { StepBusinessModel } from './_components/StepBusinessModel'
import { StepCompanySize } from './_components/StepCompanySize'
import { StepLocations } from './_components/StepLocations'
import { StepDataProtection } from './_components/StepDataProtection'
import { StepLegalFramework } from './_components/StepLegalFramework'
import { StepMachineBuilder } from './_components/StepMachineBuilder'
import { ProfileSummary } from './_components/ProfileSummary'

export default function CompanyProfilePage() {
  const {
    formData, updateFormData, currentStep, setCurrentStep,
    wizardSteps, showMachineBuilderStep, isLastStep,
    draftSaveStatus, canProceed, handleNext, handleBack,
    handleDeleteProfile, showDeleteConfirm, setShowDeleteConfirm,
    isDeleting, goToNextStep,
  } = useCompanyProfileForm()

  // Summary view (step 99)
  if (currentStep === 99) {
    return (
      <ProfileSummary
        formData={formData}
        onEdit={() => setCurrentStep(1)}
        onContinue={() => goToNextStep()}
      />
    )
  }

  // Wizard view (steps 1-7)
  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-6xl mx-auto px-4">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Unternehmensprofil</h1>
          <p className="text-gray-600 mt-2">
            Helfen Sie uns, Ihr Unternehmen zu verstehen, damit wir die relevanten Regulierungen
            identifizieren k&ouml;nnen.
          </p>
        </div>

        {/* Progress Steps */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            {wizardSteps.map((step, index) => (
              <React.Fragment key={step.id}>
                <div className="flex items-center">
                  <div
                    className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium ${
                      step.id < currentStep
                        ? 'bg-purple-600 text-white'
                        : step.id === currentStep
                        ? 'bg-purple-100 text-purple-600 border-2 border-purple-600'
                        : 'bg-gray-100 text-gray-400'
                    }`}
                  >
                    {step.id < currentStep ? (
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                      </svg>
                    ) : step.id}
                  </div>
                  <div className="ml-3 hidden sm:block">
                    <div className={`text-sm font-medium ${step.id <= currentStep ? 'text-gray-900' : 'text-gray-400'}`}>
                      {step.name}
                    </div>
                  </div>
                </div>
                {index < wizardSteps.length - 1 && (
                  <div className={`flex-1 h-0.5 mx-4 ${step.id < currentStep ? 'bg-purple-600' : 'bg-gray-200'}`} />
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Content */}
        <div>
          <div>
            <div className="bg-white rounded-xl border border-gray-200 p-8">
              <div className="mb-6">
                <h2 className="text-xl font-semibold text-gray-900">
                  {(wizardSteps.find(s => s.id === currentStep) || wizardSteps[0]).name}
                </h2>
                <p className="text-gray-500">{(wizardSteps.find(s => s.id === currentStep) || wizardSteps[0]).description}</p>
                {STEP_EXPLANATIONS[currentStep] && (
                  <p className="text-sm text-blue-600 mt-2">{STEP_EXPLANATIONS[currentStep]}</p>
                )}
              </div>

              {currentStep === 1 && <StepBasicInfo data={formData} onChange={updateFormData} />}
              {currentStep === 2 && <StepBusinessModel data={formData} onChange={updateFormData} />}
              {currentStep === 3 && <StepCompanySize data={formData} onChange={updateFormData} />}
              {currentStep === 4 && <StepLocations data={formData} onChange={updateFormData} />}
              {currentStep === 5 && <StepDataProtection data={formData} onChange={updateFormData} />}
              {currentStep === 6 && <StepLegalFramework data={formData} onChange={updateFormData} />}
              {currentStep === 7 && showMachineBuilderStep && <StepMachineBuilder data={formData} onChange={updateFormData} />}

              {/* Navigation */}
              <div className="flex justify-between items-center mt-8 pt-6 border-t border-gray-200">
                <button
                  onClick={handleBack}
                  disabled={currentStep === 1}
                  className="px-6 py-3 text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Zur&uuml;ck
                </button>
                {draftSaveStatus !== 'idle' && (
                  <span className={`text-xs px-3 py-1 rounded-full ${
                    draftSaveStatus === 'saving' ? 'text-gray-500 bg-gray-100' :
                    draftSaveStatus === 'saved' ? 'text-green-600 bg-green-50' :
                    'text-red-600 bg-red-50'
                  }`}>
                    {draftSaveStatus === 'saving' && 'Speichern...'}
                    {draftSaveStatus === 'saved' && '\u2713 Gespeichert'}
                    {draftSaveStatus === 'error' && 'Speichern fehlgeschlagen'}
                  </span>
                )}
                <button
                  onClick={handleNext}
                  disabled={!canProceed()}
                  className="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {isLastStep ? 'Profil speichern & weiter' : 'Weiter'}
                </button>
              </div>
            </div>
          </div>

          {/* Delete Confirmation Modal */}
          {showDeleteConfirm && (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
              <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Profil l&ouml;schen?</h3>
                <p className="text-sm text-gray-600 mb-6">
                  Alle gespeicherten Unternehmensdaten werden unwiderruflich gel&ouml;scht (DSGVO Art. 17).
                  Diese Aktion kann nicht r&uuml;ckg&auml;ngig gemacht werden.
                </p>
                <div className="flex justify-end gap-3">
                  <button onClick={() => setShowDeleteConfirm(false)} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
                    Abbrechen
                  </button>
                  <button onClick={handleDeleteProfile} disabled={isDeleting} className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50">
                    {isDeleting ? 'L\u00F6sche...' : 'Endg\u00FCltig l\u00F6schen'}
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}