/* eslint-disable */
// HireArt UI Kit — Interactive "Candidates" app demo
(function () {
const { useState } = React;
const { Icon, Button, Badge, Avatar, TextField, Checkbox } = window;
const { Card, Banner, Dialog, Table, TopNav, SideNav, Tabs, EmptyState } = window;

const SEED = [
  { id: 1, name: "Jordan Marek",     role: "Sr. Backend Engineer",  client: "Acme Cloud",      status: "Offer out",     rate: "$135/hr", stage: "Offer",       color: "green"  },
  { id: 2, name: "Priya Sundaram",   role: "Product Designer",      client: "Northwind Labs",  status: "Interviewing",  rate: "$110/hr", stage: "Interview",   color: "blue"   },
  { id: 3, name: "Noah Whitaker",    role: "Data Engineer",         client: "Acme Cloud",      status: "Screening",     rate: "$120/hr", stage: "Screen",      color: "yellow" },
  { id: 4, name: "Elena Pappas",     role: "DevOps Engineer",       client: "Helix Health",    status: "Onboarding",    rate: "$140/hr", stage: "Onboarding",  color: "purple" },
  { id: 5, name: "Sam Rivera",       role: "Staff Frontend Eng.",   client: "Northwind Labs",  status: "Active",        rate: "$155/hr", stage: "Active",      color: "green"  },
  { id: 6, name: "Aiko Tanabe",      role: "ML Engineer",           client: "Quantico Bio",    status: "Rejected",      rate: "—",       stage: "Rejected",    color: "red"    },
  { id: 7, name: "Marcus Flint",     role: "Mobile Engineer",       client: "Acme Cloud",      status: "Active",        rate: "$130/hr", stage: "Active",      color: "green"  },
];

function App() {
  const [screen, setScreen] = useState("candidates");
  const [sideActive, setSideActive] = useState("all");
  const [tab, setTab] = useState("all");
  const [selected, setSelected] = useState(null);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [banner, setBanner] = useState(true);
  const [search, setSearch] = useState("");
  const [newCandidate, setNewCandidate] = useState({ name: "", email: "", role: "" });
  const [candidates, setCandidates] = useState(SEED);

  const sections = [
    { label: "Pipeline", items: [
      { key: "all",         icon: "users",     label: "All candidates", count: candidates.length },
      { key: "active",      icon: "activity",  label: "Active",         count: candidates.filter(c => c.stage === "Active").length },
      { key: "interview",   icon: "message-1", label: "Interviewing", count: 1 },
      { key: "offers",      icon: "send",      label: "Offers out",     count: 1 },
      { key: "onboarding",  icon: "briefcase", label: "Onboarding",     count: 1 },
    ]},
    { label: "Operations", items: [
      { key: "timecards",  icon: "clock",    label: "Timecards" },
      { key: "compliance", icon: "file",     label: "Compliance" },
      { key: "payments",   icon: "dollar-sign", label: "Payments" },
    ]},
  ];

  const tabs = [
    { key: "all", label: "All", count: candidates.length },
    { key: "mine", label: "Assigned to me", count: 3 },
    { key: "starred", label: "Starred" },
  ];

  const filtered = candidates.filter(c =>
    (search === "" || c.name.toLowerCase().includes(search.toLowerCase()) || c.role.toLowerCase().includes(search.toLowerCase()))
  );

  const addCandidate = () => {
    if (!newCandidate.name) return;
    setCandidates([{ id: Date.now(), name: newCandidate.name, role: newCandidate.role || "—", client: "Unassigned", status: "Screening", rate: "—", stage: "Screen", color: "yellow" }, ...candidates]);
    setNewCandidate({ name: "", email: "", role: "" });
    setDialogOpen(false);
  };

  return (
    <div style={{ minHeight: "100vh", background: "#F7F7F7" }}>
      <TopNav active={screen} onNav={setScreen} />
      <div style={{ display: "flex", height: "calc(100vh - 60px)" }}>
        <SideNav active={sideActive} onNav={setSideActive} sections={sections} />
        <main style={{ flex: 1, padding: 28, overflowY: "auto" }}>
          {/* Header row */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 20 }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--neutral-60)", marginBottom: 4 }}>Pipeline</div>
              <h1 style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 700, color: "var(--neutral-100)", margin: 0, letterSpacing: "0.01em", lineHeight: 1.1 }}>Candidates</h1>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <Button color="secondary" iconStart="download-1" size="lg">Export</Button>
              <Button color="primary-green" iconStart="plus" size="lg" onClick={() => setDialogOpen(true)}>Add candidate</Button>
            </div>
          </div>

          {/* Stat cards */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 20 }}>
            <Card padding={18}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--neutral-60)", marginBottom: 6 }}>Active</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 700, lineHeight: 1, letterSpacing: "0.01em" }}>142</div>
              <div style={{ fontSize: 12, color: "var(--green-80)", marginTop: 4 }}>+12 this week</div>
            </Card>
            <Card padding={18}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--neutral-60)", marginBottom: 6 }}>Interviewing</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 700, lineHeight: 1, letterSpacing: "0.01em" }}>28</div>
              <div style={{ fontSize: 12, color: "var(--neutral-60)", marginTop: 4 }}>across 14 clients</div>
            </Card>
            <Card padding={18}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--neutral-60)", marginBottom: 6 }}>Offers out</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 700, lineHeight: 1, letterSpacing: "0.01em" }}>6</div>
              <div style={{ fontSize: 12, color: "var(--yellow-80)", marginTop: 4 }}>2 expire this week</div>
            </Card>
            <Card padding={18}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--neutral-60)", marginBottom: 6 }}>Onboarding</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 700, lineHeight: 1, letterSpacing: "0.01em" }}>9</div>
              <div style={{ fontSize: 12, color: "var(--red-80)", marginTop: 4 }}>3 missing W-9</div>
            </Card>
          </div>

          {banner && <div style={{ marginBottom: 16 }}>
            <Banner variant="warning" title="Action required" onDismiss={() => setBanner(false)}>
              W-9 missing for 3 contractors. Send reminders before Friday.
            </Banner>
          </div>}

          {/* Filter bar */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
            <div style={{ flex: "0 0 320px" }}>
              <TextField placeholder="Search by name or role" value={search} onChange={e => setSearch(e.target.value)} iconStart="search" isOptional />
            </div>
            <Button color="secondary" size="md" iconStart="filter">Filters</Button>
            <div style={{ marginLeft: "auto" }}>
              <Tabs active={tab} onChange={setTab} tabs={tabs} />
            </div>
          </div>

          {/* Table */}
          {filtered.length === 0 ? (
            <EmptyState title="No candidates found" action={<Button color="primary-green" iconStart="plus" onClick={() => setDialogOpen(true)}>Add candidate</Button>}>
              Try clearing the search, or add a new candidate to the pipeline.
            </EmptyState>
          ) : (
            <Table
              onRowClick={setSelected}
              columns={[
                { label: "Name", render: r => (
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <Avatar name={r.name} size={32} bg={`var(--${r.color}-20)`} />
                    <div>
                      <div style={{ fontWeight: 600 }}>{r.name}</div>
                      <div style={{ fontSize: 12, color: "var(--neutral-60)" }}>{r.role}</div>
                    </div>
                  </div>
                )},
                { label: "Client", key: "client" },
                { label: "Status", render: r => <Badge color={r.color} dot>{r.status}</Badge> },
                { label: "Rate", render: r => <span style={{ fontVariantNumeric: "tabular-nums lining-nums" }}>{r.rate}</span> },
                { label: "", render: r => <Icon name="chevron-right" size={16} style={{ color: "var(--neutral-60)" }} /> },
              ]}
              rows={filtered}
            />
          )}

          <Dialog isOpen={dialogOpen} onClose={() => setDialogOpen(false)}
            title="Add candidate"
            actions={<>
              <Button color="secondary" onClick={() => setDialogOpen(false)}>Cancel</Button>
              <Button color="primary-green" onClick={addCandidate}>Add to pipeline</Button>
            </>}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <TextField label="Full name" value={newCandidate.name} onChange={e => setNewCandidate({...newCandidate, name: e.target.value})} placeholder="e.g. Jordan Marek" />
              <TextField label="Email" value={newCandidate.email} onChange={e => setNewCandidate({...newCandidate, email: e.target.value})} placeholder="jordan@example.com" />
              <TextField label="Role" isOptional value={newCandidate.role} onChange={e => setNewCandidate({...newCandidate, role: e.target.value})} placeholder="Senior Backend Engineer" helperText="You can fill this in later." />
              <Checkbox label="Send an intro email to this candidate" />
            </div>
          </Dialog>

          <Dialog isOpen={!!selected} onClose={() => setSelected(null)}
            title={selected?.name}
            actions={<>
              <Button color="secondary" onClick={() => setSelected(null)}>Close</Button>
              <Button color="primary-green" iconEnd="arrow-right">Open record</Button>
            </>}>
            {selected && <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <div><b>Role.</b> {selected.role}</div>
              <div><b>Client.</b> {selected.client}</div>
              <div><b>Status.</b> <Badge color={selected.color} dot>{selected.status}</Badge></div>
              <div><b>Rate.</b> {selected.rate}</div>
            </div>}
          </Dialog>
        </main>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
})();