#{b.no}

{/* Title (editable) */} set({ baslik: v })}/>

rev {String(b.revision).padStart(2,"0")}

Atama

set({ lead: u })}/> {b.contributors.map((u, i) => ( { const next = [...b.contributors]; next[i] = nu; set({ contributors: next }); }} onRemove={() => { const next = b.contributors.filter((_, idx) => idx !== i); set({ contributors: next }); }}/> ))} {b.reviewer && set({ reviewer: u })} onRemove={() => set({ reviewer: null })}/>} set({ contributors: [...b.contributors, u] })} onAddReviewer={(u) => set({ reviewer: u })} allUsers={allUsers} hasReviewer={!!b.reviewer}/>

Zaman

Açıldı{formatFull(b.acilma)} Deadline{formatFull(b.deadline)} Kalan {formatDelta(b.deltaH)} Timezone Europe/Istanbul (UTC+3)

Slack thread

#{b.brand && b.brand.name.toLowerCase().replace(/\s+/g,"-").substring(0,20)} · 22 mesaj ↗

Aktivite

{buildActivity(b).map((it, i, arr) => ( ))}

Not

set({ notes: e.target.value })}
            placeholder="Brief'le ilgili kısa bir not bırak…"
            style={{
              marginTop: 8, width:"100%", minHeight: 64, resize:"vertical",
              padding: 10, borderRadius: 8, border:"1px solid var(--line)",
              background:"var(--surface-sub)", color:"var(--ink)",
              font:"400 13px/1.5 var(--font-sans)", outline:"none"
            }}/>
        </div>

<footer style={{padding:"12px 20px", borderTop:"1px solid var(--line)",
          display:"flex", justifyContent:"space-between", alignItems:"center"}}>
          <Button kind="ghost" icon={<I.User size={13}/>}>Bana ata</Button>
          <div style={{display:"flex", gap:8}}>
            <Button kind="secondary" icon={<I.Slack size={13}/>}>Slack'te aç</Button>
            <Button kind="primary" icon={<I.Check size={13}/>}>Kaydet</Button>
          </div>
        </footer>
      </aside>
    </>
  );
}

function Hr() { return <div style={{height: 1, background:"var(--line)", margin:"18px 0"}}/>; }

const ghostBtn = {
  display:"inline-flex", alignItems:"center", gap:6,
  font:"500 12px/1 var(--font-sans)", color:"var(--ink-3)",
  background:"transparent", border:"1px dashed var(--line-strong)",
  borderRadius: 6, padding:"6px 10px", cursor:"pointer"
};

function Tick({ when, who, verb, tail, last }) {
  return (
    <div style={{
      display:"flex", alignItems:"baseline", gap:10, padding:"8px 0",
      borderBottom: last ? "0" : "1px solid var(--line-soft)"
    }}>
      <span style={{font:"500 11px/1.3 var(--font-mono)", color:"var(--ink-4)", minWidth: 40}}>{when}</span>
      <span style={{font:"400 13px/1.4 var(--font-sans)", color:"var(--ink-2)"}}>
        <b style={{color:"var(--ink)"}}>{who}</b> {verb}{tail ? <span style={{color:"var(--ink-3)"}}> · {tail}</span> : null}
      </span>
    </div>
  );
}

// Bir zaman damgasını "5dk önce" / "dün 14:30" / "12 May" gibi göreceli format'a çevirir.
function formatRel(ts) {
  if (!ts) return "—";
  const d = new Date(ts);
  if (isNaN(d.getTime())) return "—";
  const now = Date.now();
  const diffMs = now - d.getTime();
  const diffMin = Math.floor(diffMs / 60000);
  const diffH   = Math.floor(diffMs / 3600000);
  const diffD   = Math.floor(diffMs / 86400000);
  if (diffMin < 1) return "şimdi";
  if (diffMin < 60) return `${diffMin}dk`;
  if (diffH < 24) {
    const hh = String(d.getHours()).padStart(2, "0");
    const mm = String(d.getMinutes()).padStart(2, "0");
    return `${hh}:${mm}`;
  }
  if (diffD === 1) return "dün";
  if (diffD < 7) return `${diffD}g önce`;
  const months = ["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"];
  return `${d.getDate()} ${months[d.getMonth()]}`;
}

// Canvas Geçmiş kolonu emoji → human-readable etiket
const GECMIS_LABELS = {
  '⏳': 'sıraya alındı',
  '🎨': 'tasarımcı başladı',
  '✍️': 'editör başladı',
  '🤖': 'AI başladı',
  '👀': 'incelemeye gönderildi',
  '👌': 'onaylandı',
  '✅': 'tamamlandı',
  '🔴': '🔴 acil yapıldı',
  '🟠': '🟠 yüksek yapıldı',
  '🟡': '🟡 normal yapıldı',
  '🟢': '🟢 düşük yapıldı',
  '📈': 'öncelik yükseldi',
  '📉': 'öncelik düştü',
  '🚨': 'kritik uyarı',
  '⚠️': 'uyarı',
  '🔁': 'revize edildi',
  '⛔': 'engellendi',
  '⏰': 'deadline geçti',
};
const TR_MONTHS_SHORT = { Oca: 0, Ock: 0, Şub: 1, Sub: 1, Mar: 2, Nis: 3, May: 4, Haz: 5, Tem: 6, Ağu: 7, Agu: 7, Eyl: 8, Eki: 9, Ekm: 9, Kas: 10, Ara: 11 };

