(() => {
const { Card, Button, Field, Input, Badge, Avatar, StatusPill, Icon, Modal } = window.TaskFlowDesignSystem_dd53c2;

// Password diperiksa terhadap akun yang login. Di produksi: password_hash() di server.
const accountOf = (id) => (id === 0 ? DB.direktur : DB.users.find((u) => u.id === id) || null);

function ProfileScreen({ user, tasks = [], onPhoto, signature, onSignature }) {
  const bp = useBreakpoint();
  const md = monthRange();
  const [form, setForm] = React.useState({ old: "", next: "", repeat: "" });
  const [msg, setMsg] = React.useState(null);
  const [from, setFrom] = React.useState(md.from);
  const [to, setTo] = React.useState(md.to);
  const photo = avatarOf(user.id);
  const [photoOpen, setPhotoOpen] = React.useState(false);
  const [draftPhoto, setDraftPhoto] = React.useState(null);
  const [photoErr, setPhotoErr] = React.useState("");
  const fileRef = React.useRef(null);

  /* JPG/PNG only; anything bigger than 500 KB is downscaled through a canvas
     until it fits, then cropped square so it fills the circle. */
  const pickPhoto = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    if (!/image\/(jpeg|png)/.test(f.type)) { setPhotoErr("Hanya menerima file JPG atau PNG."); setDraftPhoto(null); return; }
    const reader = new FileReader();
    reader.onload = () => {
      const img = new Image();
      img.onload = () => {
        const side = Math.min(img.width, img.height);
        const size = Math.min(512, side);
        const c = document.createElement("canvas");
        c.width = c.height = size;
        c.getContext("2d").drawImage(img, (img.width - side) / 2, (img.height - side) / 2, side, side, 0, 0, size, size);
        let q = 0.9, url = c.toDataURL("image/jpeg", q);
        while (url.length * 0.75 > 500 * 1024 && q > 0.3) { q -= 0.1; url = c.toDataURL("image/jpeg", q); }
        setPhotoErr("");
        setDraftPhoto({ url, kb: Math.round((url.length * 0.75) / 1024), name: f.name, originalKb: Math.round(f.size / 1024) });
      };
      img.src = reader.result;
    };
    reader.readAsDataURL(f);
  };
  const all = tasks.filter((t) => t.user === user.id);
  const mine = all.filter((t) => inRange(t.assigned, from, to));

  const submit = () => {
    if (!form.old.trim()) return setMsg({ tone: "err", text: "Password lama wajib diisi terlebih dahulu." });
    const acc = accountOf(user.id);
    if (form.next.length < 8) return setMsg({ tone: "err", text: "Password baru minimal 8 karakter." });
    if (form.next === form.old) return setMsg({ tone: "err", text: "Password baru harus berbeda dari password lama." });
    if (form.next !== form.repeat) return setMsg({ tone: "err", text: "Ulangi password tidak sama." });
    // Server aktif: password disimpan ter-hash di server, bukan di perangkat.
    if (window.TMSNet && TMSNet.online) {
      TMSNet.setPassword(form.old, form.next).then(() => {
        if (acc) acc.mustChange = false;
        setForm({ old: "", next: "", repeat: "" });
        setMsg({ tone: "ok", text: "Password berhasil diperbarui \u2014 dipakai untuk login berikutnya." });
      }).catch((e) => setMsg({ tone: "err", text: e.message || "Gagal menyimpan password." }));
      return;
    }
    if (!acc || form.old !== acc.pass) return setMsg({ tone: "err", text: "Password lama tidak sesuai." });
    acc.pass = form.next;
    acc.mustChange = false;
    DB.users = DB.users;
    saveDb();
    setForm({ old: "", next: "", repeat: "" });
    setMsg({ tone: "ok", text: "Password berhasil diperbarui — dipakai untuk login berikutnya." });
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: bp === "desktop" ? "320px 1fr" : "1fr", gap: 16, alignItems: "start", maxWidth: 1020 }}>
      <Card float style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12, minWidth: 0 }}>
        <span style={{ position: "relative", display: "inline-flex" }}>
          <button type="button" onClick={() => { setPhotoErr(""); setDraftPhoto(null); setPhotoOpen(true); }} aria-label="Ganti foto profil"
            style={{ padding: 0, border: "none", background: "transparent", cursor: "pointer", borderRadius: "50%", display: "inline-flex" }}>
            {photo
              ? <img src={photo} alt={user.name} style={{ width: 76, height: 76, borderRadius: "50%", objectFit: "cover", border: "2px solid var(--white)", boxShadow: "var(--shadow-float)" }} />
              : <span style={{ width: 76, height: 76, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(165deg,var(--teal-100),var(--leaf-50))", border: "1px solid var(--border-glass)", boxShadow: "var(--shadow-glass)" }}>
                  <Icon name="image-plus" size={26} color="var(--teal-600)" />
                </span>}
          </button>
          <span style={{ position: "absolute", right: -2, bottom: -2, width: 28, height: 28, borderRadius: "50%", background: "var(--gradient-teal)", border: "2px solid var(--white)", display: "inline-flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-float)", pointerEvents: "none" }}>
            <Icon name="camera" size={14} color="var(--white)" />
          </span>
        </span>
        <div style={{ textAlign: "center" }}>
          <div style={{ font: "var(--text-h3)", color: "var(--text-strong)" }}>{user.name}</div>
          <div style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{user.email}</div>
        </div>
        <Badge tone="teal">{user.role}</Badge>
        <div style={{ width: "100%", marginTop: 6, paddingTop: 14, borderTop: "1px solid var(--border-subtle)", display: "flex", flexDirection: "column", gap: 10 }}>
          <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Rekap task</span>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 8, width: "100%" }}>
            <Field label="Dari"><Input type="date" size="sm" value={from} style={{ width: "100%" }} onChange={(e) => setFrom(e.target.value)} /></Field>
            <Field label="Sampai"><Input type="date" size="sm" value={to} style={{ width: "100%" }} onChange={(e) => setTo(e.target.value)} /></Field>
          </div>
          <Button variant="ghost" size="sm" iconLeft="rotate-ccw" onClick={() => { setFrom(md.from); setTo(md.to); }}>Reset ke bulan ini</Button>
          {[["Total task", mine.length], ["Berjalan", mine.filter((t) => t.status === "in_progress").length],
            ["Menunggu verifikasi", mine.filter((t) => t.status === "on_verification").length],
            ["Diterima", mine.filter((t) => t.status === "done").length]].map(([l, v]) => (
            <div key={l} style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ flex: 1, font: "var(--text-body-default)", color: "var(--text-body)" }}>{l}</span>
              <span style={{ font: "var(--fw-bold) var(--fs-body)/1 var(--font-mono)", color: "var(--text-strong)" }}>{v}</span>
            </div>
          ))}
        </div>
      </Card>

      <Modal open={photoOpen} width={420} title="Ganti Foto Profil"
        description="File yang diterima hanya JPG atau PNG"
        onClose={() => setPhotoOpen(false)}
        footer={<><Button variant="ghost" onClick={() => setPhotoOpen(false)}>Batal</Button>
          <Button variant="primary" gradient iconLeft="check" disabled={!draftPhoto}
            onClick={() => { onPhoto && onPhoto(user.id, draftPhoto.url); setPhotoOpen(false); }}>Simpan Foto</Button></>}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <span style={{ width: 132, height: 132, borderRadius: "50%", overflow: "hidden", display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--neutral-100)", border: "1px solid var(--border-glass)" }}>
            {draftPhoto
              ? <img src={draftPhoto.url} alt="Pratinjau" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              : <Icon name="image" size={34} color="var(--text-faint)" />}
          </span>
          <input ref={fileRef} type="file" accept="image/jpeg,image/png" onChange={pickPhoto} style={{ display: "none" }} />
          <Button variant="secondary" size="sm" iconLeft="upload" onClick={() => fileRef.current && fileRef.current.click()}>Pilih Foto</Button>
          {draftPhoto && <span style={{ font: "var(--text-caption)", color: "var(--leaf-600)" }}>{draftPhoto.name} · {draftPhoto.originalKb} KB → {draftPhoto.kb} KB</span>}
          {photoErr && <span style={{ font: "var(--text-caption)", color: "var(--red-600)" }}>{photoErr}</span>}
        </div>
      </Modal>

      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {onSignature && typeof SignatureCard === "function" && <SignatureCard signature={signature} onChange={onSignature} />}
        <Card>
          <div style={{ paddingBottom: 14 }}>
            <h3 style={{ font: "var(--text-h3)" }}>Ganti Password</h3>
            <p style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Masukkan password lama terlebih dahulu. Jika lupa, minta Direktur melakukan reset.</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }}>
            <Field label="Password Lama" required>
              <Input icon="lock" type="password" value={form.old} placeholder="Password saat ini" onChange={(e) => setForm({ ...form, old: e.target.value })} />
            </Field>
            <Field label="Password Baru" required hint="Minimal 8 karakter dan berbeda dari password lama.">
              <Input icon="lock-keyhole" type="password" value={form.next} placeholder="••••••••" disabled={!form.old.trim()} onChange={(e) => setForm({ ...form, next: e.target.value })} />
            </Field>
            <Field label="Ulangi Password Baru" required>
              <Input icon="lock-keyhole" type="password" value={form.repeat} placeholder="••••••••" disabled={!form.old.trim()} onChange={(e) => setForm({ ...form, repeat: e.target.value })} />
            </Field>
            {msg && (
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "var(--text-caption)", color: msg.tone === "ok" ? "var(--leaf-600)" : "var(--red-600)" }}>
                <Icon name={msg.tone === "ok" ? "circle-check-big" : "triangle-alert"} size={15} color={msg.tone === "ok" ? "var(--leaf-600)" : "var(--red-600)"} />
                {msg.text}
              </span>
            )}
            <div style={{ display: "flex", gap: 10, paddingTop: 4 }}>
              <Button variant="primary" gradient iconLeft="check" disabled={!form.old.trim()} onClick={submit}>Simpan Password</Button>
              <Button variant="ghost" onClick={() => { setForm({ old: "", next: "", repeat: "" }); setMsg(null); }}>Reset Form</Button>
            </div>
          </div>
        </Card>

        <Card>
          <h3 style={{ font: "var(--text-h3)", paddingBottom: 12 }}>Task Terakhir</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {mine.slice(0, 4).map((t) => (
              <div key={t.id} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ flex: 1, font: "var(--text-body-default)", color: "var(--text-strong)" }}>{t.type}</span>
                <span style={{ font: "var(--fw-medium) var(--fs-sm)/1 var(--font-mono)", color: "var(--text-muted)" }}>{t.target}</span>
                <StatusPill status={t.status} />
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}
Object.assign(window, { ProfileScreen });
})();