'use client';

import { useState } from 'react';
import { Message } from '@/types';
import { messageApi } from '@/lib/api';
import { useAuthStore } from '@/store/authStore';
import { cn, formatTime, formatDate } from '@/lib/utils';
import { motion } from 'framer-motion';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
  MoreHorizontal, Reply, Pin, Bookmark, Trash2, Edit3,
  SmilePlus, MessageSquare, Eye
} from 'lucide-react';

interface MessageProps {
  message: Message;
}

export function MessageComponent({ message }: MessageProps) {
  const { user } = useAuthStore();
  const [showActions, setShowActions] = useState(false);
  const [showReactions, setShowReactions] = useState(false);
  const [showReadBy, setShowReadBy] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [editContent, setEditContent] = useState(message.content);
  const [reactions, setReactions] = useState(message.reactions || []);

  const isOwner = user?.id === message.userId;
  const isAdmin = user?.role === 'OWNER' || user?.role === 'ADMIN';

  const handleEdit = async () => {
    if (!editContent.trim() || editContent === message.content) return;
    try {
      await messageApi.edit(message.id, editContent);
      setIsEditing(false);
    } catch {}
  };

  const handleDelete = async () => {
    if (!confirm('Delete this message?')) return;
    try {
      await messageApi.delete(message.id);
    } catch {}
  };

  const handleReaction = async (emoji: string) => {
    try {
      const { data } = await messageApi.react(message.id, emoji);
      setReactions(data);
      setShowReactions(false);
    } catch {}
  };

  const handlePin = async () => {
    try {
      await messageApi.pin(message.id);
    } catch {}
  };

  const handleBookmark = async () => {
    try {
      await messageApi.bookmark(message.id);
    } catch {}
  };

  const handleMarkRead = async () => {
    try {
      await messageApi.markRead(message.id);
    } catch {}
  };

  const groupedReactions = reactions.reduce((acc: Record<string, any>, r) => {
    if (!acc[r.emoji]) acc[r.emoji] = { emoji: r.emoji, count: 0, users: [] };
    acc[r.emoji].count++;
    acc[r.emoji].users.push(r.user.username);
    return acc;
  }, {});

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="group relative flex gap-3 px-2 py-2 rounded-lg hover:bg-vault-surface/20 transition-colors"
      onMouseEnter={() => setShowActions(true)}
      onMouseLeave={() => { setShowActions(false); setShowReadBy(false); }}
    >
      {/* Avatar */}
      <div className="flex-shrink-0 w-9 h-9 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white text-xs font-medium">
        {message.user.displayName?.[0] || message.user.username?.[0] || '?'}
      </div>

      <div className="flex-1 min-w-0">
        {/* Header */}
        <div className="flex items-center gap-2 mb-0.5">
          <span className="text-sm font-medium hover:text-primary-400 cursor-pointer">
            {message.user.displayName || message.user.username}
          </span>
          <span className="text-[10px] text-vault-muted">{formatTime(message.createdAt)}</span>
          {message.isEdited && (
            <span className="text-[10px] text-vault-muted/50">(edited)</span>
          )}
          {message.isPinned && (
            <Pin className="w-3 h-3 text-yellow-500" />
          )}
        </div>

        {/* Content */}
        {isEditing ? (
          <div className="flex gap-2">
            <input
              value={editContent}
              onChange={(e) => setEditContent(e.target.value)}
              className="flex-1 bg-vault-surface border border-vault-border rounded px-3 py-1.5 text-sm text-vault-text focus:outline-none focus:border-primary-500/50"
              onKeyDown={(e) => e.key === 'Enter' && handleEdit()}
              autoFocus
            />
            <button onClick={handleEdit} className="btn-primary text-xs px-3">Save</button>
            <button onClick={() => setIsEditing(false)} className="btn-secondary text-xs px-3">Cancel</button>
          </div>
        ) : (
          <div className="text-sm text-vault-text markdown-content">
            <ReactMarkdown remarkPlugins={[remarkGfm]}>
              {message.content}
            </ReactMarkdown>
          </div>
        )}

        {/* Attachments */}
        {message.attachments?.length > 0 && (
          <div className="mt-2 flex flex-wrap gap-2">
            {message.attachments.map((att) => (
              <div key={att.id} className="glass-darker p-2 rounded-lg flex items-center gap-2 text-xs">
                <span className="text-vault-muted">📎</span>
                <span className="truncate max-w-[200px]">{att.originalName}</span>
              </div>
            ))}
          </div>
        )}

        {/* Reactions */}
        {Object.values(groupedReactions).length > 0 && (
          <div className="flex flex-wrap gap-1 mt-1.5">
            {Object.values(groupedReactions).map((r: any) => (
              <button
                key={r.emoji}
                onClick={() => handleReaction(r.emoji)}
                className={cn(
                  'flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border transition-colors',
                  r.users.includes(user?.username || '')
                    ? 'bg-primary-500/20 border-primary-500/30 text-primary-300'
                    : 'bg-vault-surface/30 border-vault-border/30 text-vault-muted hover:border-vault-border'
                )}
                title={r.users.join(', ')}
              >
                <span>{r.emoji}</span>
                <span>{r.count}</span>
              </button>
            ))}
          </div>
        )}

        {/* Thread replies preview */}
        {message._count?.replies > 0 && (
          <button className="flex items-center gap-1.5 mt-1.5 text-xs text-primary-400 hover:text-primary-300 transition-colors">
            <MessageSquare className="w-3.5 h-3.5" />
            <span>{message._count.replies} {message._count.replies === 1 ? 'reply' : 'replies'}</span>
          </button>
        )}

        {/* Read receipts */}
        {showReadBy && message.readReceipts?.length > 0 && (
          <div className="mt-2 glass-darker p-2 rounded-lg text-xs">
            <p className="text-vault-muted mb-1 font-medium">Seen by</p>
            {message.readReceipts.map((rr) => (
              <div key={rr.id} className="flex items-center gap-2 py-0.5">
                <span>{rr.user.displayName || rr.user.username}</span>
                <span className="text-vault-muted/50">{formatDate(rr.readAt)}</span>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Actions Overlay */}
      {showActions && (
        <motion.div
          initial={{ opacity: 0, y: -5 }}
          animate={{ opacity: 1, y: 0 }}
          className="absolute -top-3 right-2 flex items-center gap-0.5 glass-darker rounded-lg border border-vault-border/50 shadow-lg"
        >
          <button
            onClick={() => handleReaction('👍')}
            className="p-1.5 hover:bg-vault-surface rounded transition-colors"
            title="React"
          >
            <SmilePlus className="w-3.5 h-3.5 text-vault-muted hover:text-yellow-500" />
          </button>
          <button
            onClick={handleMarkRead}
            className="p-1.5 hover:bg-vault-surface rounded transition-colors"
            title="Mark read"
          >
            <Eye className="w-3.5 h-3.5 text-vault-muted" />
          </button>
          {(isOwner || isAdmin) && (
            <>
              <button
                onClick={() => setIsEditing(true)}
                className="p-1.5 hover:bg-vault-surface rounded transition-colors"
                title="Edit"
              >
                <Edit3 className="w-3.5 h-3.5 text-vault-muted hover:text-primary-400" />
              </button>
              <button
                onClick={handlePin}
                className="p-1.5 hover:bg-vault-surface rounded transition-colors"
                title="Pin"
              >
                <Pin className="w-3.5 h-3.5 text-vault-muted hover:text-yellow-500" />
              </button>
              <button
                onClick={handleDelete}
                className="p-1.5 hover:bg-vault-surface rounded transition-colors"
                title="Delete"
              >
                <Trash2 className="w-3.5 h-3.5 text-vault-muted hover:text-red-400" />
              </button>
            </>
          )}
          <button
            onClick={handleBookmark}
            className="p-1.5 hover:bg-vault-surface rounded transition-colors"
            title="Bookmark"
          >
            <Bookmark className="w-3.5 h-3.5 text-vault-muted" />
          </button>
        </motion.div>
      )}

      {/* Read by button */}
      {message.readReceipts?.length > 0 && (
        <button
          onClick={() => setShowReadBy(!showReadBy)}
          className="absolute -bottom-1 right-2 flex items-center gap-1 text-[10px] text-vault-muted/50 hover:text-vault-muted"
        >
          <Eye className="w-3 h-3" />
          <span>{message.readReceipts.length}</span>
        </button>
      )}
    </motion.div>
  );
}