"use client";

import { motion } from "framer-motion";
import { cn } from "../../utils/cn";
import { Reveal } from "../Reveal";
import { Mail, MessageSquare, ArrowLeft, Send } from "lucide-react";

interface DirectMessageFlowProps {
  name: string;
  email: string;
  setEmail: (val: string) => void;
  company: string;
  message: string;
  setMessage: (val: string) => void;
  onBack: () => void;
  onSubmit: () => void;
  isSubmitting: boolean;
}

export const DirectMessageFlow = ({
  name,
  email,
  setEmail,
  company,
  message,
  setMessage,
  onBack,
  onSubmit,
  isSubmitting,
}: DirectMessageFlowProps) => {
  return (
    <div className="w-full max-w-3xl mx-auto px-4 py-12">
      <Reveal width="100%" delay={0.1}>
        <button
          onClick={onBack}
          className="flex items-center gap-2 text-[10px] font-mono font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors mb-12"
        >
          <ArrowLeft size={14} /> Zurück zur Auswahl
        </button>
      </Reveal>

      <div className="space-y-12">
        <Reveal width="100%" delay={0.2}>
          <div className="space-y-2">
            <span className="text-[10px] font-mono text-green-600 uppercase tracking-[0.3em] font-bold">
              DIREKTNACHRICHT // MODUS_AKTIVIERT
            </span>
            <h2 className="text-3xl font-bold tracking-tight text-slate-900">
              Wie kann ich helfen, {name.split(" ")[0]}?
            </h2>
            <p className="text-slate-500 font-medium">
              Sende mir eine Nachricht zu {company || "deinem Projekt"} und ich
              melde mich in Kürze.
            </p>
          </div>
        </Reveal>

        <div className="space-y-8">
          {/* Email Input */}
          <Reveal width="100%" delay={0.3} direction="up">
            <div className="space-y-4">
              <label className="flex items-center gap-2 text-[10px] font-mono font-bold uppercase tracking-widest text-slate-400">
                <Mail size={12} /> Rückantwort an
              </label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="ihre@email.de"
                className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-lg font-medium focus:outline-none focus:ring-2 focus:ring-slate-900/5 focus:border-slate-900 transition-all"
              />
            </div>
          </Reveal>

          {/* Message Input */}
          <Reveal width="100%" delay={0.4} direction="up">
            <div className="space-y-4">
              <label className="flex items-center gap-2 text-[10px] font-mono font-bold uppercase tracking-widest text-slate-400">
                <MessageSquare size={12} /> Ihre Nachricht
              </label>
              <textarea
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="Beschreiben Sie kurz Ihr Anliegen..."
                rows={6}
                className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-lg font-medium focus:outline-none focus:ring-2 focus:ring-slate-900/5 focus:border-slate-900 transition-all resize-none"
              />
            </div>
          </Reveal>

          {/* Submit Button */}
          <Reveal width="100%" delay={0.5} direction="up">
            <button
              onClick={onSubmit}
              disabled={isSubmitting || !email || !message}
              className={cn(
                "group relative w-full py-5 rounded-2xl font-bold text-lg transition-all duration-300 flex items-center justify-center gap-3 overflow-hidden",
                isSubmitting || !email || !message
                  ? "bg-slate-100 text-slate-400 cursor-not-allowed"
                  : "bg-slate-900 text-white shadow-xl hover:shadow-2xl hover:-translate-y-1 active:scale-[0.98]",
              )}
            >
              <div className="absolute inset-0 bg-gradient-to-r from-green-400/0 via-green-400/10 to-green-400/0 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-full transition-all duration-1000" />

              {isSubmitting ? (
                <>
                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                  <span>Übertragung läuft...</span>
                </>
              ) : (
                <>
                  <span>Nachricht absenden</span>
                  <Send
                    size={20}
                    className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"
                  />
                </>
              )}
            </button>
          </Reveal>
        </div>
      </div>
    </div>
  );
};
