// Shared UI components: tags, priority pills, progress bars, status pills, checkbox.
const { Icons: UIIcons } = window;

const PRIORITY_META = {
  high:   { label: 'Yüksek', cls: 'prio-high' },
  medium: { label: 'Orta',   cls: 'prio-med' },
  low:    { label: 'Düşük',  cls: 'prio-low' },
};

const STATUS_META = {
  todo:   { label: 'Yapılacak',  color: '#94a3b8', bg: 'var(--status-todo-bg)', fg: 'var(--status-todo)' },
  doing:  { label: 'Devam Eden', color: '#3b82f6', bg: 'var(--status-doing-bg)', fg: 'var(--status-doing)' },
  review: { label: 'İncelemede', color: '#a855f7', bg: 'var(--status-review-bg)', fg: 'var(--status-review)' },
  done:   { label: 'Tamamlandı', color: '#10b981', bg: 'var(--status-done-bg)', fg: 'var(--status-done)' },
};

const Tag = ({ tag }) => (
  <span className={`tag tag-${tag.color}`}>{tag.name}</span>
);

const Priority = ({ value }) => {
  const m = PRIORITY_META[value] || PRIORITY_META.medium;
  return (
    <span className={`prio ${m.cls}`}>
      <UIIcons.Flag size={10} strokeWidth={2.5} />
      {m.label}
    </span>
  );
};

const StatusPill = ({ status }) => {
  const m = STATUS_META[status] || STATUS_META.todo;
  return (
    <span className="status-pill" style={{ background: m.bg, color: m.fg }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />
      {m.label}
    </span>
  );
};

const Checkbox = ({ checked, onChange, size = 22 }) => (
  <div
    className={`checkbox ${checked ? 'checked' : ''}`}
    style={{ width: size, height: size }}
    onClick={(e) => { e.stopPropagation(); onChange?.(!checked); }}
  >
    {checked && <UIIcons.Check size={12} strokeWidth={3} />}
  </div>
);

const ProgressBar = ({ value, color = 'var(--accent)' }) => (
  <div className="progress-bar">
    <div className="progress-bar-fill" style={{ width: `${value}%`, background: color }} />
  </div>
);

const Avatar = ({ name, color }) => {
  const initials = name.split(' ').map(s => s[0]).join('').slice(0,2).toUpperCase();
  return <div className="avatar" style={color ? { background: color } : undefined}>{initials}</div>;
};

const EmptyState = ({ icon, title, subtitle, action }) => (
  <div className="empty">
    <div className="empty-icon">{icon}</div>
    <div className="empty-title">{title}</div>
    {subtitle && <div>{subtitle}</div>}
    {action && <div style={{ marginTop: 14 }}>{action}</div>}
  </div>
);

window.UI = { Tag, Priority, StatusPill, Checkbox, ProgressBar, Avatar, EmptyState, PRIORITY_META, STATUS_META };