// Edit flows: EditProjectPage (full page), ChangeRoleModal, RotateKeyModal,
// RevokeKeyModal, RemoveMemberModal. Plus a small <RowMenu> dropdown
// component used by the listing screens.

// =================================================================
// Row dropdown menu (three-dots → menu)
// =================================================================
const RowMenu = ({ items }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef();
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => e.key === "Escape" && setOpen(false);
    document.addEventListener("click", onDoc);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("click", onDoc); document.removeEventListener("keydown", onKey); };
  }, [open]);

  return (
    <div className="hx-rowmenu" ref={ref}>
      <button className="hx-icon-btn" aria-label="More actions" aria-expanded={open}
        onClick={(e) => { e.stopPropagation(); setOpen(o => !o); }}>
        <IconMore size={14}/>
      </button>
      {open && (
        <div className="hx-rowmenu-menu" onClick={e => e.stopPropagation()}>
          {items.map((it, i) => (
            it.divider ? <div key={i} className="hx-rowmenu-divider"/> :
            <button key={i} className={`hx-rowmenu-item ${it.danger ? "danger" : ""}`}
              onClick={() => { setOpen(false); it.onClick && it.onClick(); }}>
              {it.icon && <span className="hx-rowmenu-icon">{it.icon}</span>}
              {it.label}
            </button>
          ))}
        </div>
      )}
      <style>{`
        .hx-rowmenu { position: relative; display: inline-block; }
        .hx-rowmenu-menu {
          position: absolute; right: 0; top: calc(100% + 4px);
          background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
          box-shadow: var(--shadow-modal); min-width: 200px; z-index: 40;
          padding: 4px; text-align: left;
          animation: hxpop .12s ease both;
        }
        .hx-rowmenu-item {
          display: flex; align-items: center; gap: 10px;
          width: 100%; padding: 8px 10px;
          background: transparent; border: none; cursor: pointer;
          border-radius: 6px; font: inherit; font-size: 13.5px;
          color: var(--ink-2); text-align: left;
        }
        .hx-rowmenu-item:hover { background: var(--hover); color: var(--ink); }
        .hx-rowmenu-item.danger { color: var(--bad); }
        .hx-rowmenu-item.danger:hover { background: color-mix(in oklab, var(--bad) 10%, var(--panel)); }
        .hx-rowmenu-icon { display: inline-flex; color: var(--muted); }
        .hx-rowmenu-item.danger .hx-rowmenu-icon { color: var(--bad); }
        .hx-rowmenu-divider { height: 1px; background: var(--line-2); margin: 4px 0; }
      `}</style>
    </div>
  );
};

