"use client";

import { useState } from 'react';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ButtonHoverMagnetic from "@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic";

export default function VsoUploadPage() {
  const [step, setStep] = useState(1);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const steps = [
    "Persoonlijke gegevens", "Gegevens werkgever", "Salaris en arbeidsvoorwaarden", 
    "Reden van beëindiging", "Ziekte en arbeidsongeschiktheid", "De voorgestelde VSO", 
    "Wat wil jij bereiken", "Upload documenten", "Controle en akkoord"
  ];

  const handleSubmit = () => {
    setIsSubmitted(true);
  };

  const themeProps = {
    defaultButtonVariant: "bounce-effect" as const,
    defaultTextAnimation: "entrance-slide" as const,
    borderRadius: "rounded" as const,
    contentWidth: "medium" as const,
    sizing: "medium" as const,
    background: "circleGradient" as const,
    cardStyle: "glass-elevated" as const,
    primaryButtonStyle: "gradient" as const,
    secondaryButtonStyle: "glass" as const,
    headingFontWeight: "normal" as const,
  };

  if (isSubmitted) {
    return (
      <ThemeProvider {...themeProps}>
        <div className="min-h-screen flex items-center justify-center p-8">
          <div className="max-w-md text-center">
            <h1 className="text-3xl font-bold mb-4">Bedankt!</h1>
            <p>Je aanvraag is verzonden. We nemen binnen 24 uur contact met je op.</p>
          </div>
        </div>
      </ThemeProvider>
    );
  }

  return (
    <ThemeProvider {...themeProps}>
      <div className="max-w-3xl mx-auto py-20 px-6">
        <div className="mb-8">
          <div className="h-2 bg-gray-200 rounded-full">
            <div className="h-2 bg-primary-cta rounded-full" style={{ width: `${(step / steps.length) * 100}%` }}></div>
          </div>
          <p className="mt-2 text-sm">Stap {step} van {steps.length}: {steps[step - 1]}</p>
        </div>

        <div className="bg-card p-8 rounded-lg">
          <h2 className="text-2xl mb-6">{steps[step - 1]}</h2>
          <div className="space-y-4">
            {step === 8 ? (
              <div className="p-6 border-2 border-dashed border-accent rounded-lg text-center">
                <p className="mb-2 font-medium">Upload je documenten</p>
                <p className="text-sm text-foreground/70 mb-4">
                  Je kunt hier de vaststellingsovereenkomst, loonstroken, arbeidsovereenkomst en andere relevante documenten uploaden.
                </p>
                <input type="file" multiple className="w-full p-3 border rounded" />
              </div>
            ) : (
              <input className="w-full p-3 border rounded" placeholder="Vul hier je gegevens in..." />
            )}
          </div>
          <div className="mt-8 flex gap-4">
            {step > 1 && <ButtonHoverMagnetic text="Vorige" onClick={() => setStep(step - 1)} />}
            {step < steps.length ? (
              <ButtonHoverMagnetic text="Volgende" onClick={() => setStep(step + 1)} />
            ) : (
              <ButtonHoverMagnetic text="Versturen" onClick={handleSubmit} />
            )}
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}