'use client'

import { useState, useMemo } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft, Eye, Send } from 'lucide-react'
import { DEFAULT_MESSAGE, DEFAULT_CLOSING, getDefaultGreeting } from '@/lib/email-templates'

export default function NewInvestorPage() {
  const router = useRouter()
  const [email, setEmail] = useState('')
  const [name, setName] = useState('')
  const [company, setCompany] = useState('')
  const [greeting, setGreeting] = useState('')
  const [message, setMessage] = useState(DEFAULT_MESSAGE)
  const [closing, setClosing] = useState(DEFAULT_CLOSING)
  const [error, setError] = useState('')
  const [submitting, setSubmitting] = useState(false)

  const effectiveGreeting = greeting || getDefaultGreeting(name || null)
  const ttl = process.env.NEXT_PUBLIC_MAGIC_LINK_TTL_HOURS || '72'

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError('')
    setSubmitting(true)
    try {
      const res = await fetch('/api/admin/invite', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email,
          name,
          company,
          greeting: effectiveGreeting,
          message,
          closing,
        }),
      })
      if (res.ok) {
        router.push('/pitch-admin/investors')
        router.refresh()
      } else {
        const data = await res.json().catch(() => ({}))
        setError(data.error || 'Invite failed')
      }
    } catch {
      setError('Network error')
    } finally {
      setSubmitting(false)
    }
  }

  const closingHtml = useMemo(() => closing.replace(/\n/g, '<br>'), [closing])

  return (
    <div className="max-w-5xl">
      <Link
        href="/pitch-admin/investors"
        className="inline-flex items-center gap-2 text-sm text-white/50 hover:text-white/80 mb-6"
      >
        <ArrowLeft className="w-4 h-4" /> Back to investors
      </Link>

      <h1 className="text-2xl font-semibold text-white mb-2">Investor einladen</h1>
      <p className="text-sm text-white/50 mb-6">
        Der Investor erhaelt eine Email mit einem persoenlichen Magic Link (einmalig, verfaellt nach {ttl}h).
      </p>

      <div className="grid lg:grid-cols-2 gap-6">
        {/* Left: Form */}
        <form
          onSubmit={handleSubmit}
          className="bg-white/[0.04] border border-white/[0.08] rounded-2xl p-6 space-y-4 self-start"
        >
          {/* Email */}
          <div>
            <label htmlFor="email" className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">
              Email <span className="text-rose-400">*</span>
            </label>
            <input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
              placeholder="investor@example.com"
            />
          </div>

          {/* Name */}
          <div>
            <label htmlFor="name" className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">
              Name <span className="text-rose-400">*</span>
            </label>
            <input
              id="name"
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              className="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
              placeholder="Dr. Max Mustermann"
            />
          </div>

          {/* Company (optional) */}
          <div>
            <label htmlFor="company" className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">
              Unternehmen <span className="text-white/30 text-[10px] normal-case">(optional)</span>
            </label>
            <input
              id="company"
              type="text"
              value={company}
              onChange={(e) => setCompany(e.target.value)}
              className="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
              placeholder="Muster Ventures GmbH"
            />
          </div>

          <hr className="border-white/[0.06]" />

          {/* Greeting */}
          <div>
            <label htmlFor="greeting" className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">
              Anrede
            </label>
            <input
              id="greeting"
              type="text"
              value={greeting}
              onChange={(e) => setGreeting(e.target.value)}
              className="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
              placeholder={getDefaultGreeting(name || null)}
            />
            <p className="text-[10px] text-white/25 mt-1">Leer lassen fuer automatische Anrede basierend auf dem Namen</p>
          </div>

          {/* Message */}
          <div>
            <label htmlFor="message" className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">
              Nachricht
            </label>
            <textarea
              id="message"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={4}
              className="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2.5 text-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/40 resize-y"
            />
          </div>

          {/* Closing */}
          <div>
            <label htmlFor="closing" className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">
              Grussformel
            </label>
            <textarea
              id="closing"
              value={closing}
              onChange={(e) => setClosing(e.target.value)}
              rows={3}
              className="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2.5 text-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/40 resize-y"
            />
          </div>

          {error && (
            <div className="text-sm text-rose-300 bg-rose-500/10 border border-rose-500/20 rounded-lg px-3 py-2">
              {error}
            </div>
          )}

          <div className="flex items-center justify-end gap-3 pt-2">
            <Link
              href="/pitch-admin/investors"
              className="text-sm text-white/60 hover:text-white px-4 py-2"
            >
              Abbrechen
            </Link>
            <button
              type="submit"
              disabled={submitting}
              className="inline-flex items-center gap-2 bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white text-sm font-medium px-5 py-2.5 rounded-lg disabled:opacity-50 shadow-lg shadow-indigo-500/20"
            >
              <Send className="w-4 h-4" />
              {submitting ? 'Wird gesendet...' : 'Einladung senden'}
            </button>
          </div>
        </form>

        {/* Right: Email Preview */}
        <div className="self-start">
          <div className="flex items-center gap-2 mb-3">
            <Eye className="w-4 h-4 text-white/40" />
            <h3 className="text-sm font-semibold text-white/60 uppercase tracking-wider">Email-Vorschau</h3>
          </div>
          <div className="bg-[#0a0a1a] border border-white/[0.08] rounded-2xl p-4 overflow-y-auto max-h-[80vh]">
            {/* Email Card */}
            <div className="bg-[#111127] border border-indigo-500/20 rounded-xl overflow-hidden">

              {/* Header */}
              <div className="px-6 pt-6 pb-3">
                <p className="text-lg font-semibold text-[#e0e0ff]">BreakPilot ComplAI</p>
                <p className="text-xs text-white/40 mt-1">Investor Pitch Deck</p>
              </div>

              {/* Body */}
              <div className="px-6 py-3">
                <p className="text-sm text-white/80 mb-3">{effectiveGreeting},</p>
                <p className="text-sm text-white/70 leading-relaxed mb-4">{message}</p>

                {/* Magic Link Box */}
                <div className="bg-indigo-500/[0.08] border border-indigo-500/[0.15] rounded-lg p-3 mb-4">
                  <p className="text-[10px] font-semibold text-indigo-400/80 uppercase tracking-wider mb-1">
                    Ihr persoenlicher Zugangslink
                  </p>
                  <p className="text-xs text-white/50 leading-relaxed">
                    Der untenstehende Link ist einmalig und verfaellt nach {ttl} Stunden. Er gewaehrt Ihnen exklusiven Zugang zu unserem interaktiven Pitch Deck — inklusive KI-Assistent fuer Ihre Fragen.
                  </p>
                </div>

                {/* Button Preview */}
                <div className="text-center mb-3">
                  <span className="inline-block bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-sm font-semibold px-8 py-2.5 rounded-lg">
                    Pitch Deck oeffnen
                  </span>
                </div>

                <p className="text-[10px] text-white/25 mb-4 break-all">
                  Falls der Button nicht funktioniert: https://pitch.breakpilot.ai/auth/verify?token=...
                </p>

                {/* Closing */}
                <p className="text-sm text-white/70 leading-relaxed" dangerouslySetInnerHTML={{ __html: closingHtml }} />
              </div>

              {/* Legal Footer */}
              <div className="px-6 py-4 border-t border-white/[0.05]">
                <p className="text-[9px] font-semibold text-white/30 uppercase tracking-wider mb-1">
                  Vertraulichkeit &amp; Haftungsausschluss
                </p>
                <p className="text-[9px] text-white/[0.18] leading-relaxed mb-2">
                  Dieses Pitch Deck ist vertraulich und wurde ausschliesslich fuer den namentlich eingeladenen Empfaenger erstellt. Durch das Oeffnen des Links erklaert sich der Empfaenger einverstanden: (a) Vertrauliche Behandlung, keine Weitergabe an Dritte. (b) Nutzung ausschliesslich zur Bewertung einer Beteiligung. (c) Vertraulichkeitspflicht fuer 3 Jahre.
                </p>
                <p className="text-[9px] text-white/[0.18] leading-relaxed mb-3">
                  Kein Angebot, kein Prospekt. Planzahlen ohne Garantie. Totalverlustrisiko. Deutsches Recht, Gerichtsstand Konstanz.
                </p>
                <p className="text-[9px] font-semibold text-white/20 uppercase tracking-wider mb-1">
                  Confidentiality &amp; Disclaimer
                </p>
                <p className="text-[9px] text-white/[0.13] leading-relaxed">
                  Confidential. Purpose-limited. 3-year obligation. Not an offer. Projections only. Risk of total loss. German law, Konstanz jurisdiction.
                </p>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
