import React, { useState } from 'react';
import type { Note } from '@shared/types';
import { inboxApi } from '../api.js';
import { useInbox } from '../store.js';
import { EditableField } from './EditableField.js';
import { IntentBanner } from './IntentBanner.js';
import { pushTagUndo } from './TagUndoToast.js';

interface Props {
  note: Note;
  onDeleted?: () => void;  // inbox mode 전용 (trash mode 에서 미사용)
  onUpdated: (n: Note) => void;
  mode?: 'inbox' | 'trash';  // default 'inbox'
  onRestore?: () => void;
  onPermanentDelete?: () => void;
}

const aiBadgeStyle: React.CSSProperties = {
  display: 'inline-block', marginLeft: 6, padding: '1px 5px',
  background: '#eee', color: '#666', fontSize: 10, borderRadius: 3, verticalAlign: 'middle'
};

function isPastDue(iso: string, today: string): boolean {
  return iso < today; // string comparison works for ISO YYYY-MM-DD
}

function todayKstIso(): string {
  const KST_OFFSET_MS = 9 * 60 * 60 * 1000;
  const k = new Date(Date.now() + KST_OFFSET_MS);
  return k.toISOString().slice(0, 10);
}

function DueDateBadge({
  value,
  isEdited,
  today,
  onSave
}: {
  value: string | null;
  isEdited: boolean;
  today: string;
  onSave: (next: string) => Promise<void>;
}): React.ReactElement {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(value ?? '');

  React.useEffect(() => { if (!editing) setDraft(value ?? ''); }, [value, editing]);

  if (!editing) {
    if (value === null) {
      return (
        <span
          onClick={() => setEditing(true)}
          style={{ fontSize: 11, color: '#bbb', cursor: 'pointer' }}
          title="마감일 추가"
        >
          📅 마감일 추가
        </span>
      );
    }
    const past = isPastDue(value, today);
    return (
      <span style={{ fontSize: 11, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        <span
          onClick={() => setEditing(true)}
          style={{
            color: past ? '#999' : '#666',
            textDecoration: past ? 'line-through' : 'none',
            cursor: 'pointer'
          }}
          title={past ? '지난 마감일 — 클릭으로 편집' : '클릭으로 편집'}
        >
          📅 {value}
        </span>
        {!isEdited && (
          <span
            style={{
              fontSize: 9, padding: '0 4px', background: '#eee',
              color: '#888', borderRadius: 2
            }}
            title="AI 추출"
          >
            AI
          </span>
        )}
      </span>
    );
  }

  return (
    <input
      type="date"
      value={draft}
      onChange={(e) => setDraft(e.target.value)}
      onBlur={async () => {
        try { await onSave(draft); }
        catch { /* keep editing if invalid */ return; }
        setEditing(false);
      }}
      onKeyDown={(e) => {
        if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
        if (e.key === 'Escape') { setDraft(value ?? ''); setEditing(false); }
      }}
      autoFocus
      style={{ fontSize: 11, padding: 1 }}
    />
  );
}

export function NoteCard({ note, onDeleted, onUpdated, mode = 'inbox', onRestore, onPermanentDelete }: Props): React.ReactElement {
  const isTrash = mode === 'trash';
  const [rawOpen, setRawOpen] = useState(note.aiStatus !== 'done');
  const [local, setLocal] = useState(note);

  React.useEffect(() => { setLocal(note); }, [note]);

  const formatted = new Date(note.createdAt).toLocaleString('ko-KR');

  async function handleDelete() {
    if (!window.confirm('이 기억을 버릴까요? 되돌릴 수 없습니다.')) return;
    await inboxApi.deleteNote(note.id);
    onDeleted?.();
  }

  async function saveTitle(next: string) {
    await inboxApi.updateAiFields(note.id, { title: next });
    const updated = { ...local, aiTitle: next, titleEditedByUser: true };
    setLocal(updated); onUpdated(updated);
  }

  async function saveSummary(next: string) {
    await inboxApi.updateAiFields(note.id, { summary: next });
    const updated = { ...local, aiSummary: next, summaryEditedByUser: true };
    setLocal(updated); onUpdated(updated);
  }

  async function saveDueDate(next: string) {
    const value = next.trim() === '' ? null : next.trim();
    // Light validation: empty or YYYY-MM-DD
    if (value !== null && !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
      throw new Error('Invalid date');
    }
    await inboxApi.setDueDate(note.id, value);
    const updated = { ...local, dueDate: value, dueDateEditedByUser: true };
    setLocal(updated); onUpdated(updated);
  }

  async function removeTag(tagName: string) {
    const removed = local.tags.find((t) => t.name === tagName);
    const nextTagNames = local.tags.filter((t) => t.name !== tagName).map((t) => t.name);
    await inboxApi.updateAiFields(note.id, { tags: nextTagNames });
    const updated = { ...local, tags: local.tags.filter((t) => t.name !== tagName) };
    setLocal(updated); onUpdated(updated);

    if (removed !== undefined) {
      pushTagUndo({
        noteId: note.id,
        tag: removed,
        onUndo: async () => {
          // Restore by re-adding the removed tag.
          // Note: source flag is reset to 'user' on the backend by `updateAiFields` (it
          // only takes names), which mirrors current behaviour for any user-driven
          // tag mutation. Visual restoration matches latest local state.
          const restoredNames = [...updated.tags.map((t) => t.name), removed.name];
          await inboxApi.updateAiFields(note.id, { tags: restoredNames });
          const u2 = { ...updated, tags: [...updated.tags, removed] };
          setLocal(u2); onUpdated(u2);
        }
      });
    }
  }

  function filterByTag(tagName: string): void {
    useInbox.getState().setTagFilter(tagName);
  }

  async function saveIntent(next: string) {
    await inboxApi.setIntent(note.id, next);
    const now = new Date().toISOString();
    const updated = { ...local, userIntent: next, intentPromptedAt: local.intentPromptedAt ?? now };
    setLocal(updated); onUpdated(updated);
  }

  const showIntentBanner = local.aiStatus === 'done' && local.intentPromptedAt === null;

  return (
    // id load-bearing — RecallBanner 의 scrollIntoView target (#6 v0.2.3)
    <div id={`note-${note.id}`} style={{ background: 'white', padding: 16, marginBottom: 12, borderRadius: 10, boxShadow: '0 1px 2px rgba(0,0,0,0.04)' }}>
      <div style={{ fontSize: 11, color: '#888' }}>{formatted}</div>

      {!isTrash && showIntentBanner && (
        <IntentBanner
          noteId={note.id}
          onResolved={(intentText) => {
            const now = new Date().toISOString();
            const updated = { ...local, userIntent: intentText ?? null, intentPromptedAt: now };
            setLocal(updated); onUpdated(updated);
          }}
        />
      )}

      {local.aiStatus === 'pending' && (
        <div style={{ fontSize: 16, fontWeight: 600, color: '#666', marginTop: 4 }}>
          Inkling이 정리하는 중…
        </div>
      )}
      {local.aiStatus === 'failed' && (
        <div title={local.aiError ?? ''} style={{ fontSize: 16, fontWeight: 600, color: '#a55', marginTop: 4 }}>
          정리 보류 — 원문은 안전합니다
        </div>
      )}
      {local.aiStatus === 'done' && (
        <>
          {isTrash ? (
            <>
              <div style={{ marginTop: 4 }}>
                <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{local.aiTitle ?? '(제목 없음)'}</h3>
              </div>
              <div style={{ marginTop: 6, fontSize: 13, color: '#333', whiteSpace: 'pre-wrap' }}>
                {local.aiSummary ?? '(요약 없음)'}
              </div>
              {local.dueDate !== null && (
                <div style={{ marginTop: 6 }}>
                  <span style={{ fontSize: 11, color: '#666' }}>📅 {local.dueDate}</span>
                </div>
              )}
              {local.tags.length > 0 && (
                <div style={{ marginTop: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {local.tags.map((t) => (
                    <span
                      key={t.name}
                      style={{
                        background: t.source === 'ai' ? '#eaf3ff' : '#e9f9e4',
                        color: t.source === 'ai' ? '#0a4b80' : '#236b1a',
                        padding: '2px 8px',
                        borderRadius: 12,
                        fontSize: 12
                      }}
                    >
                      {t.name}{t.source === 'ai' && <sub style={{ marginLeft: 3, fontSize: 9 }}>AI</sub>}
                    </span>
                  ))}
                </div>
              )}
            </>
          ) : (
            <>
              <div style={{ marginTop: 4 }}>
                <EditableField
                  value={local.aiTitle ?? ''}
                  onSave={saveTitle}
                  style={{ display: 'inline-block', fontSize: 16, fontWeight: 600 }}
                  singleLine
                />
                {!local.titleEditedByUser && <span style={aiBadgeStyle} title="AI 제안">AI</span>}
              </div>
              <div style={{ marginTop: 6 }}>
                <EditableField
                  value={local.aiSummary ?? ''}
                  onSave={saveSummary}
                  style={{ fontSize: 13, color: '#333', whiteSpace: 'pre-wrap' }}
                  singleLine={false}
                />
                {!local.summaryEditedByUser && <span style={aiBadgeStyle} title="AI 제안">AI</span>}
              </div>
              <div style={{ marginTop: 6 }}>
                <DueDateBadge
                  value={local.dueDate}
                  isEdited={local.dueDateEditedByUser}
                  today={todayKstIso()}
                  onSave={saveDueDate}
                />
              </div>
              {local.tags.length > 0 && (
                <div style={{ marginTop: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {local.tags.map((t) => (
                    <span
                      key={t.name}
                      style={{
                        background: t.source === 'ai' ? '#eaf3ff' : '#e9f9e4',
                        color: t.source === 'ai' ? '#0a4b80' : '#236b1a',
                        padding: '2px 4px 2px 8px',
                        borderRadius: 12,
                        fontSize: 12,
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: 4
                      }}
                    >
                      <span
                        onClick={() => filterByTag(t.name)}
                        style={{ cursor: 'pointer' }}
                        title={`#${t.name} 노트만 보기`}
                      >
                        {t.name}{t.source === 'ai' && <sub style={{ marginLeft: 3, fontSize: 9 }}>AI</sub>}
                      </span>
                      <button
                        onClick={(e) => { e.stopPropagation(); void removeTag(t.name); }}
                        style={{
                          background: 'none',
                          border: 'none',
                          cursor: 'pointer',
                          color: 'inherit',
                          fontSize: 14,
                          padding: '0 2px',
                          lineHeight: 1,
                          opacity: 0.6
                        }}
                        title="태그 제거"
                        aria-label={`${t.name} 태그 제거`}
                      >
                        ×
                      </button>
                    </span>
                  ))}
                </div>
              )}
              {local.userIntent !== null && (
                <div style={{ marginTop: 10, padding: 8, background: '#fffbe9', borderRadius: 6 }}>
                  <span style={{ fontSize: 12, color: '#7a5a00', marginRight: 6 }}>💡</span>
                  <EditableField
                    value={local.userIntent}
                    onSave={saveIntent}
                    style={{ display: 'inline-block', fontSize: 13, color: '#444' }}
                    singleLine
                  />
                </div>
              )}
            </>
          )}
        </>
      )}

      {local.media.length > 0 && (
        <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {local.media.map((m) => (
            <img
              key={m.id}
              src={`inkling-media://${m.relPath}`}
              alt=""
              title={m.relPath}
              onClick={() => { void inboxApi.openMedia(m.relPath); }}
              style={{
                width: 48,
                height: 48,
                objectFit: 'cover',
                borderRadius: 4,
                cursor: 'pointer',
                border: '1px solid #e0e0e0'
              }}
            />
          ))}
        </div>
      )}

      <div style={{ marginTop: 10 }}>
        <button onClick={() => setRawOpen((o) => !o)} style={{ background: 'none', border: 'none', color: '#555', fontSize: 12, cursor: 'pointer', padding: 0 }}>
          {rawOpen ? '▾ 원문 접기' : '▸ 원문 보기'}
        </button>
        {rawOpen && (
          <pre style={{ marginTop: 6, whiteSpace: 'pre-wrap', fontSize: 12, color: '#555', background: '#fafafa', padding: 8, borderRadius: 4 }}>
            {local.rawText}
          </pre>
        )}
      </div>

      <div style={{ marginTop: 10, textAlign: 'right' }}>
        {isTrash ? (
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
            <button
              onClick={onRestore}
              style={{
                background: 'none', border: '1px solid #0a4b80', color: '#0a4b80',
                cursor: 'pointer', fontSize: 12, padding: '4px 10px', borderRadius: 4
              }}
            >
              🔄 복구
            </button>
            <button
              onClick={onPermanentDelete}
              style={{
                background: 'none', border: '1px solid #c93030', color: '#c93030',
                cursor: 'pointer', fontSize: 12, padding: '4px 10px', borderRadius: 4
              }}
            >
              🗑 영구 삭제
            </button>
          </div>
        ) : (
          <button onClick={() => void handleDelete()} style={{ background: 'none', border: 'none', color: '#c93030', cursor: 'pointer', fontSize: 12 }}>
            🗑 삭제
          </button>
        )}
      </div>
    </div>
  );
}