/* Dailies IC Home — the launcher before the IC Request chat.
   Two paths: start a new update (→ chat) or check on one already in flight.
   ============================================================ */

const { useState } = React;

const ME = { name: 'Maya Chen', role: 'Lead Character Artist', initials: 'MC' };

/* Where the chat + feedback thread live */
const CHAT_HREF = 'IC Request.html';
const THREAD_HREF = 'Feedback Thread.html';

/* ---------- Icons ---------- */
const ArrowNE = ({ size = 16 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 17L17 7M17 7H7M17 7v10"/>
  </svg>
);
const Chevron = ({ size = 16 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 9l6 6 6-6"/>
  </svg>
);
const PlayIcon = ({ size = 10 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" stroke="none">
    <path d="M7 5l13 7-13 7V5z"/>
  </svg>
);

/* ---------- Data: updates already in flight ---------- */
const UPDATES = [
  {
    id: 'u1',
    asset: 'Eloise \u00b7 Pose v2',
    thumb: 'eloise', kind: 'image',
    phase: 'Refinement',
    status: 'feedback',
    when: '12m ago',
    reviewer: 'Brian Robbins',
    note: 'Latest version of the radiator pose \u2014 wanted a gut read on the silhouette before I commit to ink.',
    feedback: {
      headline: 'Silhouette push, redirect the dog.',
      actions: [
        'Push the silhouette one more notch \u2014 wilder hair, more attitude.',
        'Redirect the dog: eyeline up, or move him back six inches.',
        'Bring the radiator-angle alternative too.',
      ],
    },
  },
  {
    id: 'u2',
    asset: 'Bucket List \u00b7 Ep 4 cold open',
    thumb: 'bucket', kind: 'video',
    phase: 'Final review',
    status: 'reviewing',
    when: '1h ago',
    reviewer: 'Eve Park',
    note: 'Final color pass on the cold open. Pacing question in the middle beat \u2014 flagged it in the note.',
  },
  {
    id: 'u3',
    asset: 'IS\u00d7OP \u00b7 Title card \u201cThe Crew Lands\u201d',
    thumb: 'speed', kind: 'image',
    phase: 'Concept',
    status: 'queue',
    when: '2h ago',
    reviewer: null,
    queuePos: 2,
    note: 'First concept pass on the title lockup. Two type directions inside.',
  },
  {
    id: 'u4',
    asset: 'Eloise \u00b7 Endpaper ink',
    thumb: 'eloise-cream', kind: 'image',
    phase: 'Color pass',
    status: 'draft',
    when: 'Started yesterday',
    note: 'Half-written \u2014 attached the art, still need to add the phase and a note.',
  },
  {
    id: 'u5',
    asset: 'Bucket List \u00b7 Sponsor reel cut B',
    thumb: 'bucket', kind: 'video',
    phase: 'Refinement',
    status: 'closed',
    when: '2 days ago',
    reviewer: 'Eve Park',
    feedback: {
      headline: 'Pacing fixed \u2014 ship it.',
      actions: [
        'Trim landed well; cut B is the one.',
        'No further notes \u2014 push to delivery.',
      ],
    },
  },
];

const STATUS_LABEL = {
  feedback: 'Feedback in',
  reviewing: 'In review',
  queue: 'In queue',
  draft: 'Draft',
  closed: 'Addressed',
};

/* ---------- Thumbnail ---------- */
function RowThumb({ u }) {
  if (u.thumb === 'eloise') {
    return (
      <div className="row-thumb">
        <img src="assets/eloise.jpg" alt={u.asset}/>
      </div>
    );
  }
  const mono =
    u.thumb === 'bucket' ? 'BLF' :
    u.thumb === 'speed'  ? 'IS\u00d7OP' :
    u.thumb === 'eloise-cream' ? 'ELO' : 'BSP';
  return (
    <div className="row-thumb">
      <span className="mono">{mono}</span>
      {u.kind === 'video' && <span className="play"><PlayIcon size={9}/></span>}
    </div>
  );
}

/* ---------- Status badge ---------- */
function Status({ status }) {
  return (
    <span className={`status ${status}`}>
      <span className="sdot"></span>
      <span>{STATUS_LABEL[status]}</span>
    </span>
  );
}

/* ---------- Routing timeline (queue / reviewing) ---------- */
function Timeline({ u }) {
  const reviewing = u.status === 'reviewing';
  const steps = [
    { key: 'sent', label: 'Sent up the pipeline', meta: u.when, state: 'done' },
    { key: 'routed', label: `Routed by phase \u2014 ${u.phase}`, meta: 'Pipeline assigned the reviewer', state: 'done' },
    reviewing
      ? { key: 'now', label: `${u.reviewer} is reviewing now`, meta: 'Eyes on it \u2014 sit tight', state: 'active' }
      : { key: 'queued', label: `In ${u.reviewer ? u.reviewer + '\u2019s' : 'the'} queue`, meta: u.queuePos ? `Position ${u.queuePos} \u2014 a couple ahead of you` : 'Waiting to be picked up', state: 'active' },
    { key: 'back', label: 'Feedback returns here', meta: 'You\u2019ll get a ping the moment it lands', state: 'pending' },
  ];
  return (
    <div className="timeline">
      {steps.map(s => (
        <div key={s.key} className={`tl-step ${s.state}`}>
          <div className="tl-rail">
            <span className="tl-node"></span>
            <span className="tl-line"></span>
          </div>
          <div className="tl-text">
            <span className="tl-label">{s.label}</span>
            <span className="tl-meta">{s.meta}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Feedback payload ---------- */
function FeedbackBlock({ u }) {
  return (
    <>
      <div className="fb-headline">{u.feedback.headline}</div>
      <ul className="fb-actions">
        {u.feedback.actions.map((a, i) => (
          <li key={i} className="fb-action">
            <span className="num">{String(i + 1).padStart(2, '0')}</span>
            <span>{a}</span>
          </li>
        ))}
      </ul>
    </>
  );
}

/* ---------- Update row ---------- */
function Row({ u, open, onToggle }) {
  return (
    <div className={`row ${u.status} ${open ? 'open' : ''}`}>
      <button className="row-main" onClick={onToggle}>
        <RowThumb u={u}/>
        <div className="row-info">
          <span className="row-name">{u.asset}</span>
          <span className="row-sub">
            <span className="row-phase">{u.phase}</span>
            <span className="row-when">{u.when}</span>
          </span>
        </div>
        <div className="row-right">
          <Status status={u.status}/>
          <span className="row-chev"><Chevron size={16}/></span>
        </div>
      </button>

      <div className="row-detail">
        <div className="detail-inner">
          {u.status === 'feedback' && (
            <>
              <FeedbackBlock u={u}/>
              <div className="detail-actions">
                <a className="daction primary" href={THREAD_HREF}>Open thread <ArrowNE size={13}/></a>
                <button className="daction ghost" onClick={onToggle}>Mark addressed</button>
              </div>
            </>
          )}

          {(u.status === 'reviewing' || u.status === 'queue') && (
            <>
              {u.note && (
                <div className="snap">
                  <span className="snap-eb">What you sent</span>
                  {u.note}
                </div>
              )}
              <Timeline u={u}/>
            </>
          )}

          {u.status === 'draft' && (
            <>
              <div className="snap">
                <span className="snap-eb">Where you left off</span>
                {u.note}
              </div>
              <div className="detail-actions">
                <a className="daction primary" href={CHAT_HREF}>Continue draft <ArrowNE size={13}/></a>
              </div>
            </>
          )}

          {u.status === 'closed' && u.feedback && (
            <>
              <div className="snap">
                <span className="snap-eb">Resolved {u.when} · {u.reviewer}</span>
                {u.note || 'Closed out.'}
              </div>
              <FeedbackBlock u={u}/>
              <div className="detail-actions">
                <a className="daction ghost" href={THREAD_HREF}>Open thread <ArrowNE size={13}/></a>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- Main ---------- */
function HomeApp() {
  const [openId, setOpenId] = useState('u1'); // feedback row pre-opened

  const needs = UPDATES.filter(u => u.status === 'feedback').length;
  const inFlight = UPDATES.filter(u => u.status !== 'closed').length;

  const toggleRow = (id) => setOpenId(cur => (cur === id ? null : id));

  return (
    <div className="home">
      {/* Header */}
      <div className="home-head">
        <div className="home-mark">
          <img className="mark-logo" src="assets/logo/dailies-icon-flat.svg" alt="Dailies" />
          <span className="role">IC · Maya's desk</span>
        </div>
        <SurfaceNav current="ic-home" role="ic"/>
        <div className="home-user">
          <div className="avatar">{ME.initials}</div>
          <div className="name">
            <strong>{ME.name}</strong>
            <span>{ME.role}</span>
          </div>
        </div>
      </div>

      <div className="home-scroll">
        {/* Full-width primary banner */}
        <a className="banner" href={CHAT_HREF}>
          <div className="banner-text">
            <div className="banner-eyebrow">
              <span className="dot"></span>
              <span>Thu · May 28 · Good morning</span>
            </div>
            <h1 className="banner-title">Start an update</h1>
            <p className="banner-body">Chat with the agent. Point it at your work — it assembles the request and routes it up the pipeline by phase.</p>
          </div>
          <span className="banner-arrow"><ArrowNE size={22}/></span>
        </a>

        {/* In-flight list — always visible */}
        <div className="flight">
          <div className="flight-head">
            <span className="flight-eb">Your updates</span>
            <span className="flight-rule"></span>
            <span className="flight-count">
              {needs > 0 && <span className="needs">{needs} need you</span>}
              {needs > 0 && <span> · </span>}
              {inFlight} in flight
            </span>
          </div>
          <div className="flight-list">
            {UPDATES.map(u => (
              <Row
                key={u.id}
                u={u}
                open={openId === u.id}
                onToggle={() => toggleRow(u.id)}
              />
            ))}
          </div>
        </div>

        <div className="home-foot">
          <span className="rule"></span>
          <span className="lbl">Dailies · IC</span>
          <span className="rule"></span>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HomeApp/>);