'use client';

import * as React from 'react';
import { FormState } from '../types';
import { FileText, Upload, X, User, Mail, Briefcase, MessageSquare } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Reveal } from '../../Reveal';
import { Input } from '../components/Input';

interface ContactStepProps {
  state: FormState;
  updateState: (updates: Partial<FormState>) => void;
}

export function ContactStep({ state, updateState }: ContactStepProps) {
  return (
    <div className="space-y-12">
      <Reveal width="100%" delay={0.05}>
        <div className="p-8 bg-slate-50 text-slate-900 rounded-[2.5rem] mb-8 border border-slate-100">
          <h4 className="text-2xl font-bold mb-2">Fast geschafft! 🚀</h4>
          <p className="text-slate-500 text-lg">
            Ich habe alle Details für das Projekt von <span className="text-slate-900 font-bold">{state.companyName || 'Ihrem Unternehmen'}</span> erhalten.
            Hinterlassen Sie mir noch Ihre Kontaktdaten, damit ich Ihnen ein konkretes Angebot erstellen kann.
          </p>
        </div>
      </Reveal>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <Reveal width="100%" delay={0.1}>
          <div className="relative">
            <Input
              label="Ihr Name"
              icon={User}
              placeholder="Max Mustermann"
              required
              value={state.name}
              onChange={(e) => updateState({ name: e.target.value })}
            />
            <div className="absolute top-0 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
              Erforderlich
            </div>
          </div>
        </Reveal>

        <Reveal width="100%" delay={0.1}>
          <div className="relative">
            <Input
              label="Ihre Email"
              icon={Mail}
              type="email"
              placeholder="max@beispiel.de"
              required
              value={state.email}
              onChange={(e) => updateState({ email: e.target.value })}
            />
            <div className="absolute top-0 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
              Erforderlich
            </div>
          </div>
        </Reveal>
      </div>

      <Reveal width="100%" delay={0.2}>
        <Input
          label="Ihre Rolle"
          icon={Briefcase}
          placeholder="z.B. CEO, Marketing Manager..."
          value={state.role}
          onChange={(e) => updateState({ role: e.target.value })}
        />
      </Reveal>

      <Reveal width="100%" delay={0.3}>
        <Input
          label="Nachricht"
          icon={MessageSquare}
          isTextArea
          rows={5}
          placeholder="Erzählen Sie mir kurz von Ihrem Projekt..."
          value={state.message}
          onChange={(e) => updateState({ message: e.target.value })}
        />
      </Reveal>
      
      <Reveal width="100%" delay={0.4}>
        <div className="space-y-6">
          <p className="text-lg font-bold text-slate-900 ml-2">Dateien hochladen (optional)</p>
          <div 
            className={`relative group border-2 border-dashed rounded-[3rem] p-12 transition-all duration-500 flex flex-col items-center justify-center gap-6 cursor-pointer min-h-[250px] ${
              state.contactFiles.length > 0 ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-400 bg-white hover:shadow-xl'
            }`}
            onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
            onDrop={(e) => {
              e.preventDefault();
              e.stopPropagation();
              const files = Array.from(e.dataTransfer.files);
              if (files.length > 0) updateState({ contactFiles: [...state.contactFiles, ...files] });
            }}
            onClick={() => document.getElementById('contact-upload')?.click()}
          >
            <input id="contact-upload" type="file" multiple className="hidden" onChange={(e) => {
              const files = e.target.files ? Array.from(e.target.files) : [];
              if (files.length > 0) updateState({ contactFiles: [...state.contactFiles, ...files] });
            }} />
            
            <AnimatePresence mode="wait">
              {state.contactFiles.length > 0 ? (
                <motion.div 
                  key="files"
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.95 }}
                  className="w-full space-y-4"
                >
                  {state.contactFiles.map((file, idx) => (
                    <motion.div 
                      key={`${file.name}-${idx}`}
                      initial={{ opacity: 0, x: -10 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: idx * 0.05 }}
                      className="flex items-center justify-between p-5 bg-white border border-slate-100 rounded-2xl group/file"
                    >
                      <div className="flex items-center gap-4 text-slate-900">
                        <div className="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-400 group-hover/file:text-slate-900 transition-colors">
                          <FileText size={20} />
                        </div>
                        <div className="flex flex-col">
                          <span className="font-bold text-base truncate max-w-[250px]">{file.name}</span>
                          <span className="text-[10px] text-slate-400 uppercase font-bold">{(file.size / 1024 / 1024).toFixed(2)} MB</span>
                        </div>
                      </div>
                      <motion.button 
                        whileHover={{ scale: 1.1, backgroundColor: '#fee2e2', color: '#ef4444' }}
                        whileTap={{ scale: 0.9 }}
                        type="button" 
                        onClick={(e) => { 
                          e.stopPropagation(); 
                          updateState({ contactFiles: state.contactFiles.filter((_, i) => i !== idx) }); 
                        }} 
                        className="p-2 bg-slate-50 text-slate-400 rounded-full transition-colors focus:outline-none"
                      >
                        <X size={20} />
                      </motion.button>
                    </motion.div>
                  ))}
                  <p className="text-xs text-slate-400 text-center mt-8 font-medium">Klicken oder ziehen, um weitere Dateien hinzuzufügen</p>
                </motion.div>
              ) : (
                <motion.div 
                  key="empty"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  className="flex flex-col items-center gap-6"
                >
                  <div className="w-20 h-20 bg-slate-50 rounded-[2rem] flex items-center justify-center text-slate-400 group-hover:text-slate-900 group-hover:scale-110 transition-all duration-500">
                    <Upload size={32} />
                  </div>
                  <div className="text-center">
                    <p className="text-xl font-bold text-slate-900">Dateien hierher ziehen</p>
                    <p className="text-lg text-slate-500 mt-1">oder klicken zum Auswählen</p>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </Reveal>
    </div>
  );
}