// The rules for a read-only link: when it stops working, and an optional passcode. Shown under the link.
import { useState } from 'react';

const OPTIONS = [['', 'Never'], ['1', 'In 1 day'], ['7', 'In 7 days'], ['30', 'In 30 days']];
const field = 'rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';

export const expiryText = (expiresAt, now = Date.now()) => {
  if (!expiresAt) return 'Never expires';
  if (expiresAt <= now) return 'Expired';
  const days = Math.ceil((expiresAt - now) / 86_400_000);
  return `Expires ${new Date(expiresAt).toLocaleDateString()} (${days} day${days === 1 ? '' : 's'} left)`;
};

export default function LinkRules({ expiresAt, hasPasscode, busy, onSave }) {
  const [days, setDays] = useState('keep'); // 'keep' | '' | '1' | '7' | '30'
  const [passcode, setPasscode] = useState('');
  const dirty = days !== 'keep' || passcode.trim() !== '';

  const save = async () => {
    const options = {};
    if (days !== 'keep') options.expiresInDays = days === '' ? null : Number(days);
    if (passcode.trim()) options.passcode = passcode.trim();
    if (await onSave(options)) { setDays('keep'); setPasscode(''); }
  };

  return (
    <div className="mt-3 rounded-xl border border-[var(--r-line)] p-3" role="group" aria-label="Link settings">
      <p className="text-xs text-[var(--r-sub)]">{expiryText(expiresAt)} · {hasPasscode ? 'Needs a passcode' : 'No passcode'}</p>
      <div className="mt-2 flex flex-wrap items-end gap-3">
        <label className="text-xs text-[var(--r-sub)]">Stop working
          <select value={days} onChange={(e) => setDays(e.target.value)} className={`${field} mt-1 block`}>
            <option value="keep">{expiresAt ? 'Keep as is' : 'Never (as is)'}</option>
            {OPTIONS.map(([v, label]) => <option key={v || 'never'} value={v}>{label}</option>)}
          </select>
        </label>
        <label className="text-xs text-[var(--r-sub)]">{hasPasscode ? 'New passcode' : 'Passcode (optional)'}
          <input type="text" value={passcode} onChange={(e) => setPasscode(e.target.value)} maxLength={100} autoComplete="off" placeholder={hasPasscode ? 'Type to change' : 'None'} className={`${field} mt-1 block w-44`} />
        </label>
        <button type="button" onClick={save} disabled={!dirty || busy} className="rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-sm hover:bg-black/5 disabled:opacity-50">Save settings</button>
        {hasPasscode && <button type="button" onClick={() => onSave({ passcode: null })} disabled={busy} className="text-xs text-[var(--r-danger,#b42318)] hover:underline">Remove passcode</button>}
      </div>
      <p className="mt-2 text-[11px] text-[var(--r-sub)]">Send the passcode separately from the link. Anyone with both can read it until it expires or you turn it off.</p>
    </div>
  );
}