'use client';

import { useState } from 'react';

type Comment = {
  id: number;
  author: string;
  text: string;
};

type Props = {
  comments: Comment[];
  onClose: () => void;
};

// 🔐 Simulierter eingeloggter User
const CURRENT_USER_NAME = 'Du';

// 😊 Kleine, sinnvolle Emoji-Auswahl (Start)
const EMOJIS = ['😍', '😂', '🥰', '🐶', '🐱', '❤️', '🔥', '👏', '🥹', '😎'];

export default function CommentModal({ comments, onClose }: Props) {
  const [localComments, setLocalComments] = useState<Comment[]>(comments);
  const [newComment, setNewComment] = useState('');
  const [showEmojis, setShowEmojis] = useState(false);

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (!newComment.trim()) return;

    const optimisticComment: Comment = {
      id: Date.now(),
      author: CURRENT_USER_NAME,
      text: newComment.trim(),
    };

    setLocalComments((prev) => [...prev, optimisticComment]);
    setNewComment('');
    setShowEmojis(false);

    console.log('NEW COMMENT (mock):', optimisticComment);
  }

  function addEmoji(emoji: string) {
    setNewComment((prev) => prev + emoji);
  }

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        backgroundColor: 'rgba(0,0,0,0.5)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 1000,
      }}
    >
      <div
        style={{
          backgroundColor: 'white',
          borderRadius: '16px',
          width: '100%',
          maxWidth: '520px',
          maxHeight: '80vh',
          display: 'grid',
          gridTemplateRows: 'auto 1fr auto',
        }}
      >
        {/* HEADER */}
        <header
          style={{
            padding: '1rem',
            borderBottom: '1px solid #eee',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <strong>Kommentare</strong>
          <button
            onClick={onClose}
            style={{
              border: 'none',
              background: 'none',
              cursor: 'pointer',
              fontSize: '1.2rem',
            }}
          >
            ✕
          </button>
        </header>

        {/* LISTE */}
        <section
          style={{
            padding: '1rem',
            overflowY: 'auto',
            display: 'grid',
            gap: '0.8rem',
          }}
        >
          {localComments.length === 0 && (
            <p style={{ color: '#777' }}>Noch keine Kommentare.</p>
          )}

          {localComments.map((comment) => (
            <div key={comment.id}>
              <strong style={{ fontSize: '0.85rem' }}>
                {comment.author}
              </strong>
              <div style={{ fontSize: '0.9rem' }}>{comment.text}</div>
            </div>
          ))}
        </section>

        {/* EINGABE */}
        <form
          onSubmit={handleSubmit}
          style={{
            padding: '0.8rem',
            borderTop: '1px solid #eee',
            display: 'grid',
            gap: '0.4rem',
          }}
        >
          {/* Emoji Picker */}
          {showEmojis && (
            <div
              style={{
                display: 'flex',
                gap: '0.4rem',
                flexWrap: 'wrap',
                padding: '0.4rem',
                borderRadius: '12px',
                backgroundColor: '#f5f5f5',
              }}
            >
              {EMOJIS.map((emoji) => (
                <button
                  key={emoji}
                  type="button"
                  onClick={() => addEmoji(emoji)}
                  style={{
                    fontSize: '1.3rem',
                    background: 'none',
                    border: 'none',
                    cursor: 'pointer',
                  }}
                >
                  {emoji}
                </button>
              ))}
            </div>
          )}

          {/* Input Row */}
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <button
              type="button"
              onClick={() => setShowEmojis((prev) => !prev)}
              style={{
                border: 'none',
                background: 'none',
                cursor: 'pointer',
                fontSize: '1.3rem',
              }}
              title="Emoji hinzufügen"
            >
              😊
            </button>

            <input
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              placeholder="Kommentar schreiben …"
              style={{
                flex: 1,
                padding: '0.6rem 0.8rem',
                borderRadius: '12px',
                border: '1px solid #ccc',
              }}
            />

            <button
              type="submit"
              style={{
                padding: '0.6rem 1rem',
                borderRadius: '12px',
                border: 'none',
                backgroundColor: '#2E7D32',
                color: 'white',
                fontWeight: 700,
                cursor: 'pointer',
              }}
            >
              Senden
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}