// =================================================================
// Edit Project — full page
// =================================================================
const EditProjectPage = ({ data, setData, projectId }) => {
  const project = data.projects.find(p => p.id === projectId);
  const [name, setName] = React.useState(project?.name || "");
  const [desc, setDesc] = React.useState("Inference experiments and finetune jobs.");
  const [defaultModel, setDefaultModel] = React.useState("helix-7b-instruct");
  const [softLimit, setSoftLimit] = React.useState(500);
  const [archived, setArchived] = React.useState(false);
  const [confirmText, setConfirmText] = React.useState("");
  const [confirmDelete, setConfirmDelete] = React.useState(false);

  if (!project) {
    return <CreatePage icon={<IconFolder size={20}/>} title="Project not found" backTo="projects" backLabel="Project List"
      footer={<Btn kind="primary" onClick={() => window.__nav("projects")}>Back</Btn>}><p>This project doesn't exist or has been deleted.</p></CreatePage>;
  }

  const onSave = () => {
    setData(d => ({
      ...d,
      projects: d.projects.map(p => p.id === projectId ? { ...p, name } : p),
    }));
    window.__toast(`Project "${name}" saved`);
    window.__nav("projects");
  };

  const onDelete = () => {
    if (confirmText !== project.name) return;
    setData(d => ({
      ...d,
      projects: d.projects.filter(p => p.id !== projectId),
      projectOptions: d.projectOptions.filter(p => p !== project.name),
      currentProject: d.currentProject === project.name ? (d.projects.find(p => p.id !== projectId)?.name || d.currentProject) : d.currentProject,
    }));
    window.__toast(`Project "${project.name}" deleted`);
    window.__nav("projects");
  };

  return (
    <CreatePage icon={<IconFolder size={20}/>} title={`Edit ${project.name}`}
      subtitle="Update project metadata, defaults, and limits."
      backTo="projects" backLabel="Project List"
      footer={<>
        <Btn kind="secondary" onClick={() => window.__nav("projects")}>Cancel</Btn>
        <Btn kind="primary" disabled={!name.trim()} onClick={onSave}>Save changes</Btn>
      </>}>
      <FormField label="Project name"><Input value={name} onChange={e=>setName(e.target.value)}/></FormField>
      <FormField label="Project ID"><Input value={project.id} readOnly suffix={<IconCopy size={14}/>}/></FormField>
      <FormField label="Description"><textarea className="hx-ta" value={desc} onChange={e=>setDesc(e.target.value)} rows={3}/></FormField>
      <FormField label="Default model"><Input value={defaultModel} onChange={e=>setDefaultModel(e.target.value)}/></FormField>
      <FormField label="Soft spend limit" hint="Members get a warning when project spend exceeds this in a month.">
        <Input prefix="$" type="number" value={softLimit} onChange={e=>setSoftLimit(Number(e.target.value)||0)}/>
      </FormField>

      <div className="hx-toggle-row" style={{marginTop: 8}}>
        <Toggle checked={archived} onChange={setArchived}/>
        <div>
          <div style={{fontSize:13.5,fontWeight:500}}>Archive project</div>
          <div style={{fontSize:12.5,color:"var(--muted)"}}>Hide from project list. Existing API keys keep working until revoked.</div>
        </div>
      </div>

      {/* Danger zone */}
      <DangerZone
        title="Danger zone"
        description="Deleting a project is permanent and revokes all API keys."
        actionLabel="Delete project"
        confirmPhrase={project.name}
        onConfirm={onDelete}
      />

      <EditPageStyles/>
    </CreatePage>
  );
};

// =================================================================
// Change Role — modal
// =================================================================
const ChangeRoleModal = ({ open, onClose, member, onConfirm }) => {
  const cfg = window.APP_CONFIG;
  const [role, setRole] = React.useState(member?.role || "Member");
  React.useEffect(() => { if (member) setRole(member.role); }, [member]);
  if (!member) return null;

  const ICON_MAP = { IconUser, IconSettings, IconCard, IconUsers, IconKey };

  return (
    <Modal open={open} onClose={onClose} title="Change role" width={520}
      footer={<>
        <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" onClick={() => { onConfirm(role); onClose(); }} disabled={role === member.role}>Save</Btn>
      </>}>
      <div className="hx-member-banner">
        <Avatar name={member.name} size={36}/>
        <div>
          <div style={{fontWeight:600}}>{member.name}</div>
          <div style={{color:"var(--muted)", fontSize:12.5}}>{member.email} · Currently <strong>{member.role}</strong></div>
        </div>
      </div>
      <div className="hx-role-cards" style={{marginTop:14}}>
        {cfg.roles.map(r => {
          const IconC = ICON_MAP[r.icon] || IconUser;
          const active = role === r.id;
          return (
            <label key={r.id} className={`hx-role-card ${active ? "on" : ""}`}>
              <input type="radio" name="role" checked={active} onChange={() => setRole(r.id)}/>
              <span className="hx-role-icon"><IconC size={16}/></span>
              <span className="hx-role-meta">
                <span className="hx-role-name">{r.title}</span>
                <span className="hx-role-desc">{r.desc}</span>
              </span>
              <span className="hx-role-radio"><span className="hx-role-radio-dot"/></span>
            </label>
          );
        })}
      </div>
      <CreatePageStyles/>
      <style>{`.hx-member-banner { display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:10px; background: var(--panel-2); }`}</style>
    </Modal>
  );
};

