// ---------- Clients page ----------

const ClientsPage = ({ onOpenProject, onOpenMobileMenu }) => {
  const [view, setView] = React.useState("cards");
  return (
    <div>
      <Topbar
        eyebrow="WORKSPACE"
        title="Clients"
        onOpenMobileMenu={onOpenMobileMenu}
        actions={
          <Button
            variant="primary"
            size="md"
            icon={<window.Icon.Plus size={13} />}
            onClick={() => window.ToastEvents.emit({ kind: "info", title: "Add client", body: "Invite flow coming in Phase 2." })}
          >
            Add client
          </Button>
        }
      />
      <div className="hd-page-pad" style={{ padding: "24px 32px 60px", display: "flex", flexDirection: "column", gap: 20 }}>
        {/* Top metrics */}
        <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          <StatCard label="Active clients" value="5" detail="3 retainers" tone="harbor" iconName="Users" />
          <StatCard label="Lifetime value" value="$932K" detail="across roster" tone="teal" iconName="Trend" />
          <StatCard label="Avg approval time" value="2.4d" detail="—0.6d this quarter" tone="amber" iconName="Clock" />
          <StatCard label="Client NPS" value="62" detail="from 4 surveys" tone="lavender" iconName="Star" />
        </div>

        {/* Toolbar */}
        <Card className="hd-mobile-row" style={{ padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <FilterChip active>All <span style={{ opacity: 0.5, marginLeft: 4 }}>{HD.clients.length}</span></FilterChip>
            <FilterChip tone="harbor">Active</FilterChip>
            <FilterChip tone="lavender">Retainer</FilterChip>
            <FilterChip>Paused</FilterChip>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <FilterSelect label="Sort" value="By activity" />
            <div style={{ display: "flex", gap: 4, padding: 3, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.05)", borderRadius: 8 }}>
              <ViewToggle active={view === "cards"} onClick={() => setView("cards")} iconName="Grid" label="" />
              <ViewToggle active={view === "table"} onClick={() => setView("table")} iconName="List" label="" />
            </div>
          </div>
        </Card>

        {view === "cards" ? (
          <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {HD.clients.map(c => <ClientCard key={c.id} client={c} onOpenProject={onOpenProject} />)}
          </div>
        ) : (
          <ClientTable clients={HD.clients} onOpenProject={onOpenProject} />
        )}
      </div>
    </div>
  );
};

const ClientCard = ({ client, onOpenProject }) => {
  const tone = STATUS_TONES[client.accent];
  const projectsForClient = HD.projects.filter(p => p.clientId === client.id);
  return (
    <Card hover style={{ padding: 0, overflow: "hidden" }}>
      {/* Accent header */}
      <div style={{
        position: "relative", padding: "20px 20px 16px",
        background: `linear-gradient(180deg, ${tone.bg}, transparent)`,
        borderBottom: "1px solid rgba(255,255,255,0.04)",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{
              width: 48, height: 48, borderRadius: 12,
              background: tone.bg, border: `1px solid ${tone.bd}`, color: tone.fg,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--serif)", fontSize: 22, fontWeight: 500, fontStyle: "italic",
            }}>{client.name.split(" ").map(s => s[0]).slice(0, 2).join("")}</div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--white)", letterSpacing: "-0.005em" }}>{client.name}</div>
              <div style={{ fontSize: 11.5, color: "var(--warm-gray)", marginTop: 2 }}>{client.org}</div>
            </div>
          </div>
          <StatusBadge status={client.status} size="sm" />
        </div>
        <div style={{ fontSize: 12, color: "rgba(250,250,250,0.62)", marginTop: 14, lineHeight: 1.5 }}>{client.note}</div>
      </div>

      <div style={{ padding: 16 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div>
            <div className="micro" style={{ color: "var(--warm-gray)", marginBottom: 4, fontSize: 9 }}>LIFETIME VALUE</div>
            <div className="serif" style={{ fontSize: 18, color: "var(--white)", letterSpacing: "-0.01em" }}>{client.ltv}</div>
          </div>
          <div>
            <div className="micro" style={{ color: "var(--warm-gray)", marginBottom: 4, fontSize: 9 }}>ACTIVE PROJECTS</div>
            <div className="serif" style={{ fontSize: 18, color: "var(--white)", letterSpacing: "-0.01em" }}>{client.activeProjects}</div>
          </div>
        </div>

        <Divider style={{ margin: "14px 0" }} />

        <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 14 }}>
          <ContactRow iconName="Inbox" value={client.contact} />
          <ContactRow iconName="Building" value={client.location} />
          <ContactRow iconName="Clock" value={`Last activity ${client.lastActivity}`} />
        </div>

        {projectsForClient.length > 0 && (
          <div>
            <div className="micro" style={{ color: "var(--warm-gray)", marginBottom: 8, fontSize: 9 }}>OPEN PROJECTS</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {projectsForClient.slice(0, 2).map(p => (
                <button
                  key={p.id}
                  onClick={() => onOpenProject(p.id)}
                  style={{
                    display: "flex", alignItems: "center", gap: 8, padding: "8px 10px",
                    background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.05)",
                    borderRadius: 8, cursor: "pointer", textAlign: "left",
                    color: "var(--white)", fontFamily: "var(--sans)",
                  }}
                >
                  <window.Icon.Film size={12} color="var(--warm-gray)" />
                  <span style={{ flex: 1, fontSize: 12, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}</span>
                  <StatusBadge status={p.status} size="sm" />
                </button>
              ))}
            </div>
          </div>
        )}

        <Divider style={{ margin: "14px 0 12px" }} />
        <div style={{ display: "flex", gap: 6 }}>
          <Button
            variant="ghost" size="sm" full
            icon={<window.Icon.Share size={11} />}
            onClick={() => window.dispatchEvent(new CustomEvent("hd-share-portal", { detail: { clientId: client.id } }))}
          >Share portal</Button>
          <Button
            variant="ghost" size="sm" full
            icon={<window.Icon.Eye size={11} />}
            onClick={() => window.dispatchEvent(new CustomEvent("hd-preview-portal", { detail: { clientId: client.id } }))}
          >Preview</Button>
        </div>
      </div>
    </Card>
  );
};

const ContactRow = ({ iconName, value }) => {
  const IconComp = window.Icon[iconName];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--warm-gray)" }}>
      <IconComp size={12} />
      <span>{value}</span>
    </div>
  );
};

