// Screen 9: Feedback Insights
function Screen_Feedback() {
  const stats = [
    { label: "Approval rate", value: "78%", trend: "+4pp vs last 30d", good: true },
    { label: "Rejection rate", value: "11%", trend: "-2pp vs last 30d", good: true },
    { label: "Human handled", value: "8%", trend: "+1pp", good: false },
    { label: "Delayed", value: "3%", trend: "stable", good: true }
  ];

  const rejections = [
    {
      pattern: "Chasing HBL too early (before BOOKED step completed)",
      scope: "Polytec Plastics · Ningbo lane",
      count: 6,
      suggest: "Move HBL chase trigger from REO+3d to BOOKED+1d"
    },
    {
      pattern: "Including customer name in vendor email to Asian suppliers",
      scope: "All customers · Asia lanes",
      count: 9,
      suggest: "Strip customer name from vendor drafts on Asia lanes"
    },
    {
      pattern: "Asking for insurance reference when customer handles internally",
      scope: "Polytec Plastics · all lanes",
      count: 4,
      suggest: "Demote 'Insurance ref' to 'Not needed' for Polytec"
    },
    {
      pattern: "Sending pickup chasers on Saturdays",
      scope: "All customers · all lanes",
      count: 7,
      suggest: "Block outbound sends Fri evening → Sun morning"
    }
  ];

  const fieldCorrections = [
    { field: "ETD", count: 14 },
    { field: "HBL number", count: 9 },
    { field: "Gross weight", count: 7 },
    { field: "Vessel/voyage", count: 5 },
    { field: "Pickup date", count: 4 },
    { field: "Volume (CBM)", count: 3 }
  ];
  const maxFC = Math.max(...fieldCorrections.map(f=>f.count));

  return (
    <div>
      <div className="sec-head">
        <h2>Feedback Insights</h2>
        <span className="sec-count">Last 30 days · what Golda learned from you</span>
        <div className="sec-actions">
          <button className="btn btn-sm" title="Not enabled in this preview" disabled>Last 7d</button>
          <button className="btn btn-sm" style={{ background: "var(--accent-bg)", borderColor: "var(--accent-border)", color: "var(--accent)" }} title="Not enabled in this preview" disabled>Last 30d</button>
          <button className="btn btn-sm" title="Not enabled in this preview" disabled>Last 90d</button>
        </div>
      </div>

      <div className="stat-grid">
        {stats.map(s => (
          <div key={s.label} className="stat">
            <div className="stat-label">{s.label}</div>
            <div className="stat-value">{s.value}</div>
            <div className={`stat-trend ${s.good ? "" : "bad"}`}>{s.trend}</div>
          </div>
        ))}
      </div>

      <div className="split">
        <div>
          <div className="card" style={{ marginBottom: 14 }}>
            <div className="card-header">
              <h3 className="card-title">Top rejection patterns</h3>
              <span className="card-sub">Approve to write a rule, reject to dismiss</span>
            </div>
            {rejections.map((r,i)=>(
              <div key={i} style={{
                padding: "12px 18px",
                borderBottom: i < rejections.length-1 ? "1px solid var(--border-subtle)" : 0,
                display: "grid",
                gridTemplateColumns: "1fr auto",
                gap: 12,
                alignItems: "center"
              }}>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{r.pattern}</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>
                    {r.scope} · <span style={{ color: "var(--danger)", fontWeight: 600 }}>rejected {r.count}×</span>
                  </div>
                  <div style={{ marginTop: 8, padding: "6px 10px", background: "var(--accent-bg)", borderRadius: 5, fontSize: 12, color: "var(--text-primary)" }}>
                    <span className="golda-avatar" style={{ width: 14, height: 14, fontSize: 8, marginRight: 6, display: "inline-grid", verticalAlign: "middle" }}>G</span>
                    Suggestion: <strong>{r.suggest}</strong>
                  </div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <button className="btn btn-sm btn-primary" title="Not enabled in this preview" disabled>Apply rule</button>
                  <button className="btn btn-sm" title="Not enabled in this preview" disabled>Dismiss</button>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="card" style={{ marginBottom: 14 }}>
            <div className="card-header">
              <h3 className="card-title">Corrections by field</h3>
              <span className="card-sub">Where Golda is wrong most</span>
            </div>
            <div className="card-body">
              {fieldCorrections.map(f=>(
                <div key={f.field} className="bar-row">
                  <span>{f.field}</span>
                  <div className="bar-track"><div className="bar-fill warn" style={{ width: `${(f.count/maxFC)*100}%` }}/></div>
                  <span className="bar-num">{f.count}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <h3 className="card-title">Training candidates</h3>
            </div>
            <div className="card-body">
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div>
                  <div className="stat-value" style={{ fontSize: 28 }}>247</div>
                  <div className="muted" style={{ fontSize: 12 }}>reviewed decisions ready</div>
                </div>
                <div style={{ flex: 1 }}>
                  <button className="btn btn-sm btn-primary" style={{ width: "100%" }} title="Not enabled in this preview" disabled>Review batch →</button>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 6, textAlign: "center" }}>
                    Approved + edited drafts become training data for Golda's next model run.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Screen_Feedback = Screen_Feedback;