import { useState } from 'react';
import { useStore } from '../../store';
import { Star, Tag, Link2, FileText, Clock, Plus, X, Check, ListChecks, ArrowLeftRight, Folder, ChevronDown } from 'lucide-react';

// 信息面板：路径/标签/关联文档（双向+批量）/时间。样式统一走设计 token
export function DocInfoPanel() {
  const currentPath = useStore(s => s.currentPath);
  const title = useStore(s => s.title);
  const meta = useStore(s => s.meta);
  const tree = useStore(s => s.tree);
  const toggleStar = useStore(s => s.toggleStar);
  const addTag = useStore(s => s.addTag);
  const removeTag = useStore(s => s.removeTag);
  const linkBatch = useStore(s => s.linkBatch);
  const openDoc = useStore(s => s.openDoc);
  const [tagInput, setTagInput] = useState('');
  const [quickSel, setQuickSel] = useState('');
  const [batchOpen, setBatchOpen] = useState(false);
  const [checked, setChecked] = useState<Set<string>>(new Set());

  if (!currentPath) {
    return <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>未打开文档</div>;
  }

  // 库内 .md 文件供关联选择（排除当前文档与已关联项）
  const docs = tree.filter(n => n.type === 'doc');
  const mtime = tree.find(n => n.path === currentPath)?.mtime;
  const links = meta.links ?? [];
  const linkNames = new Map<string, string>();
  for (const d of docs) linkNames.set(d.path, d.name);
  const quickCandidates = docs.filter(d => d.path !== currentPath && !links.includes(d.path));

  const toggleCheck = (p: string) => {
    const n = new Set(checked); if (n.has(p)) n.delete(p); else n.add(p); setChecked(n);
  };

  return (
    <div style={{ padding: 14, overflow: 'auto', fontSize: 13, display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* 标题 + 星标 */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 12, borderBottom: '1px solid var(--control-border)' }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
        </div>
        <button onClick={toggleStar} title={meta.star ? '取消星标' : '星标'} style={iconBtn} aria-pressed={!!meta.star}>
          <Star size={16} fill={meta.star ? 'currentColor' : 'none'} color={meta.star ? 'var(--accent)' : 'var(--text-tertiary)'} />
        </button>
      </div>

      {/* 路径 */}
      <Section icon={<FileText size={13} />} title="路径">
        <div style={{ color: 'var(--text-tertiary)', wordBreak: 'break-all', lineHeight: 1.5 }}>{currentPath}</div>
      </Section>

      {/* 标签 */}
      <Section icon={<Tag size={13} />} title="标签">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
          {(meta.tags ?? []).map(t => (
            <span key={t} style={chip}>
              {t}
              <button style={chipX} onClick={() => removeTag(t)} title="移除标签"><X size={12} /></button>
            </span>
          ))}
          {(meta.tags ?? []).length === 0 && <span style={{ color: 'var(--text-tertiary)', opacity: 0.6 }}>暂无标签</span>}
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <input value={tagInput} onChange={e => setTagInput(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && tagInput.trim()) { addTag(tagInput.trim()); setTagInput(''); } }} placeholder="添加标签，回车确认" style={inp} />
          <button style={btn()} title="添加标签" onClick={() => { if (tagInput.trim()) { addTag(tagInput.trim()); setTagInput(''); } }}><Plus size={14} /></button>
        </div>
      </Section>

      {/* 关联文档：双向 + 批量 */}
      <Section icon={<Link2 size={13} />} title={"关联文档" + (links.length ? '（' + links.length + '）' : '')}>
        {links.length === 0 ? (
          <div style={{ color: 'var(--text-tertiary)', opacity: 0.6, marginBottom: 8 }}>暂无关联，可在下方快速关联或批量关联</div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 10 }}>
            {links.map(l => (
              <div key={l} title={l} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 10px', background: 'var(--bg-secondary)', borderRadius: 'var(--radius-sm)', border: '1px solid var(--control-border)', boxShadow: 'var(--shadow-soft)', transition: 'border-color .15s var(--ease), box-shadow .15s var(--ease)' }} onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--line-strong)'; e.currentTarget.style.boxShadow = 'var(--shadow-lift)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--control-border)'; e.currentTarget.style.boxShadow = 'var(--shadow-soft)'; }}>
                <span style={{ display: 'inline-flex', color: 'var(--text-tertiary)', flexShrink: 0 }}><Link2 size={14} /></span>
                <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-primary)', fontWeight: 500 }}>{linkNames.get(l) ?? l}</span>
                <span style={{ fontSize: 10, color: 'var(--text-tertiary)', flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 3 }}><ArrowLeftRight size={11} />双向</span>
                <button style={iconSmall} title="打开" onClick={() => openDoc(l)}><FileText size={13} /></button>
                <button style={iconSmall} title="解除关联（双向）" onClick={() => void linkBatch([l], true)}><X size={13} /></button>
              </div>
            ))}
          </div>
        )}

        {/* 快速双向关联 */}
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 10 }}>
          <ArrowLeftRight size={14} style={{ color: 'var(--text-tertiary)', flexShrink: 0 }} aria-label="快速双向关联" />
          <select value={quickSel} onChange={e => setQuickSel(e.target.value)} style={{ ...inp, flex: 1 }}>
            <option value="">选择文档，双向关联…</option>
            {quickCandidates.map(d => (<option key={d.path} value={d.path}>{d.name}</option>))}
          </select>
          <button style={btnPrimary(!quickSel)} title="建立双向关联" onClick={() => { if (quickSel) { void linkBatch([quickSel], false); setQuickSel(''); } }} disabled={!quickSel}>关联</button>
        </div>

        {/* 批量关联 */}
        <div style={{ border: '1px solid var(--control-border)', borderRadius: 6, overflow: 'hidden' }}>
          <button style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 6, padding: '6px 8px', background: 'transparent', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer' }} onClick={() => setBatchOpen(o => !o)}>
            <ListChecks size={14} />批量关联
            <ChevronDown size={14} style={{ marginLeft: 'auto', transform: batchOpen ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
          </button>
          {batchOpen && (
            <div style={{ borderTop: '1px solid var(--control-border)', maxHeight: 180, overflow: 'auto' }}>
              <div style={{ padding: 4, display: 'flex', flexDirection: 'column' }}>
                {quickCandidates.length === 0 ? (
                  <div style={{ padding: '6px 8px', color: 'var(--text-tertiary)', opacity: 0.6 }}>没有可关联的文档</div>
                ) : quickCandidates.map(d => (
                  <label key={d.path} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 8px', borderRadius: 4, cursor: 'pointer' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--control-border)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'} >
                    <input type="checkbox" checked={checked.has(d.path)} onChange={() => toggleCheck(d.path)} style={{ accentColor: 'var(--accent)' }} />
                    <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.name}</span>
                    {checked.has(d.path) && <Check size={13} style={{ color: 'var(--accent)' }} />}
                  </label>
                ))}
              </div>
            </div>
          )}
          {batchOpen && (
            <div style={{ display: 'flex', gap: 6, padding: '6px 8px', borderTop: '1px solid var(--control-border)', alignItems: 'center' }}>
              <button style={btn(quickCandidates.length === 0)} title="全部选中" onClick={() => { const n = new Set(checked); quickCandidates.forEach(d => n.add(d.path)); setChecked(n); }} disabled={quickCandidates.length === 0}><Folder size={13} />全选</button>
              <button style={btnPrimary(checked.size === 0)} title="为勾选文档建立双向关联" disabled={checked.size === 0} onClick={() => { const arr = [...checked]; void linkBatch(arr, false); setChecked(new Set()); setBatchOpen(false); }}>关联选中（{checked.size}）</button>
            </div>
          )}
        </div>
      </Section>

      {/* 时间 */}
      <Section icon={<Clock size={13} />} title="时间">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, color: 'var(--text-tertiary)' }}>
          <div>修改：{mtime ? new Date(mtime).toLocaleString('zh-CN') : '—'}</div>
          <div>创建：{meta.createdAt ? new Date(meta.createdAt).toLocaleString('zh-CN') : '—'}</div>
        </div>
      </Section>
    </div>
  );
}

