/* ============================================
   CHAT HISTORY — List of past conversations
   ============================================ */
const CHAT_HISTORY = [
  { id: "chat_8f3a", topic: "Spindle bearing replacement procedure", date: "Today · 14:22", relTime: "5 min ago", doc: "CNC-Mazak-INTEGREX-i400 Maintenance v7.2", domain: "CNC", msgs: 4, current: true },
  { id: "chat_2c7d", topic: "Hydraulic seal replacement on press line 4", date: "Today · 11:08", relTime: "3 h ago", doc: "Hydraulic Systems Vol. III · §6.4", domain: "HYDRAULIC", msgs: 12 },
  { id: "chat_1ab9", topic: "PLC error code E-741 troubleshooting", date: "Today · 09:42", relTime: "5 h ago", doc: "Siemens S7-1500 Error Reference", domain: "ELECTRICAL", msgs: 7 },
  { id: "chat_94ef", topic: "LOTO procedure for grinding station 2", date: "Yesterday · 16:30", relTime: "1 d ago", doc: "Plant Safety SOP · §2", domain: "SAFETY", msgs: 3 },
  { id: "chat_5d62", topic: "Coolant concentration spec for tool steel", date: "Yesterday · 13:11", relTime: "1 d ago", doc: "Lubrication Standards 2025 · App. B", domain: "MAINTENANCE", msgs: 5 },
  { id: "chat_3e08", topic: "Annual calibration interval for torque tools", date: "May 21 · 10:24", relTime: "3 d ago", doc: "Calibration Master Log", domain: "QA", msgs: 6 },
  { id: "chat_a47c", topic: "VFD parameter set for conveyor 7", date: "May 20 · 17:55", relTime: "4 d ago", doc: "ABB ACS580 Programming · §12", domain: "ELECTRICAL", msgs: 9 },
  { id: "chat_b13f", topic: "Bearing failure mode signatures from vibration data", date: "May 20 · 09:15", relTime: "4 d ago", doc: "Reliability Eng. Handbook · §8.2", domain: "RELIABILITY", msgs: 18 },
  { id: "chat_77d1", topic: "Emergency stop circuit redundancy verification", date: "May 18 · 14:02", relTime: "6 d ago", doc: "ISO 13849-1 Compliance Notes", domain: "SAFETY", msgs: 11 },
  { id: "chat_60b8", topic: "Mazak alarm 1078 — Z-axis overcurrent", date: "May 17 · 11:30", relTime: "7 d ago", doc: "CNC-Mazak-INTEGREX Alarm Manual", domain: "CNC", msgs: 8 },
  { id: "chat_22f9", topic: "Pneumatic line FRL maintenance schedule", date: "May 16 · 15:48", relTime: "8 d ago", doc: "Pneumatics Manual · §3.7", domain: "PNEUMATIC", msgs: 4 },
  { id: "chat_4090", topic: "Welding rod storage humidity requirements", date: "May 15 · 09:00", relTime: "9 d ago", doc: "Welding SOP · App. C", domain: "FAB", msgs: 2 },
];

function ChatHistoryScreen({ onNavigate }) {
  const [filter, setFilter] = useState("All");
  const [search, setSearch] = useState("");
  const domains = ["All", "CNC", "ELECTRICAL", "HYDRAULIC", "SAFETY", "MAINTENANCE"];

  const filtered = CHAT_HISTORY.filter(c => {
    if (filter !== "All" && c.domain !== filter) return false;
    if (search && !c.topic.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Chat History</h1>
          <p className="page-subtitle">{filtered.length} of {CHAT_HISTORY.length} conversations · Retained for 180 days per policy</p>
        </div>
        <div className="row">
          <button className="btn btn--ghost"><Icons.Download size={14} /> Export</button>
          <button className="btn btn--primary" onClick={() => onNavigate("workspace")}><Icons.Plus size={14} /> New Chat</button>
        </div>
      </div>

      {/* Filter toolbar */}
      <Card bodyFlush>
        <div style={{ padding: "12px 16px", display: "flex", gap: 10, alignItems: "center", borderBottom: "1px solid var(--ink-200)" }}>
          <div className="topbar__search" style={{ width: 320, background: "white" }}>
            <Icons.Search />
            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search topics or document context…" />
          </div>
          <div className="row gap-4" style={{ background: "var(--ink-100)", padding: 2, borderRadius: 6 }}>
            {domains.map(d => (
              <button
                key={d}
                onClick={() => setFilter(d)}
                style={{
                  border: "none",
                  background: filter === d ? "white" : "transparent",
                  color: filter === d ? "var(--ink-900)" : "var(--ink-500)",
                  padding: "5px 10px",
                  borderRadius: 4,
                  fontWeight: filter === d ? 600 : 500,
                  fontSize: 12,
                  cursor: "pointer",
                  boxShadow: filter === d ? "var(--shadow-sm)" : "none",
                }}
              >{d}</button>
            ))}
          </div>
          <span className="spacer" />
          <button className="btn btn--ghost btn--sm"><Icons.Filter size={14} /> Date range</button>
          <button className="btn btn--ghost btn--sm">Sort: Recent</button>
        </div>

        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 36 }}></th>
              <th>Topic / Title</th>
              <th style={{ width: 160 }}>Date</th>
              <th>Last Document Context</th>
              <th style={{ width: 120 }}>Domain</th>
              <th style={{ width: 90 }} className="mono">Msgs</th>
              <th style={{ width: 110 }}>Action</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(chat => (
              <tr key={chat.id} style={chat.current ? { background: "var(--orange-50)" } : null}>
                <td>
                  <div style={{
                    width: 28, height: 28, borderRadius: 6,
                    background: chat.current ? "var(--orange-500)" : "var(--navy-50)",
                    color: chat.current ? "white" : "var(--navy-700)",
                    display: "grid", placeItems: "center"
                  }}><Icons.Chat size={14} /></div>
                </td>
                <td>
                  <div className="doc-name">
                    {chat.topic}
                    {chat.current && <span className="badge badge--orange" style={{ marginLeft: 8 }}>Current</span>}
                  </div>
                  <div className="mono text-xs muted">{chat.id}</div>
                </td>
                <td>
                  <div style={{ fontSize: 13 }}>{chat.date.split(" · ")[0]}</div>
                  <div className="mono text-xs muted">{chat.relTime}</div>
                </td>
                <td className="muted" style={{ fontSize: 12.5 }}>
                  <div className="row gap-6">
                    <Icons.File size={14} />
                    <span>{chat.doc}</span>
                  </div>
                </td>
                <td><Badge kind="blue">{chat.domain}</Badge></td>
                <td className="mono">{chat.msgs}</td>
                <td>
                  <button
                    className="btn btn--secondary btn--sm"
                    onClick={() => onNavigate("workspace")}
                  ><Icons.Play size={11} /> Resume</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </>
  );
}

window.ChatHistoryScreen = ChatHistoryScreen;