/**
 * Canvas Geçmiş kolonu string'ini parse eder.
 * Örnek: "⏳18May13:16→🎨18May13:22→👀18May16:48→🎨18May16:49→👀18May17:22"
 * Veya:  "⏳19May08:14 (Görkem GM açtı) / 🔴Yön19May08:26 / ⚠️STALE🔴 19May~10:00"
 *
 * Döner: [{ ts, emoji, label, context, day, month, time }]
 */
function parseGecmisString(gecmis) {
  if (!gecmis) return [];
  const parts = gecmis.split(/\s*[→\/]\s*/).map(s => s.trim()).filter(Boolean);
  const events = [];
  const now = new Date();
  const year = now.getFullYear();

for (const p of parts) {
    // Emoji'leri parse — Türkçe karakter ve emoji çoklu kod noktası destekli
    const emojiMatch = p.match(/([\p{Extended_Pictographic}]+(?:️)?)/u);
    if (!emojiMatch) continue;
    const emoji = emojiMatch[1];

// Tarih + saat: "18May13:16" veya "19May~10:00"
    const dm = p.match(/(\d{1,2})([A-Za-zŞşĞğÜüÇçÖöİı]+)\s*~?\s*(\d{1,2}:\d{2})/);
    if (!dm) continue;
    const day = parseInt(dm[1], 10);
    const monAbbr = dm[2].slice(0, 3);
    const mon = TR_MONTHS_SHORT[monAbbr];
    if (mon == null) continue;
    const [hh, mm] = dm[3].split(':').map(n => parseInt(n, 10));

// Açıklama (parantez içi veya emoji+date sonrası kalan text)
    let context = p
      .replace(emojiMatch[0], '')
      .replace(dm[0], '')
      .replace(/[()]/g, '')
      .trim();

// TR timezone (UTC+3) varsayım — local Date constructor TR ortamında çalışacak
    const ts = new Date(year, mon, day, hh, mm, 0).getTime();
    const label = GECMIS_LABELS[emoji] || emoji;
    events.push({ ts, emoji, label, context, day, mon, time: dm[3] });
  }
  return events;
}

/**
 * Brief'in kendi verisinden gerçek aktivite akışı üretir.
 * En yeni en üstte (descending), brief açılışı en altta.
 *
 * Canvas brief'lerinde `b.gecmis` Canvas Geçmiş kolonu ham string'i içerir —
 * bu gerçek event timeline'ı sağlar (timestamps dahil).
 */
function buildActivity(b) {
  const items = [];

// ─── Mevcut durum (en yeni, üstte) ───
  const durumLabel = {
    yeni:        "⏳ Sırada",
    calisiliyor: "🎨 Çalışılıyor",
    incelemede:  "👀 İncelemede",
    blokeli:     "⛔ Blokeli",
    tamamlandi:  "✅ Tamamlandı",
  };
  if (durumLabel[b.durum]) {
    const tail = b.notes && b.notes.length < 120 ? b.notes : '';
    items.push({
      when: b.durum === "tamamlandi" && b.bitis ? formatRel(b.bitis) : "şimdi",
      who:  "",
      verb: durumLabel[b.durum],
      tail,
    });
  }

// ─── Acil uyarılar ───
  if (b.stale) items.push({ when: "", who: "", verb: "🚨 STALE", tail: "uzun süre pasif" });
  if (b.deltaH !== undefined && b.deltaH <= 0) {
    items.push({ when: "", who: "", verb: "⏰ Deadline geçti", tail: "" });
  }

// ─── Canvas Geçmiş kolonu (Görkem'in skill'inin yazdığı timeline) ───
  // Bu en zengin event kaynağı: gerçek timestamp + her durum değişimi
  const gecmisEvents = parseGecmisString(b.gecmis);
  if (gecmisEvents.length > 0) {
    // En yeni en üstte sırala
    gecmisEvents.sort((a, b) => b.ts - a.ts);
    for (const ev of gecmisEvents) {
      items.push({
        when: `${ev.day} ${["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"][ev.mon]} ${ev.time}`,
        who:  "",
        verb: ev.label,
        tail: ev.context && ev.context.length < 80 ? ev.context : "",
      });
    }
  } else {
    // ─── Geçmiş yoksa fallback — brief field'larından çıkarım ───
    if (b.revision && b.revision > 0) {
      items.push({ when: "", who: "", verb: `🔁 Revize ×${b.revision}`, tail: "" });
    }
    if (b.reviewer) {
      items.push({
        when: "", who: b.lead?.name?.split(" ")[0] || "",
        verb: "inceleyici atadı",
        tail: b.reviewer.name,
      });
    }
    const contribs = (b.contributors || []).filter(Boolean);
    if (contribs.length > 0) {
      items.push({
        when: "",
        who:  b.lead?.name?.split(" ")[0] || "",
        verb: "atadı",
        tail: contribs.map(c => c.name?.split(" ")[0] || c.name).join(", "),
      });
    }
  }

// ─── Brief açıldı (en eski, altta) — her zaman gösterilir ───
  items.push({
    when: formatRel(b.acilma),
    who:  b.lead?.name?.split(" ")[0] || "Bilinmiyor",
    verb: "açtı",
    tail: "brief oluşturuldu",
  });

return items;
}

window.BriefDrawer = BriefDrawer;