// CardByte Enterprise — Contacts repository (searchable list).
const React = window.React;
const Icon = window.CBIcon;

const CONTACTS = [
  { name: "Rohan Mehta", role: "Procurement Head", company: "Metro Cash & Carry", tag: "Sales", color: "indigo", fav: true },
  { name: "Sara Williams", role: "VP Marketing", company: "EDF Energy", tag: "Public Sector", color: "blue", fav: false },
  { name: "Amit Patel", role: "Cardiologist", company: "Apollo Hospitals", tag: "Hospitals", color: "green", fav: true },
  { name: "Priya Nair", role: "Branch Manager", company: "ANAND Group", tag: "Banks", color: "coral", fav: false },
  { name: "David Chen", role: "Plant Director", company: "Diviniti", tag: "Automobile", color: "gray", fav: false },
  { name: "Meera Iyer", role: "Talent Lead", company: "Masters Union", tag: "Sales", color: "indigo", fav: true },
];

function ContactsScreen() {
  const { Avatar, Tag, Badge, Button } = window.CardByteDesignSystem_069862;
  const [fav, setFav] = React.useState(() => CONTACTS.map((c) => c.fav));
  return (
    <div style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "18px 22px", borderBottom: "1px solid var(--border-subtle)", flexWrap: "wrap" }}>
        <h3 style={{ fontSize: 17, fontWeight: 600, color: "var(--text-strong)" }}>Contacts</h3>
        <Badge tone="blue">{CONTACTS.length} total</Badge>
        <div style={{ marginLeft: "auto", display: "flex", gap: 10 }}>
          <button style={chip}><Icon name="filter" size={15} /> Filter</button>
          <Button variant="primary" size="sm" iconLeft={<Icon name="plus" size={16} />}>Add Contact</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "2fr 1.4fr 1fr auto", gap: 12, padding: "10px 22px", background: "var(--cb-gray-50)", fontSize: 11.5, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--text-muted)" }}>
        <span>Name</span><span>Company</span><span>Segment</span><span></span>
      </div>

      {CONTACTS.map((c, i) => (
        <div key={c.name} style={{ display: "grid", gridTemplateColumns: "2fr 1.4fr 1fr auto", gap: 12, alignItems: "center", padding: "13px 22px", borderTop: i ? "1px solid var(--cb-gray-100)" : "none" }}
          onMouseEnter={(e) => (e.currentTarget.style.background = "var(--cb-blue-50)")}
          onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Avatar name={c.name} size={38} />
            <div>
              <div style={{ fontWeight: 600, color: "var(--text-strong)", fontSize: 14.5 }}>{c.name}</div>
              <div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{c.role}</div>
            </div>
          </div>
          <span style={{ fontSize: 13.5, color: "var(--text-body)" }}>{c.company}</span>
          <span><Tag color={c.color}>{c.tag}</Tag></span>
          <div style={{ display: "flex", gap: 4, color: "var(--text-muted)" }}>
            <button style={iconBtn(fav[i] ? "var(--cb-gold)" : "var(--text-muted)")} onClick={() => setFav((f) => f.map((v, j) => (j === i ? !v : v)))}><Icon name="star" size={17} /></button>
            <button style={iconBtn("var(--cb-blue)")}><Icon name="mail" size={17} /></button>
            <button style={iconBtn("var(--text-muted)")}><Icon name="chevronRight" size={17} /></button>
          </div>
        </div>
      ))}
    </div>
  );
}
const chip = { display: "inline-flex", alignItems: "center", gap: 7, height: 36, padding: "0 14px", border: "1px solid var(--border-default)", background: "#fff", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 500, color: "var(--text-body)", cursor: "pointer" };
const iconBtn = (color) => ({ border: "none", background: "transparent", cursor: "pointer", color, display: "inline-flex", padding: 6, borderRadius: 8 });
window.CBContactsScreen = ContactsScreen;