"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>
  );
}
