'use client';

const ARTIFACT_OPTIONS = [
  { value: 'private', label: 'Private', desc: 'Only you and admins' },
  { value: 'org', label: 'Org', desc: 'Everyone in your organization' },
  { value: 'link', label: 'Link', desc: 'Anyone with a share link' },
];

// Whole-project visibility. No 'link' option here — public link sharing for an
// entire project folder is a separate, future capability. 'private' + explicit
// member grants is the "only these people" case.
const PROJECT_OPTIONS = [
  { value: 'private', label: 'Private', desc: 'Only people you grant access' },
  { value: 'org', label: 'Org', desc: 'Everyone in your organization' },
];

export default function ShareScopeSelector({ scope, aclScope, saveStatus, onScopeChange, onSave, kind = 'artifact', saveLabel }) {
  const options = kind === 'project' ? PROJECT_OPTIONS : ARTIFACT_OPTIONS;
  const radioName = kind === 'project' ? 'share-visibility' : 'share-scope';
  const defaultSaveLabel = kind === 'project' ? 'Save visibility' : 'Save access setting';

  return (
    <section className="share-panel-section">
      <p className="share-panel-section-title">{kind === 'project' ? 'Visibility' : 'Access'}</p>
      <div className="share-panel-scope-options">
        {options.map((opt) => (
          <label key={opt.value} className={`share-panel-scope-option${scope === opt.value ? ' is-selected' : ''}`}>
            <input type="radio" name={radioName} value={opt.value} checked={scope === opt.value} onChange={() => onScopeChange(opt.value)} />
            <span><span>{opt.label}</span><small>{opt.desc}</small></span>
          </label>
        ))}
      </div>
      <button type="button" onClick={onSave} disabled={scope === aclScope} className="share-panel-save-button">
        {saveStatus === 'saving' ? 'Saving…' : saveStatus === 'saved' ? 'Saved' : (saveLabel || defaultSaveLabel)}
      </button>
    </section>
  );
}