function Section({ icon, title, children }: { icon: React.ReactNode; title: string; children: React.ReactNode }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--text-tertiary)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>{icon}{title}</div>
      {children}
    </div>
  );
}
const chip: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', gap: 4, background: 'var(--control-border)', color: 'var(--text-secondary)', borderRadius: 999, padding: '2px 8px', fontSize: 12 };
const chipX: React.CSSProperties = { border: 'none', background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer', display: 'inline-flex', padding: 0, borderRadius: 4 };
const inp: React.CSSProperties = { background: 'var(--bg-secondary)', border: '1px solid var(--control-border)', color: 'var(--text-primary)', borderRadius: 6, padding: '5px 8px', fontSize: 13, flex: 1, outline: 'none' };
const btn = (disabled?: boolean): React.CSSProperties => ({ minWidth: 30, height: 28, border: '1px solid var(--control-border)', background: 'transparent', color: 'var(--text-secondary)', cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: 6, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 4, padding: '0 8px', fontSize: 12, opacity: disabled ? 0.4 : 1 });
const btnPrimary = (disabled?: boolean): React.CSSProperties => ({ minWidth: 52, height: 28, border: 'none', background: 'var(--accent)', color: '#fff', cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: 6, padding: '0 10px', fontSize: 12, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: disabled ? 0.4 : 1 });
const iconBtn: React.CSSProperties = { border: 'none', background: 'transparent', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 4, borderRadius: 6 };
const iconSmall: React.CSSProperties = { border: 'none', background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 2, borderRadius: 4 };