// Screen 6: Domain Registry
const { useState: useS6 } = React;

function Screen_Domains() {
  const data = window.GoldaData;
  const [classified, setClassified] = useS6({});
  const unknown = data.domains.filter(d => d.type === "Unknown" && !classified[d.domain]);
  const known = data.domains.filter(d => !(d.type === "Unknown" && !classified[d.domain]));

  const typeMap = {
    Vendor: "b-wait-carrier",
    Customer: "b-wait-customer",
    Carrier: "b-progress",
    Internal: "b-resolved",
    Unknown: "b-blocked"
  };

  return (
    <div>
      <div className="sec-head">
        <h2>Domain Registry</h2>
        <span className="sec-count">{data.domains.length} domains tracked</span>
        <div className="sec-actions">
          <button className="btn btn-sm" title="Not enabled in this preview" disabled>Import from CSV</button>
          <button className="btn btn-sm btn-primary" title="Not enabled in this preview" disabled>+ Add domain</button>
        </div>
      </div>

      {unknown.length > 0 && (
        <div className="banner">
          <span style={{ fontSize: 16 }}>⚠</span>
          <div>
            <div><strong>{unknown.length} unknown {unknown.length === 1 ? "domain" : "domains"}</strong> · Golda has paused 1 engagement until you classify {unknown.length === 1 ? "this" : "these"}.</div>
            <div style={{ fontWeight: 400, fontSize: 11.5, marginTop: 2 }}>An unknown domain might be a legitimate new contact or a phishing attempt — classify before approving sends.</div>
          </div>
        </div>
      )}

      {unknown.length > 0 && (
        <div style={{ marginBottom: 18 }}>
          {unknown.map(d => (
            <div key={d.domain} className="card" style={{ marginBottom: 8, borderColor: "var(--st-danger-border)" }}>
              <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 14, alignItems: "center" }}>
                <div>
                  <div className="row" style={{ gap: 8 }}>
                    <span className="mono" style={{ fontWeight: 600, fontSize: 14 }}>{d.domain}</span>
                    <span className="badge b-blocked"><span className="dot"/>Unknown</span>
                    <span className="tag">First seen {d.firstSeen}</span>
                  </div>
                  <div className="muted" style={{ marginTop: 4, fontSize: 12.5 }}>{d.notes}</div>
                </div>
                <div className="row" style={{ gap: 6 }}>
                  <span style={{ fontSize: 11, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 600 }}>Classify as:</span>
                  {["Vendor","Customer","Carrier","Other"].map(t => (
                    <button key={t} className="btn btn-sm" title="Not enabled in this preview" disabled>{t}</button>
                  ))}
                  <button className="btn btn-sm btn-danger" title="Not enabled in this preview" disabled>Block</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      <div className="card">
        <div className="card-header">
          <h3 className="card-title">Known domains</h3>
          <div className="spacer"/>
          <span className="search" style={{ width: 220, margin: 0 }}>{I.search}<input placeholder="Filter domains…"/></span>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Domain</th>
              <th style={{ width: 110 }}>Type</th>
              <th style={{ width: 90 }}>Trusted</th>
              <th style={{ width: 110 }}>First seen</th>
              <th style={{ width: 140 }}>Approved by</th>
              <th style={{ width: 100 }}>Last used</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            {known.map(d => (
              <tr key={d.domain} style={{ cursor: "default" }}>
                <td className="mono" style={{ fontWeight: 500 }}>{d.domain}</td>
                <td><span className={`badge ${typeMap[d.type]}`}><span className="dot"/>{d.type}</span></td>
                <td>{d.trusted ? <span className="success">✓ Yes</span> : <span className="danger">✕ No</span>}</td>
                <td className="mono muted">{d.firstSeen}</td>
                <td>{d.approvedBy}</td>
                <td className="muted">{d.lastUsed}</td>
                <td className="muted">{d.notes || "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.Screen_Domains = Screen_Domains;