const ClientTable = ({ clients, onOpenProject }) => (
  <Card style={{ padding: 0, overflowX: "auto", overflowY: "hidden" }}>
    <div style={{
      display: "grid", gridTemplateColumns: "minmax(0,2fr) minmax(0,1fr) 90px 120px 110px 110px",
      gap: 16, padding: "10px 20px",
      borderBottom: "1px solid rgba(255,255,255,0.05)",
      fontSize: 10.5, color: "var(--warm-gray)", letterSpacing: "0.10em", textTransform: "uppercase",
    }}>
      <span>Client</span>
      <span>Contact</span>
      <span>Active</span>
      <span>Lifetime value</span>
      <span>Status</span>
      <span style={{ textAlign: "right" }}>Last activity</span>
    </div>
    {clients.map(c => {
      const tone = STATUS_TONES[c.accent];
      return (
        <div key={c.id} className="hd-row" style={{
          display: "grid", gridTemplateColumns: "minmax(0,2fr) minmax(0,1fr) 90px 120px 110px 110px",
          gap: 16, padding: "14px 20px", alignItems: "center",
          borderBottom: "1px solid rgba(255,255,255,0.03)", cursor: "pointer",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: tone.bg, border: `1px solid ${tone.bd}`, color: tone.fg,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--serif)", fontSize: 14, fontStyle: "italic", flexShrink: 0,
            }}>{c.name.split(" ").map(s => s[0]).slice(0, 2).join("")}</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: "var(--white)" }}>{c.name}</div>
              <div style={{ fontSize: 11, color: "var(--warm-gray)" }}>{c.org}</div>
            </div>
          </div>
          <div style={{ fontSize: 12, color: "var(--warm-gray)" }}>{c.contact}</div>
          <div className="serif" style={{ fontSize: 16, color: "var(--white)" }}>{c.activeProjects}</div>
          <div style={{ fontSize: 12.5, color: "var(--white)" }}>{c.ltv}</div>
          <StatusBadge status={c.status} size="sm" />
          <div style={{ fontSize: 11.5, color: "var(--warm-gray)", textAlign: "right" }}>{c.lastActivity}</div>
        </div>
      );
    })}
  </Card>
);

window.ClientsPage = ClientsPage;