'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';

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

export function ContactStep({ state, updateState }: ContactStepProps) {
  return (
    <div className="space-y-12">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <Reveal width="100%" delay={0.1}>
          <div className="space-y-4">
            <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Ihr Name</label>
            <div className="relative group">
              <div className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-slate-900 transition-colors">
                <User size={24} />
              </div>
              <input 
                type="text" 
                placeholder="Max Mustermann" 
                required 
                value={state.name} 
                onChange={(e) => updateState({ name: e.target.value })} 
                className="w-full p-8 pl-16 bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl shadow-sm focus:shadow-2xl" 
              />
            </div>
          </div>
        </Reveal>

        <Reveal width="100%" delay={0.1}>
          <div className="space-y-4">
            <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Ihre Email</label>
            <div className="relative group">
              <div className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-slate-900 transition-colors">
                <Mail size={24} />
              </div>
              <input 
                type="email" 
                placeholder="max@beispiel.de" 
                required 
                value={state.email} 
                onChange={(e) => updateState({ email: e.target.value })} 
                className="w-full p-8 pl-16 bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl shadow-sm focus:shadow-2xl" 
              />
            </div>
          </div>
        </Reveal>
      </div>

      <Reveal width="100%" delay={0.2}>
        <div className="space-y-4">
          <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Ihre Rolle</label>
          <div className="relative group">
            <div className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-slate-900 transition-colors">
              <Briefcase size={24} />
            </div>
            <input 
              type="text" 
              placeholder="z.B. CEO, Marketing Manager..." 
              value={state.role} 
              onChange={(e) => updateState({ role: e.target.value })} 
              className="w-full p-8 pl-16 bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl shadow-sm focus:shadow-2xl" 
            />
          </div>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.3}>
        <div className="space-y-4">
          <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Nachricht</label>
          <div className="relative group">
            <div className="absolute left-6 top-10 text-slate-300 group-focus-within:text-slate-900 transition-colors">
              <MessageSquare size={24} />
            </div>
            <textarea 
              placeholder="Erzählen Sie mir kurz von Ihrem Projekt..." 
              value={state.message} 
              onChange={(e) => updateState({ message: e.target.value })} 
              rows={5} 
              className="w-full p-8 pl-16 bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 resize-none text-xl shadow-sm focus:shadow-2xl" 
            />
          </div>
        </div>
      </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 shadow-inner' : '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 shadow-sm 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>
  );
}
