const { Button, IconButton, Badge, Tag, Tabs, Input, Select, Radio, Dialog, Toast, Tooltip, Switch } = window.PrestigeServicesDesignSystem_020573;

const WO = [
  ["WO-2026-0417", "Leak under kitchen sink", "Meridian Lofts · 12B", "Plumbing", "open", "Urgent"],
  ["WO-2026-0416", "Hallway light out, 3rd floor", "Granite Row", "Electrical", "open", "Standard"],
  ["WO-2026-0412", "HVAC filter replacement", "Meridian Lofts · 7A", "HVAC", "scheduled", "Standard"],
  ["WO-2026-0409", "Balcony door won't latch", "The Foundry · 2C", "Carpentry", "open", "Low"],
  ["WO-2026-0401", "Unit turn — paint & floors", "Granite Row · 5D", "Renovation", "scheduled", "Standard"],
  ["WO-2026-0388", "Water heater replacement", "The Foundry · 1A", "Plumbing", "done", "Urgent"],
];
const stateBadge = { open: ["warning", "Open"], scheduled: ["info", "Scheduled"], done: ["success", "Completed"] };
const plus = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14" /></svg>;

function WorkOrderTable({ tab, onOpenRow }) {
  const rows = WO.filter((r) => tab === "all" || r[4] === tab);
  const th = { font: "500 10px var(--font-body)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--gray-500)", textAlign: "left", padding: "12px 18px", borderBottom: "1px solid var(--line-accent)" };
  const td = { font: "300 14px var(--font-body)", color: "var(--text-primary)", padding: "15px 18px", borderBottom: "1px solid var(--border-default)" };
  return (
    <table style={{ width: "100%", borderCollapse: "collapse", background: "var(--surface-card)" }}>
      <thead><tr><th style={th}>Ref</th><th style={th}>Issue</th><th style={th}>Property</th><th style={th}>Trade</th><th style={th}>Status</th><th style={th}>Priority</th></tr></thead>
      <tbody>
        {rows.map((r) => (
          <tr key={r[0]} style={{ cursor: "pointer" }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "var(--gray-50)")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
            onClick={() => onOpenRow(r)}>
            <td style={{ ...td, font: "500 13px var(--font-mono)", color: "var(--gray-500)" }}>{r[0]}</td>
            <td style={{ ...td, fontWeight: 500 }}>{r[1]}</td>
            <td style={td}>{r[2]}</td>
            <td style={td}><Tag>{r[3]}</Tag></td>
            <td style={td}><Badge tone={stateBadge[r[4]][0]} dot>{stateBadge[r[4]][1]}</Badge></td>
            <td style={{ ...td, color: r[5] === "Urgent" ? "var(--danger)" : "var(--text-secondary)", fontWeight: r[5] === "Urgent" ? 600 : 400 }}>{r[5]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function NewWorkOrderDialog({ open, onClose, onCreate }) {
  const [issue, setIssue] = React.useState("");
  const [property, setProperty] = React.useState("");
  const [trade, setTrade] = React.useState("");
  const [priority, setPriority] = React.useState("Standard");
  return (
    <Dialog open={open} onClose={onClose} eyebrow="Maintenance" title="New work order" width={520}
      footer={<React.Fragment><Button variant="outline" onClick={onClose}>Cancel</Button><Button onClick={() => { onCreate(); onClose(); }}>Create order</Button></React.Fragment>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <Input label="Issue" value={issue} onChange={setIssue} placeholder="Describe the issue" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Select label="Property" placeholder="Choose…" options={["Meridian Lofts", "Granite Row", "The Foundry"]} value={property} onChange={setProperty} />
          <Select label="Trade" placeholder="Choose…" options={["Plumbing", "Electrical", "HVAC", "Carpentry", "Renovation"]} value={trade} onChange={setTrade} />
        </div>
        <Radio label="Priority" row options={["Low", "Standard", "Urgent"]} value={priority} onChange={setPriority} />
      </div>
    </Dialog>
  );
}

function App() {
  const [nav, setNav] = React.useState("dashboard");
  const [tab, setTab] = React.useState("open");
  const [dialog, setDialog] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [detail, setDetail] = React.useState(null);
  const openCount = WO.filter((r) => r[4] === "open").length;
  const schedCount = WO.filter((r) => r[4] === "scheduled").length;
  return (
    <div style={{ display: "flex" }}>
      <PortalSidebar active={nav} onNav={setNav} />
      <main style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 32px", background: "var(--surface-card)", borderBottom: "1px solid var(--border-default)" }}>
          <div>
            <div style={{ font: "500 11px var(--font-body)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--orange-500)" }}>Tuesday, July 14, 2026</div>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, letterSpacing: "0.02em", textTransform: "uppercase", color: "var(--text-primary)", margin: "8px 0 0", lineHeight: 1 }}>Dashboard</h1>
          </div>
          <Button icon={plus} onClick={() => setDialog(true)}>New work order</Button>
        </div>
        <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            <StatCard label="Occupancy" value="98.2%" delta="+0.6% vs June" />
            <StatCard label="Open work orders" value={String(openCount)} delta="3 urgent" tone="down" />
            <StatCard label="Rent collected" value="$212,400" delta="94% of billed" />
            <StatCard label="Active projects" value="4" />
          </div>
          <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "4px 16px 0" }}>
              <Tabs value={tab} onChange={setTab} style={{ borderBottom: "none" }}
                tabs={[{ value: "open", label: "Open", count: openCount }, { value: "scheduled", label: "Scheduled", count: schedCount }, { value: "done", label: "Completed" }, { value: "all", label: "All" }]} />
              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                <Tag active>All properties</Tag>
                <Tag>Urgent only</Tag>
              </div>
            </div>
            <WorkOrderTable tab={tab} onOpenRow={setDetail} />
          </div>
        </div>
      </main>
      <NewWorkOrderDialog open={dialog} onClose={() => setDialog(false)} onCreate={() => setToast({ tone: "success", title: "Work order created", description: "Crew dispatch will confirm scheduling." })} />
      <Dialog open={!!detail} onClose={() => setDetail(null)} eyebrow={detail ? detail[0] : ""} title={detail ? detail[1] : ""}
        footer={<React.Fragment><Button variant="outline" onClick={() => setDetail(null)}>Close</Button><Button onClick={() => { setDetail(null); setToast({ tone: "success", title: "Marked completed", description: detail ? detail[0] + " archived." : "" }); }}>Mark completed</Button></React.Fragment>}>
        {detail && (
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <span>{detail[2]}</span>
            <div style={{ display: "flex", gap: 8 }}>
              <Tag>{detail[3]}</Tag>
              <Badge tone={stateBadge[detail[4]][0]} dot>{stateBadge[detail[4]][1]}</Badge>
            </div>
          </div>
        )}
      </Dialog>
      {toast && (
        <div style={{ position: "fixed", bottom: 24, right: 24, zIndex: 200 }}>
          <Toast tone={toast.tone} title={toast.title} description={toast.description} onDismiss={() => setToast(null)} />
        </div>
      )}
    </div>
  );
}

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