"use client";

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

interface ContactGatewayProps {
  name: string;
  setName: (val: string) => void;
  company: string;
  setCompany: (val: string) => void;
  projectType: ProjectType;
  setProjectType: (val: ProjectType) => void;
  onChooseConfigurator: () => void;
  onChooseDirectMessage: () => 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">
      <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>
      <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 ContactGateway = ({
  name,
  setName,
  company,
  setCompany,
  onChooseConfigurator,
  onChooseDirectMessage,
}: ContactGatewayProps) => {
  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] text-left w-full px-4 max-w-5xl mx-auto space-y-24">
      {/* Identity 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">
            IDENTIFIKATION // SCHRITT_00
          </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" />
            <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>

      {/* Path Selection */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
        {/* Configurator Path */}
        <Reveal width="100%" delay={0.3} direction="up">
          <button
            onClick={onChooseConfigurator}
            disabled={!name}
            className={cn(
              "group relative flex flex-col items-start p-8 rounded-3xl border text-left transition-all duration-500 overflow-hidden",
              name
                ? "bg-slate-900 border-slate-800 text-white shadow-2xl hover:-translate-y-2"
                : "bg-slate-50 border-slate-100 text-slate-400 cursor-not-allowed opacity-60",
            )}
          >
            <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
              <Settings2 size={120} />
            </div>

            <Settings2 size={24} className="mb-6 text-green-400" />
            <h3 className="text-2xl font-bold mb-2 tracking-tight">
              System-Konfigurator
            </h3>
            <p className="text-sm text-slate-400 font-medium mb-8 max-w-[280px]">
              Konfigurieren Sie Ihr Projekt modular für eine präzise
              Aufwandsschätzung.
            </p>

            <div className="mt-auto flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest font-bold">
              <span>Sitzung starten</span>
              <ArrowRight
                size={14}
                className="group-hover:translate-x-1 transition-transform"
              />
            </div>

            {!name && (
              <div className="absolute inset-0 bg-slate-50/60 backdrop-blur-[6px] z-20" />
            )}
          </button>
        </Reveal>

        {/* Direct Mail Path */}
        <Reveal width="100%" delay={0.4} direction="up">
          <button
            onClick={onChooseDirectMessage}
            disabled={!name}
            className={cn(
              "group relative flex flex-col items-start p-8 rounded-3xl border text-left transition-all duration-500 overflow-hidden",
              name
                ? "bg-white border-slate-200 text-slate-900 hover:-translate-y-2 hover:border-slate-400 hover:shadow-xl"
                : "bg-slate-50 border-slate-100 text-slate-400 cursor-not-allowed opacity-60",
            )}
          >
            <MessageSquareText
              size={24}
              className={cn(
                "mb-6 transition-colors",
                name ? "text-slate-900" : "text-slate-300",
              )}
            />
            <h3 className="text-2xl font-bold mb-2 tracking-tight">
              Direktnachricht
            </h3>
            <p
              className={cn(
                "text-sm font-medium mb-8 max-w-[280px]",
                name ? "text-slate-500" : "text-slate-400",
              )}
            >
              Kurze Frage oder spezifisches Anliegen? Senden Sie mir direkt
              Informationen.
            </p>

            <div
              className={cn(
                "mt-auto flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest font-bold transition-colors",
                name
                  ? "text-slate-400 group-hover:text-slate-900"
                  : "text-slate-300",
              )}
            >
              <span>Formular öffnen</span>
              <ArrowRight
                size={14}
                className="group-hover:translate-x-1 transition-transform"
              />
            </div>

            {!name && (
              <div className="absolute inset-0 bg-slate-50/60 backdrop-blur-[6px] z-20" />
            )}
          </button>
        </Reveal>
      </div>
    </div>
  );
};
