import React, { useState } from 'react';
import { useInbox } from '../store.js';
import { Banner } from './Banner.js';

const COLOR_PALETTE = ['#0a4b80', '#236b1a', '#946100', '#a55', '#5a3a8c'];

export function PromotionBanner(): React.ReactElement | null {
  const candidates = useInbox((s) => s.promotionCandidates);
  const accept = useInbox((s) => s.acceptPromotion);
  const snooze = useInbox((s) => s.snoozePromotion);
  const dismiss = useInbox((s) => s.dismissPromotion);
  const [editing, setEditing] = useState<{ tag: string; name: string; color: string } | null>(null);

  if (candidates.length === 0) return null;
  const c = candidates[0]!;

  return (
    <Banner severity="info">
      {editing === null ? (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <span>💡 <code>{c.tag}</code> 관련 노트 {c.noteIds.length}개가 모였어요. 새 노트북 <b>{c.suggestedName}</b> 로 분리할까요?</span>
          <div style={{ display: 'flex', gap: 6, marginLeft: 'auto' }}>
            <button
              onClick={() => setEditing({ tag: c.tag, name: c.suggestedName, color: COLOR_PALETTE[0]! })}
              style={{ background: '#0a4b80', color: '#fff', border: 'none', borderRadius: 4, padding: '4px 12px', fontSize: 12, cursor: 'pointer' }}
            >
              수락
            </button>
            <button
              onClick={() => { void snooze(); }}
              style={{ background: 'transparent', color: '#234', border: '1px solid #ccc', borderRadius: 4, padding: '4px 12px', fontSize: 12, cursor: 'pointer' }}
            >
              나중에
            </button>
            <button
              onClick={() => { void dismiss(c.tag); }}
              style={{ background: 'transparent', color: '#888', border: 'none', cursor: 'pointer', fontSize: 12 }}
            >
              숨기기
            </button>
          </div>
        </div>
      ) : (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <input
            aria-label="노트북 이름"
            value={editing.name}
            onChange={(e) => setEditing({ ...editing, name: e.target.value })}
            style={{ flex: 1, fontSize: 13, padding: '4px 8px', border: '1px solid #ccc', borderRadius: 4, minWidth: 120 }}
            autoFocus
          />
          <div style={{ display: 'flex', gap: 4 }}>
            {COLOR_PALETTE.map((col) => (
              <button
                key={col}
                onClick={() => setEditing({ ...editing, color: col })}
                aria-label={`색 ${col}`}
                style={{
                  width: 20, height: 20, borderRadius: '50%', background: col,
                  border: col === editing.color ? '2px solid #333' : '1px solid #ccc',
                  cursor: 'pointer', padding: 0
                }}
              />
            ))}
          </div>
          <button
            onClick={() => { void accept(editing.tag, editing.name.trim(), editing.color); setEditing(null); }}
            disabled={editing.name.trim().length === 0}
            style={{ background: '#0a4b80', color: '#fff', border: 'none', borderRadius: 4, padding: '4px 12px', fontSize: 12, cursor: 'pointer' }}
          >
            만들기
          </button>
          <button onClick={() => setEditing(null)} style={{ fontSize: 12, padding: '4px 10px' }}>취소</button>
        </div>
      )}
    </Banner>
  );
}
