"use client";

import { motion } from "framer-motion";
import { cn } from "../../../utils/cn";
import { ProjectType } from "../types";
import { Reveal } from "../../Reveal";
import { MessageSquareText, ArrowRight } from "lucide-react";

interface NarrativeInputProps {
  name: string;
  setName: (val: string) => void;
  company: string;
  setCompany: (val: string) => void;
  projectType: ProjectType;
  setProjectType: (val: ProjectType) => void;
  onToggleFreeText?: () => void;
}

const AutoInput = ({
  value,
  onChange,
  placeholder,
  autoFocus,
}: {
  value: string;
  onChange: (val: string) => void;
  placeholder: string;
  autoFocus?: boolean;
}) => {
  return (
    <div className="inline-grid items-center relative group mx-1">
      {/* Invisible span to dictate width */}
      <span className="col-start-1 row-start-1 opacity-0 pointer-events-none whitespace-pre border-b-2 border-transparent px-2 py-1 text-2xl md:text-5xl font-bold tracking-tight min-w-[140px]">
        {value || placeholder}
      </span>

      {/* Actual Input */}
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        autoFocus={autoFocus}
        className={cn(
          "col-start-1 row-start-1 w-full h-full bg-transparent focus:outline-none px-2 py-1",
          "text-2xl md:text-5xl font-bold tracking-tight transition-all duration-300",
          "border-b-2",
          value
            ? "text-slate-900 border-slate-900"
            : "text-slate-300 border-slate-100 placeholder:text-slate-200 focus:border-green-500 focus:placeholder:text-slate-300",
        )}
      />
    </div>
  );
};

export const NarrativeInput = ({
  name,
  setName,
  company,
  setCompany,
  projectType,
  setProjectType,
  onToggleFreeText,
}: NarrativeInputProps) => {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] text-left w-full px-4 max-w-5xl mx-auto">
      <div className="w-full space-y-20">
        {/* Header Section */}
        <Reveal width="100%" delay={0.1}>
          <div className="space-y-4">
            <span className="text-[10px] font-mono text-green-600 uppercase tracking-[0.3em] font-bold">
              INITIALISIERUNG // SCHRITT_01
            </span>
            <div className="flex flex-wrap items-baseline gap-y-6 text-slate-900">
              <span className="text-2xl md:text-5xl font-medium text-slate-400">
                Hi, ich bin
              </span>
              <AutoInput
                value={name}
                onChange={setName}
                placeholder="Ihr Name"
                autoFocus
              />
              <span className="text-2xl md:text-5xl font-medium text-slate-400">
                von
              </span>
              <AutoInput
                value={company}
                onChange={setCompany}
                placeholder="Firma / Projekt"
              />
            </div>
          </div>
        </Reveal>

        {/* Project Focus Section */}
        <Reveal width="100%" delay={0.3} direction="up">
          <div className="space-y-8 p-10 bg-slate-50/50 rounded-3xl border border-slate-100">
            <div className="flex items-center gap-4">
              <span className="text-[10px] font-mono text-slate-400 uppercase tracking-widest font-bold">
                MISSION_OBJECTIVE
              </span>
              <div className="h-px bg-slate-200 flex-1" />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {(["website", "web-app", "ecommerce"] as ProjectType[]).map(
                (type) => {
                  const isActive = projectType === type;
                  const labels = {
                    website: "Corpo Website",
                    "web-app": "Web Application",
                    ecommerce: "E-Commerce",
                  };
                  return (
                    <button
                      key={type}
                      onClick={() => setProjectType(type)}
                      className={cn(
                        "relative flex flex-col items-start p-6 rounded-2xl border transition-all duration-300",
                        isActive
                          ? "bg-white border-slate-900 shadow-xl shadow-slate-200 -translate-y-1"
                          : "bg-transparent border-slate-200 text-slate-500 hover:border-slate-300 hover:bg-white",
                      )}
                    >
                      <span
                        className={cn(
                          "text-lg font-bold transition-colors",
                          isActive ? "text-slate-900" : "text-slate-400",
                        )}
                      >
                        {labels[type]}
                      </span>
                      <span className="text-xs font-mono mt-2 opacity-50 uppercase tracking-wider">
                        {isActive ? "[ AKTIVIERT ]" : "Auswählen"}
                      </span>
                      {isActive && (
                        <motion.div
                          layoutId="active-indicator"
                          className="absolute top-4 right-4 w-2 h-2 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]"
                        />
                      )}
                    </button>
                  );
                },
              )}
            </div>
          </div>
        </Reveal>

        {/* Footer / Alternative Action */}
        <Reveal width="100%" delay={0.5} direction="up">
          <div className="flex flex-col md:flex-row items-center justify-between gap-8 pt-8 border-t border-slate-100">
            <p className="text-sm text-slate-400 font-medium max-w-sm">
              Nutzen Sie unseren Konfigurator für eine präzise Aufwandsschätzung
              oder senden Sie uns direkt eine Nachricht.
            </p>
            <button
              onClick={onToggleFreeText}
              className="group flex items-center gap-3 px-6 py-3 rounded-full bg-white border border-slate-200 text-slate-600 text-sm font-bold hover:border-slate-900 hover:text-slate-900 transition-all duration-300"
            >
              <MessageSquareText
                size={18}
                className="text-slate-400 group-hover:text-slate-900"
              />
              <span>Direktnachricht senden</span>
              <ArrowRight
                size={16}
                className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all"
              />
            </button>
          </div>
        </Reveal>
      </div>
    </div>
  );
};
