import { useState } from 'react';

// README §3.3: "分类 Tab（最近/表情/手势/物品），12 列网格" -- the design mockup itself has no
// specific emoji asset list, just gray placeholder tiles captioned "use system emoji or a branded
// pack." This is a plain Unicode emoji grid (no custom art), same call the old app made (per its own
// comment: no WeChat/QQ-style sticker assets available, system emoji is the fallback).
const EMOJI_FACES = [
  '😀', '😁', '😂', '🤣', '😊', '😍', '😘', '😜', '🤔', '😐', '😴', '😭', '😡', '🥳', '😱', '🤯', '🥰', '😇', '🙃', '😉',
  '😆', '😅', '☺️', '😋', '😝', '🤗', '🤩', '🥺', '😢', '😤', '🤬', '🥵', '🥶', '😵', '🤢', '😷', '🤒', '🥴', '😪', '🙄',
];
const EMOJI_GESTURES = [
  '👍', '👎', '👏', '🙏', '💪', '🤝', '✌️', '👌', '🤞', '👋', '👊', '✊', '🤛', '🤜', '🤟', '🤘', '👆', '👇', '👈', '👉',
  '☝️', '✋', '🤚', '🖐️', '🖖', '🤙', '💅', '🤳', '👐', '🙌', '🤲', '🫶', '🤌', '🫰', '🫵', '👋', '💃', '🕺', '🙋', '🙆',
];
const EMOJI_OBJECTS = [
  '❤️', '💔', '💯', '🔥', '✨', '🎉', '🎂', '☕', '🍺', '🌹', '🎁', '🎈', '⭐', '🌈', '☀️', '🌙', '⚡', '💧', '🎵', '🎮',
  '📷', '📱', '💻', '📌', '📎', '🔔', '💰', '⏰', '🔑', '💡', '📖', '✏️', '🍎', '🍕', '🍔', '🍜', '🎄', '🎃', '⚽', '🏆',
];

type EmojiTab = 'recent' | 'faces' | 'gestures' | 'objects';

const TABS: { key: EmojiTab; label: string; list: string[] }[] = [
  { key: 'recent', label: '最近', list: [] },
  { key: 'faces', label: '表情', list: EMOJI_FACES },
  { key: 'gestures', label: '手势', list: EMOJI_GESTURES },
  { key: 'objects', label: '物品', list: EMOJI_OBJECTS },
];

interface EmojiPanelProps {
  onPick: (emoji: string) => void;
}

export function EmojiPanel({ onPick }: EmojiPanelProps) {
  const [tab, setTab] = useState<EmojiTab>('recent');
  const recent = (() => {
    try {
      return JSON.parse(localStorage.getItem('im-recent-emoji') || '[]') as string[];
    } catch {
      return [];
    }
  })();

  const pick = (emoji: string) => {
    const next = [emoji, ...recent.filter((e) => e !== emoji)].slice(0, 36);
    try {
      localStorage.setItem('im-recent-emoji', JSON.stringify(next));
    } catch {
      /* storage unavailable -- recents just won't persist */
    }
    onPick(emoji);
  };

  const list = tab === 'recent' ? recent : (TABS.find((t) => t.key === tab)?.list ?? []);

  return (
    <div className="w-[380px] rounded-xl border border-border-panel bg-white p-2 shadow-menu">
      <div className="mb-1 flex gap-1 px-1">
        {TABS.map((t) => (
          <button
            key={t.key}
            type="button"
            onClick={() => setTab(t.key)}
            className={`rounded-lg px-2.5 py-1 text-xs ${tab === t.key ? 'bg-accent-soft-bg text-accent' : 'text-text-tertiary-2'}`}
          >
            {t.label}
          </button>
        ))}
      </div>
      {list.length === 0 ? (
        <div className="py-6 text-center text-xs text-text-tertiary-4">暂无最近使用</div>
      ) : (
        <div className="grid grid-cols-12 gap-1">
          {list.map((emoji, i) => (
            <button
              key={`${emoji}-${i}`}
              type="button"
              onClick={() => pick(emoji)}
              className="grid h-8 w-8 place-items-center rounded-lg text-lg hover:bg-surface-rail"
            >
              {emoji}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}