// Woodbury Operator — Vendor Detail (job history + performance). Registers window.VendorDetailScreen.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, StatCard, IconTile, Eyebrow, ProgressBar } = NS;

  // Per-vendor job history + metrics, keyed by vendor name.
  const JOBS = {
    "Mensah Plumbing Co.": [
      { unit: "Flat 2B — Geyser Fault", site: "Mirage", status: "In Progress", tone: "warning", date: "Ongoing · ETA 3 days" },
      { unit: "Unit 8 — Water Pressure", site: "Onehive Tse Addo", status: "Resolved", tone: "success", date: "Closed 12 Aug · 1.2 days" },
      { unit: "House 1 — Sink Leak", site: "Lashibi Townhouses", status: "Resolved", tone: "success", date: "Closed 04 Aug · 0.5 days" },
      { unit: "Villa 2 — Drain Blockage", site: "Cantonments City", status: "Resolved", tone: "success", date: "Closed 21 Jul · 1 day" },
    ],
    "AirCool HVAC Services": [
      { unit: "House 1 — AC Leak", site: "Lashibi Townhouses", status: "In Progress", tone: "warning", date: "Ongoing · reported today" },
      { unit: "Villa 5 — AC Service", site: "Cantonments City", status: "Resolved", tone: "success", date: "Closed 09 Aug · 1 day" },
      { unit: "Loft 3 — Thermostat", site: "Onehive Tse Addo", status: "Resolved", tone: "success", date: "Closed 28 Jul · 0.5 days" },
    ],
    "Kojo Roofing & Works": [
      { unit: "Villa 7 — Roof Tile Repair", site: "Cantonments City", status: "Scheduled", tone: "accent", date: "Scheduled tomorrow" },
      { unit: "Block C — Gutter Clean", site: "Hamlet", status: "Resolved", tone: "success", date: "Closed 30 Jul · 2 days" },
    ],
  };
  const DEFAULT_JOBS = [
    { unit: "General Repair", site: "Lashibi Townhouses", status: "Resolved", tone: "success", date: "Closed recently · 1.5 days" },
  ];

  function VendorDetailScreen({ onBack }) {
    const v = window.WB_ACTIVE_VENDOR || window.WB_DATA.vendors[0];
    const jobs = JOBS[v.name] || DEFAULT_JOBS;
    const active = jobs.filter((j) => j.status !== "Resolved").length;
    const resolved = jobs.filter((j) => j.status === "Resolved").length;

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: "36px 40px", maxWidth: 1200 }}>
        <window.WBPageHeader eyebrow="Vendor" title={v.name}
          sub={v.trade + " · approved contractor"}
          actions={<React.Fragment>
            <Button variant="secondary" icon="arrow-left" onClick={onBack}>Back</Button>
            <Button variant="primary" icon="wrench" onClick={() => window.WBToast("Assigning a ticket to " + v.name)}>Assign Ticket</Button>
          </React.Fragment>} />

        {/* Identity + rating */}
        <Card style={{ padding: 28 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
            <IconTile icon={v.icon} tone={v.tone} size={72} />
            <div style={{ flex: 1, minWidth: 200 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                <h2 style={{ margin: 0, fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 24, color: "var(--text-heading)" }}>{v.name}</h2>
                <Badge tone={v.rating === "Preferred" ? "success" : v.rating === "On-site" ? "accent" : "neutral"}>{v.rating}</Badge>
              </div>
              <p style={{ margin: "6px 0 0", fontSize: 14, color: "var(--text-muted)" }}>{v.trade} · {v.phone}</p>
            </div>
            <div style={{ display: "flex", gap: 3 }}>
              {[1, 2, 3, 4, 5].map((s) => <span key={s} className="wb-ico" style={{ width: 20, height: 20, color: s <= 4 ? "var(--terracotta-500)" : "var(--cream-300)" }}><i data-lucide="star"></i></span>)}
              <span style={{ marginLeft: 8, fontSize: 14, fontWeight: 700, color: "var(--text-heading)" }}>4.6</span>
            </div>
          </div>
        </Card>

        {/* Performance stats */}
        <div style={{ display: "flex", gap: 20 }}>
          <StatCard label="Jobs Completed" value={String(v.jobs)} icon="check-check" iconTone="success" emphasis="success" />
          <StatCard label="Active Jobs" value={String(active)} icon="wrench" iconTone="accent" />
          <StatCard label="Avg. Response" value="3.2h" icon="clock" iconTone="brand" />
          <StatCard label="On-time Rate" value="94%" icon="calendar-check" iconTone="success" />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 24, alignItems: "start" }}>
          {/* Job history */}
          <Card>
            <CardHeader title="Work History" action={<Badge tone="neutral">{jobs.length} jobs</Badge>} />
            {jobs.map((j, i) => (
              <div key={i} style={{ display: "flex", gap: 14, alignItems: "center", padding: "16px 24px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                <IconTile icon={j.status === "Resolved" ? "check" : j.status === "Scheduled" ? "calendar" : "loader"} tone={j.status === "Resolved" ? "success" : "accent"} size={40} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 14, color: "var(--text-heading)" }}>{j.unit}</div>
                  <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{j.site} · {j.date}</div>
                </div>
                <Badge tone={j.tone} dot={j.tone === "success"}>{j.status}</Badge>
              </div>
            ))}
          </Card>

          {/* Sidebar: SLA + trades + contact */}
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <Card style={{ padding: 24 }}>
              <Eyebrow>Reliability</Eyebrow>
              <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 16 }}>
                {[["On-time completion", 94, "success"], ["First-visit fix rate", 81, "brand"], ["Resident satisfaction", 92, "accent"]].map(([label, val, tone]) => (
                  <div key={label}>
                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 6 }}><span style={{ color: "var(--text-heading)", fontWeight: 600 }}>{label}</span><span style={{ color: "var(--text-muted)" }}>{val}%</span></div>
                    <ProgressBar value={val} tone={tone} />
                  </div>
                ))}
              </div>
            </Card>
            <Card style={{ padding: 24 }}>
              <Eyebrow>Coverage</Eyebrow>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 14 }}>
                {[v.trade, "Emergency call-out", "Weekend service"].map((t) => <Badge key={t} tone="neutral">{t}</Badge>)}
              </div>
              <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 10 }}>
                <Button variant="secondary" size="sm" full icon="phone" onClick={() => window.WBToast("Calling " + v.name)}>{v.phone}</Button>
                <Button variant="secondary" size="sm" full icon="star" onClick={() => window.WBToast(v.name + " marked Preferred")}>Mark Preferred</Button>
              </div>
            </Card>
          </div>
        </div>
      </div>
    );
  }
  window.VendorDetailScreen = VendorDetailScreen;
})();