"use client";

import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Terminal,
  Send,
  ShieldAlert,
  CheckCircle2,
  User,
  MessageSquare,
  Zap,
} from "lucide-react";
import { pb } from "@/lib/pb";
import { Button } from "@/components/ui/button";
import { Dictionary } from "@/lib/IDict";
import { CyberButton } from "../ui/cyber-button";
import { cn } from "@/lib/utils";

export function TerminalGuestbook({ dict }: { dict: Dictionary["guestbook"] }) {
  const [comments, setComments] = useState<any[]>([]);
  const [nickname, setNickname] = useState("");
  const [message, setMessage] = useState("");
  const [honeypot, setHoneypot] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [cooldown, setCooldown] = useState(0);
  const [status, setStatus] = useState<{
    type: "success" | "error" | null;
    text: string;
  }>({ type: null, text: "" });

  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    pb.autoCancellation(false);
    // Начальная загрузка
    const fetchComments = async () => {
      try {
        const records = await pb
          .collection("comments")
          .getList(1, 50, { sort: "-created", requestKey: null });
        setComments(records.items);
      } catch (e) {
        console.error(e);
      }
    };
    fetchComments();

    // Кулдаун
    const lastPost = localStorage.getItem("last_comment_time");
    if (lastPost) {
      const timePassed = Math.floor((Date.now() - parseInt(lastPost)) / 1000);
      if (timePassed < 60) setCooldown(60 - timePassed);
    }

    // Реалтайм
    pb.collection("comments").subscribe("*", (e) => {
      if (e.action === "create") {
        setComments((prev) => [e.record, ...prev].slice(0, 50));
      }
    });
    return () => {
      pb.collection("comments").unsubscribe("*");
    };
  }, []);

  useEffect(() => {
    if (cooldown > 0) {
      const timer = setTimeout(() => setCooldown((c) => c - 1), 1000);
      return () => clearTimeout(timer);
    }
  }, [cooldown]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (honeypot)
      return setStatus({ type: "error", text: dict.statusErrorBreach });
    if (!nickname.trim() || !message.trim())
      return setStatus({ type: "error", text: dict.statusErrorEmpty });
    if (nickname.length > 20 || message.length > 150)
      return setStatus({ type: "error", text: dict.statusErrorSize });
    if (cooldown > 0)
      return setStatus({
        type: "error",
        text: dict.statusErrorFirewall.replace("{{time}}", cooldown.toString()),
      });

    try {
      setIsSubmitting(true);

      const proxyUrl =
        process.env.NODE_ENV === "production"
          ? "/api/proxy"
          : "http://localhost:3001";

      const res = await fetch(`${proxyUrl}/api/comments`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          nickname: nickname.trim(),
          message: message.trim(),
        }),
      });

      if (!res.ok) {
        // Если Rust вернул 406 Not Acceptable (грязь в тексте)
        if (res.status === 406) {
          throw new Error(dict.statusErrorBreach); // или кастомная ошибка "Мат запрещен"
        }
        throw new Error("Server error");
      }

      setNickname("");
      setMessage("");
      setStatus({ type: "success", text: dict.statusSuccess });
      setCooldown(60);
      localStorage.setItem("last_comment_time", Date.now().toString());
    } catch (err) {
      setStatus({ type: "error", text: dict.statusErrorOffline });
    } finally {
      setIsSubmitting(false);
      setTimeout(() => setStatus({ type: null, text: "" }), 5000);
    }
  };

  return (
    <section
      id="guestbook"
      className="py-32 px-4 container mx-auto max-w-6xl relative overflow-hidden"
    >
      {/* Мягкие свечения — увеличили размер и размытие для плавности */}
      <div className="absolute -top-20 -right-20 w-[800px] h-[800px] bg-primary/5 dark:bg-primary/10 blur-[150px] rounded-full -z-10 opacity-30 dark:opacity-60" />
      <div className="absolute -bottom-20 -left-20 w-[800px] h-[800px] bg-secondary/5 dark:bg-secondary/10 blur-[150px] rounded-full -z-10 opacity-30 dark:opacity-60" />

      {/* Заголовок секции */}
      <div className="text-center mb-16">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-secondary/30 bg-secondary/10 text-secondary text-xs font-bold tracking-[0.2em] mb-4 uppercase">
          <Zap className="size-3 fill-current" /> {dict.subtitle}
        </div>
        <h2 className="text-4xl md:text-6xl font-black tracking-tighter text-foreground font-mono">
          {dict.title}
        </h2>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        {/* ЛЕВАЯ КОЛОНКА (4/12): Философия и Форма */}
        <div className="lg:col-span-5 space-y-8">
          {/* Блок философии (Тот самый "Плюс") */}
          <div className="bg-primary/5 border-l-4 border-primary p-6 rounded-r-2xl backdrop-blur-sm">
            <h3 className="text-xl font-bold text-primary mb-3 flex items-center gap-2 font-mono uppercase tracking-tight">
              <ShieldAlert className="size-5" /> {dict.philosophyTitle}
            </h3>
            <p className="text-muted-foreground leading-relaxed text-sm antialiased italic">
              "{dict.philosophyText}"
            </p>
          </div>

          {/* Форма отправки */}
          <div className="bg-card/40 backdrop-blur-xl border border-border/50 rounded-[2.5rem] p-8 shadow-xl">
            <form onSubmit={handleSubmit} className="space-y-5">
              <div className="space-y-2">
                <label
                  className={cn(
                    "text-[10px] font-mono uppercase tracking-[0.2em] flex items-center gap-2 ml-1 mb-2",
                    "text-primary/80 dark:text-primary font-bold", // Сделали жирнее и чуть приглушили в светлой
                  )}
                >
                  <User className="size-3" /> {dict.labelAlias}
                </label>
                <input
                  type="text"
                  maxLength={20}
                  value={nickname}
                  onChange={(e) => setNickname(e.target.value)}
                  placeholder={dict.placeholderAlias}
                  disabled={isSubmitting || cooldown > 0}
                  // Фрагмент классов для input и textarea в TerminalGuestbook.tsx
                  className={cn(
                    "w-full rounded-2xl px-5 py-4 text-sm outline-none transition-all font-mono",
                    "disabled:opacity-50 text-foreground",
                    // Светлая тема: более плотный плейсхолдер и четкая рамка
                    "bg-background/50 border border-border/80 placeholder:text-muted-foreground/60 focus:border-primary focus:bg-background shadow-sm",
                    // Темная тема: стеклянный эффект
                    "dark:bg-background/50 dark:border-border/50 dark:placeholder:text-muted-foreground/30 dark:focus:border-primary/50",
                  )}
                />
              </div>

              <div className="space-y-2">
                <label className="text-[10px] font-mono text-primary uppercase tracking-[0.2em] flex items-center gap-2 ml-1">
                  <MessageSquare className="size-3" /> {dict.labelPayload}
                </label>
                <textarea
                  maxLength={150}
                  rows={4}
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  placeholder={dict.placeholderPayload}
                  disabled={isSubmitting || cooldown > 0}
                  // Фрагмент классов для input и textarea в TerminalGuestbook.tsx
                  className={cn(
                    "w-full rounded-2xl px-5 py-4 text-sm outline-none transition-all font-mono",
                    "disabled:opacity-50 text-foreground",
                    // Светлая тема: более плотный плейсхолдер и четкая рамка
                    "bg-background/50 border border-border/80 placeholder:text-muted-foreground/60 focus:border-primary focus:bg-background shadow-sm",
                    // Темная тема: стеклянный эффект
                    "dark:bg-background/50 dark:border-border/50 dark:placeholder:text-muted-foreground/30 dark:focus:border-primary/50",
                  )}
                />
                <div className="text-right text-[10px] text-muted-foreground/40 font-mono pr-2">
                  {message.length}/150
                </div>
              </div>

              <input
                type="text"
                name="website"
                tabIndex={-1}
                autoComplete="off"
                value={honeypot}
                onChange={(e) => setHoneypot(e.target.value)}
                style={{ position: "absolute", left: "-9999px" }}
              />

              <AnimatePresence mode="wait">
                {status.text && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    exit={{ opacity: 0, height: 0 }}
                    className={`p-4 rounded-2xl text-xs font-mono flex items-start gap-3 border ${status.type === "error" ? "bg-destructive/10 border-destructive/20 text-destructive" : "bg-secondary/10 border-secondary/20 text-secondary"}`}
                  >
                    {status.type === "error" ? (
                      <ShieldAlert className="size-4 shrink-0" />
                    ) : (
                      <CheckCircle2 className="size-4 shrink-0" />
                    )}
                    {status.text}
                  </motion.div>
                )}
              </AnimatePresence>

              <CyberButton
                type="submit"
                variant="primary"
                disabled={isSubmitting || cooldown > 0}
                className="w-full"
              >
                {isSubmitting ? (
                  dict.btnEncrypting
                ) : cooldown > 0 ? (
                  dict.cooldown.replace("{{time}}", cooldown.toString())
                ) : (
                  <span className="flex items-center gap-2">
                    <Send className="size-4" /> {dict.btnBroadcast}
                  </span>
                )}
              </CyberButton>
            </form>
          </div>
        </div>

        {/* ПРАВАЯ КОЛОНКА (7/12): Фид сообщений */}

        <div
          className={cn(
            "lg:col-span-7 h-[700px] flex flex-col p-8 rounded-[3rem] backdrop-blur-md transition-all",
            // Светлая тема: чистый белый, жесткая граница, сильная тень
            "bg-white/90 border border-border/80 shadow-xl",
            // Темная тема: полупрозрачное стекло, неоновая граница
            "dark:bg-black/20 dark:border-primary/20 dark:shadow-2xl",
          )}
        >
          <div className="flex justify-between items-center mb-8 px-4">
            <div className="flex items-center gap-3">
              <div className="size-2 rounded-full bg-secondary animate-pulse shadow-[0_0_10px_rgba(0,229,242,0.8)]" />
              <span className="font-mono text-xs text-secondary uppercase tracking-[0.3em] font-bold">
                {dict.liveFeed}
              </span>
            </div>
            <span className="text-[10px] font-mono text-muted-foreground/40 uppercase">
              Encrypted_Uplink_v2.4
            </span>
          </div>

          <div
            ref={scrollRef}
            className="flex-1 overflow-y-auto pr-4 space-y-6 custom-scrollbar-cyber"
          >
            <AnimatePresence initial={false}>
              {comments.map((comment) => (
                <motion.div
                  key={comment.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="relative group"
                >
                  <div className="absolute -left-2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-secondary/0 via-secondary/20 to-secondary/0 group-hover:via-secondary/50 transition-all" />
                  {/* Сообщение */}
                  <div
                    className={cn(
                      "p-5 rounded-[1.5rem] transition-all group-hover:translate-x-1",
                      // Светлая тема: серый фон, четкая рамка
                      "bg-muted/30 border border-border/50 group-hover:bg-muted/60",
                      // Темная тема: прозрачное стекло
                      "dark:bg-white/5 dark:border-white/5 dark:group-hover:bg-white/[0.08] dark:group-hover:border-white/10",
                    )}
                  >
                    <div className="flex justify-between items-center mb-3">
                      <span className="font-black text-secondary font-mono text-sm tracking-tight">
                        @{comment.nickname}
                      </span>
                      <span className="text-[10px] text-muted-foreground/40 font-mono">
                        {new Date(comment.created).toLocaleTimeString()}
                      </span>
                    </div>
                    <p className="text-muted-foreground text-[15px] leading-relaxed break-words font-medium">
                      {comment.message}
                    </p>
                  </div>
                </motion.div>
              ))}
            </AnimatePresence>

            {comments.length === 0 && (
              <div className="h-full flex flex-col items-center justify-center text-muted-foreground/20 font-mono space-y-4">
                <Terminal className="size-12 opacity-10" />
                <span className="text-xs uppercase tracking-[0.2em]">
                  {dict.noTransmissions}
                </span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}