import { useEffect, useState } from 'react';
import { useWizardStore } from './store/wizardStore';
import CategorySelection from './pages/Steps/CategorySelection';
import OperationSelection from './pages/Steps/OperationSelection';
import AttributeForm from './pages/Steps/AttributeForm';
import PhotoUploadStep from './pages/Steps/PhotoUploadStep';
import SummaryStep from './pages/Steps/SummaryStep';
import { wizardService } from './services/wizardService';
import type { AttributeDefinition } from './types';

function App() {
  const { step, selectedCategory } = useWizardStore();
  const [definitions, setDefinitions] = useState<AttributeDefinition[]>([]);

  useEffect(() => {
    if (selectedCategory) {
      wizardService.getAttributes(selectedCategory.id).then(setDefinitions);
    }
  }, [selectedCategory]);

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
      <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
        <div className="max-w-3xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="font-bold text-xl tracking-tight text-brand-600">
            SIG-CM <span className="text-slate-400 font-normal text-sm ml-2">Wizard de Publicación</span>
          </div>
          <div className="text-sm font-medium text-slate-500">
            Paso {step} de 5
          </div>
        </div>
        {/* Progress Bar */}
        <div className="h-1 bg-slate-100 w-full">
          <div
            className="h-full bg-brand-500 transition-all duration-500 ease-out"
            style={{ width: `${(step / 5) * 100}%` }}
          />
        </div>
      </header>

      <main className="max-w-3xl mx-auto p-4 py-8">
        {step === 1 && <CategorySelection />}
        {step === 2 && <OperationSelection />}
        {step === 3 && <AttributeForm />}
        {step === 4 && <PhotoUploadStep />}
        {step === 5 && <SummaryStep definitions={definitions} />}
      </main>
    </div>
  );
}

export default App;