// =================================================================
// Remove Member — modal
// =================================================================
const RemoveMemberModal = ({ open, onClose, member, onConfirm }) => {
  if (!member) return null;
  return (
    <Modal open={open} onClose={onClose} title="Remove from organization" width={460}
      footer={<>
        <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="danger" onClick={() => { onConfirm(); onClose(); }}>Remove member</Btn>
      </>}>
      <p style={{margin:"0 0 12px"}}>
        <strong>{member.name}</strong> will lose access immediately. Their API keys for this organization will be revoked. This cannot be undone.
      </p>
      <Banner tone="warn" icon={<IconInfo size={16}/>}>
        Resources they created (projects, files, fine-tunes) stay with the organization.
      </Banner>
    </Modal>
  );
};

// =================================================================
// Rotate API Key — modal
// =================================================================
const RotateKeyModal = ({ open, onClose, apiKey, onConfirm }) => {
  if (!apiKey) return null;
  return (
    <Modal open={open} onClose={onClose} title="Rotate API key" width={480}
      footer={<>
        <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="primary" onClick={() => { onConfirm(); onClose(); }}>Rotate now</Btn>
      </>}>
      <p style={{margin:"0 0 12px"}}>
        A new value will be generated for <strong>{apiKey.name}</strong>. The current value continues to work for <strong>24 hours</strong>, then stops.
      </p>
      <Banner tone="info" icon={<IconInfo size={16}/>}>
        Update your applications with the new key before the grace period ends. You'll see the new key once on the next screen.
      </Banner>
    </Modal>
  );
};

// =================================================================
// Revoke API Key — modal
// =================================================================
const RevokeKeyModal = ({ open, onClose, apiKey, onConfirm }) => {
  const [confirmText, setConfirmText] = React.useState("");
  React.useEffect(() => { if (open) setConfirmText(""); }, [open]);
  if (!apiKey) return null;
  return (
    <Modal open={open} onClose={onClose} title="Revoke API key" width={480}
      footer={<>
        <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
        <Btn kind="danger" disabled={confirmText !== apiKey.name} onClick={() => { onConfirm(); onClose(); }}>Revoke key</Btn>
      </>}>
      <p style={{margin:"0 0 12px"}}>
        Revoking <strong>{apiKey.name}</strong> immediately stops any application using it. This action cannot be undone.
      </p>
      <FormField label={<>Type <code className="hx-inline-code">{apiKey.name}</code> to confirm.</>}>
        <Input value={confirmText} onChange={e=>setConfirmText(e.target.value)} placeholder={apiKey.name}/>
      </FormField>
      <EditPageStyles/>
    </Modal>
  );
};

// =================================================================
// Key Rotated — success modal (shown after rotate)
// =================================================================
const KeyRotatedModal = ({ open, onClose, newKey }) => (
  <Modal open={open} onClose={onClose} title="Key rotated" width={520}
    footer={<Btn kind="primary" onClick={onClose}>Done</Btn>}>
    <p style={{margin:"0 0 12px"}}>The new key is below. Copy it now — it won't be shown in full again.</p>
    <div className="hx-key-box">
      <span className="hx-key-text">{newKey}</span>
      <Btn kind="secondary" size="sm" icon={<IconCopy size={13}/>}
        onClick={() => { navigator.clipboard.writeText(newKey || ""); window.__toast("Key copied"); }}>Copy</Btn>
    </div>
    <Banner tone="warn" icon={<IconInfo size={16}/>}>
      The old key remains valid for 24 hours. Update your apps before then.
    </Banner>
    <CreatePageStyles/>
    <style>{`.hx-key-box { margin: 14px 0; }`}</style>
  </Modal>
);

// Shared danger/edit-page styles
const EditPageStyles = () => (
  <style>{`
    .hx-danger {
      border: 1px solid color-mix(in oklab, var(--bad) 28%, var(--line));
      border-radius: 12px;
      padding: 16px;
      background: color-mix(in oklab, var(--bad) 4%, var(--panel));
    }
    .hx-danger-h { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
    .hx-confirm-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed color-mix(in oklab, var(--bad) 25%, var(--line)); }
    .hx-inline-code {
      background: var(--panel-2);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 1px 6px;
      font-family: var(--mono);
      font-size: 12.5px;
    }
  `}</style>
);

Object.assign(window, {
  RowMenu, EditProjectPage,
  ChangeRoleModal, RemoveMemberModal,
  RotateKeyModal, RevokeKeyModal, KeyRotatedModal,
});