// family.jsx — Family settings view (create family, manage members, send invites).

const { useState: useFamState, useEffect: useFamEffect } = React;

// ── Apron rail: members as aprons on kitchen hooks ───────────────────
function famShade(hex, f) {
  const n = parseInt(hex.slice(1), 16);
  return `rgb(${Math.round(((n >> 16) & 255) * f)},${Math.round(((n >> 8) & 255) * f)},${Math.round((n & 255) * f)})`;
}
const FAM_HOOK = `<svg width="26" height="30" viewBox="0 0 26 30" aria-hidden="true">
  <path d="M13 2 v12 a7 7 0 0 0 14 0" transform="translate(-4 0)" fill="none" stroke="#c9922a" stroke-width="3.4" stroke-linecap="round"/>
  <circle cx="13" cy="3" r="3" fill="#8a6418"/></svg>`;
function famApronSVG(name, avatar) {
  const col = avatar ? avatar.color : '#3e6b50';
  const dark = famShade(col, 0.72);
  const first = (name || '?').trim()[0] ? (name || '?').trim()[0].toUpperCase() : '?';
  const mark = avatar
    ? `<circle cx="70" cy="47" r="16" fill="#fdf8ec"/><g style="color:${col}" transform="translate(53 30) scale(1.4)">${AV_ICONS[avatar.icon] || ''}</g>`
    : `<circle cx="70" cy="47" r="16" fill="#fdf8ec"/><text x="70" y="53" text-anchor="middle" font-family="Young Serif" font-size="17" fill="${col}">${first}</text>`;
  const label = (name || '').split(/\s+/)[0].slice(0, 12);
  return `<svg viewBox="0 0 140 172" aria-hidden="true">
    <ellipse cx="70" cy="13" rx="14" ry="11" fill="none" stroke="${dark}" stroke-width="5"/>
    <path d="M50 24 h40 v32 h-40z" fill="${col}"/>
    <path d="M50 56 L26 68 L22 152 a8 8 0 0 0 8 8 h80 a8 8 0 0 0 8 -8 L114 68 L90 56 Z" fill="${col}"/>
    <path d="M27 64 L6 70 L8 79 L29 73 Z" fill="${dark}"/>
    <path d="M113 64 L134 70 L132 79 L111 73 Z" fill="${dark}"/>
    <path d="M30 74 L110 74" stroke="${dark}" stroke-width="2" stroke-dasharray="3 4" opacity="0.6"/>
    <path d="M30 146 L110 146" stroke="${dark}" stroke-width="2" stroke-dasharray="3 4" opacity="0.6"/>
    ${mark}
    <text x="70" y="135" text-anchor="middle" font-family="Caveat" font-weight="600" font-size="25" fill="rgba(250,245,232,0.92)">${label}</text>
  </svg>`;
}
const FAM_TAG = `<svg viewBox="0 0 140 172" aria-hidden="true">
  <path d="M70 12 L62 52" stroke="#6e5f45" stroke-width="1.6" fill="none"/>
  <g transform="rotate(-7 62 96)">
    <rect x="22" y="52" width="80" height="88" rx="7" fill="#fdf8ec" stroke="#d9ccae" stroke-width="1.4"/>
    <circle cx="62" cy="64" r="3.6" fill="none" stroke="#c9922a" stroke-width="1.6"/>
    <text x="62" y="103" text-anchor="middle" font-family="Young Serif" font-size="30" fill="#1f4a38">+</text>
    <text x="62" y="126" text-anchor="middle" font-family="Caveat" font-weight="600" font-size="16.5" fill="#6e5f45">this hook's free</text>
  </g></svg>`;

function FamilySettingsView({ familyData, onBack, onCreateFamily, onRenameFamily, onRemoveMember, getAuthHeaders, onAvatarSaved }) {
  const [creating, setCreating]         = useFamState(false);
  const [newName, setNewName]           = useFamState('');
  const [createError, setCreateError]   = useFamState('');
  const [editingName, setEditingName]   = useFamState(false);
  const [nameInput, setNameInput]       = useFamState('');
  const [inviteEmail, setInviteEmail]   = useFamState('');
  const [inviteSending, setInviteSending] = useFamState(false);
  const [inviteError, setInviteError]   = useFamState('');
  const [inviteSuccess, setInviteSuccess] = useFamState('');
  const [invites, setInvites]           = useFamState(null); // null = not loaded yet
  const [invitesLoading, setInvitesLoading] = useFamState(false);
  const [pickerOpen, setPickerOpen]     = useFamState(false);
  const [pickerErr, setPickerErr]       = useFamState('');
  const [pickerBusy, setPickerBusy]     = useFamState(false);

  async function saveAvatar(av) {
    setPickerBusy(true); setPickerErr('');
    try {
      const authHdrs = await getAuthHeaders();
      const res = await fetch('/api/me/avatar', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json', ...authHdrs },
        body: JSON.stringify(av),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Could not save');
      onAvatarSaved && onAvatarSaved(av);
      setPickerOpen(false);
    } catch (e) {
      setPickerErr(e.message);
    }
    setPickerBusy(false);
  }

  function getInitials(name) {
    if (!name) return '?';
    const parts = name.trim().split(/\s+/).filter(Boolean);
    if (parts.length === 1) return parts[0][0].toUpperCase();
    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
  }

  function formatDate(iso) {
    if (!iso) return '';
    try { return new Date(iso).toLocaleDateString(undefined, { month: 'short', year: 'numeric' }); }
    catch { return ''; }
  }

  function daysUntil(iso) {
    if (!iso) return 0;
    const diff = new Date(iso) - Date.now();
    return Math.max(0, Math.ceil(diff / (1000 * 60 * 60 * 24)));
  }

  async function loadInvites() {
    if (!familyData || !familyData.family || familyData.role !== 'owner') return;
    setInvitesLoading(true);
    try {
      const hdrs = await getAuthHeaders();
      const res = await fetch('/api/family/invites', { headers: hdrs });
      const data = await res.json();
      setInvites(Array.isArray(data) ? data : []);
    } catch { setInvites([]); }
    finally { setInvitesLoading(false); }
  }

  useFamEffect(() => {
    if (familyData && familyData.family && familyData.role === 'owner') loadInvites();
  }, [familyData]);

  async function sendInvite() {
    const email = inviteEmail.trim().toLowerCase();
    if (!email) return;
    setInviteSending(true); setInviteError(''); setInviteSuccess('');
    try {
      const hdrs = await getAuthHeaders();
      const res = await fetch('/api/family/invite', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', ...hdrs },
        body: JSON.stringify({ email }),
      });
      const data = await res.json();
      if (!res.ok) { setInviteError(data.error || 'Could not send invite'); return; }
      setInviteSuccess(`Invite sent to ${email}`);
      setInviteEmail('');
      setInvites(prev => [data, ...(prev || [])]);
    } catch { setInviteError('Something went wrong. Please try again.'); }
    finally { setInviteSending(false); }
  }

  async function resendInvite(inviteId) {
    try {
      const hdrs = await getAuthHeaders();
      const res = await fetch(`/api/family/invite/${inviteId}/resend`, { method: 'POST', headers: hdrs });
      if (res.ok) {
        setInviteSuccess('Invite resent');
        const data = await res.json();
        setInvites(prev => (prev || []).map(i => i.id === inviteId ? { ...i, expiresAt: data.expiresAt } : i));
      }
    } catch {}
  }

  async function cancelInvite(inviteId) {
    try {
      const hdrs = await getAuthHeaders();
      const res = await fetch(`/api/family/invite/${inviteId}`, { method: 'DELETE', headers: hdrs });
      if (res.ok) setInvites(prev => (prev || []).filter(i => i.id !== inviteId));
    } catch {}
  }

  // ── No-family: create section ───────────────────
  if (!familyData || !familyData.family) {
    async function handleCreate() {
      const trimmed = newName.trim();
      setCreating(true); setCreateError('');
      try {
        await onCreateFamily(trimmed || 'Our Family Cookbook');
      } catch (e) {
        setCreateError(e.message || 'Could not create family');
      } finally {
        setCreating(false);
      }
    }

    return (
      <div className="family-settings">
        <div className="fam-settings-top">
          <button className="back-btn ghost-btn" onClick={onBack}>
            <IconChevLeft size={18} /> Back
          </button>
        </div>

        <div className="fam-set-section">
          <div className="fam-set-eyebrow">Get started</div>
          <h2 className="fam-set-title">Create your family cookbook</h2>
          <p className="fam-set-hint">
            Start a shared space where everyone can collect and rediscover recipes together.
            You'll be the owner — you can invite up to 3 more family members.
          </p>
          <div className="fam-set-create-row">
            <input
              type="text"
              className="fam-set-name-input"
              placeholder="e.g. The Esdale Family Cookbook"
              value={newName}
              onChange={e => setNewName(e.target.value)}
              maxLength={100}
              disabled={creating}
              onKeyDown={e => e.key === 'Enter' && handleCreate()}
            />
            <button className="primary-btn" disabled={creating} onClick={handleCreate}>
              {creating ? 'Creating…' : 'Create family'}
            </button>
          </div>
          {createError && <div className="fam-set-error">{createError}</div>}
        </div>
      </div>
    );
  }

  // ── Has-family: manage view ─────────────────────
  const { family, role, members, currentMemberId } = familyData;
  const isOwner = role === 'owner';

  async function handleRename() {
    const trimmed = nameInput.trim();
    if (!trimmed || trimmed === family.name) { setEditingName(false); return; }
    try { await onRenameFamily(trimmed); }
    finally { setEditingName(false); }
  }

  return (
    <div className="family-settings">
      <div className="fam-settings-top">
        <button className="back-btn ghost-btn" onClick={onBack}>
          <IconChevLeft size={18} /> Back
        </button>
      </div>

      {/* Family name */}
      <div className="fam-set-section">
        <div className="fam-set-eyebrow">Your family</div>
        {isOwner && editingName ? (
          <div className="fam-set-rename-row">
            <input
              className="fam-set-name-input"
              value={nameInput}
              onChange={e => setNameInput(e.target.value)}
              onKeyDown={e => { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') setEditingName(false); }}
              maxLength={100}
              autoFocus
            />
            <button className="primary-btn" onClick={handleRename}>Save</button>
            <button className="ghost-btn" onClick={() => setEditingName(false)}>Cancel</button>
          </div>
        ) : (
          <h2
            className={`fam-set-title${isOwner ? ' fam-set-title-editable' : ''}`}
            onClick={isOwner ? () => { setNameInput(family.name); setEditingName(true); } : undefined}
            title={isOwner ? 'Click to rename' : undefined}
          >
            {family.name}
            {isOwner && <span className="family-name-edit"><IconEdit size={14} /></span>}
          </h2>
        )}
        <div className="fam-role-self">
          <IconShield size={14} stroke={1.6} />
          You are <strong>{isOwner ? 'the owner' : 'a member'}</strong>
        </div>
      </div>

      {/* The cooks: aprons on the rail */}
      <div className="fam-set-section">
        <div className="fam-set-eyebrow">The cooks ({members.length} of 4) — four hooks by the kitchen door</div>
        <div className="rail-scene">
          <div className="apron-bar"><span className="screw l"></span><span className="screw r"></span></div>
          <div className="hooks">
            {members.map(m => {
              const isMe = m.id === currentMemberId;
              return (
                <div key={m.id} className={`hookslot${isMe ? ' is-me' : ''}`}>
                  <span className="hook" dangerouslySetInnerHTML={{ __html: FAM_HOOK }} />
                  <button
                    className="apron-wrap"
                    title={isMe ? 'Pick your mark' : m.name}
                    onClick={isMe ? () => setPickerOpen(true) : undefined}
                    dangerouslySetInnerHTML={{ __html: famApronSVG(m.name || m.email, m.avatar) }}
                  />
                  <p className="hs-name">{m.name || '(no name)'}</p>
                  <p className="hs-meta">
                    <span className={`fam-role-badge fam-role-${m.role}`}>{m.role}</span>
                    {' '}joined {formatDate(m.joinedAt)}
                  </p>
                  {isMe && <p className="hs-pick">{m.avatar ? 'change my mark →' : 'pick my mark →'}</p>}
                  {isOwner && !isMe && (
                    <button
                      className="icon-btn danger fam-remove-btn"
                      title={`Remove ${m.name || m.email}`}
                      onClick={() => {
                        if (confirm(`Remove ${m.name || m.email} from your family cookbook?`)) {
                          onRemoveMember(m.userId);
                        }
                      }}
                    >
                      <IconX size={14} />
                    </button>
                  )}
                </div>
              );
            })}
            {Array.from({ length: Math.max(0, 4 - members.length) }).map((_, i) => (
              <div key={`free-${i}`} className="hookslot free">
                <span className="hook" dangerouslySetInnerHTML={{ __html: FAM_HOOK }} />
                <button
                  className="apron-wrap"
                  title="Invite family"
                  onClick={() => document.querySelector('.fam-set-invite input')?.focus()}
                  dangerouslySetInnerHTML={{ __html: FAM_TAG }}
                />
                <p className="hs-meta">seat for one more</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {pickerOpen && (
        <div className="av-modal" onClick={(e) => { if (e.target.classList.contains('av-modal')) setPickerOpen(false); }}>
          <div className="av-panel">
            <button className="av-close" aria-label="Close" onClick={() => setPickerOpen(false)}>✕</button>
            <h3>Pick your mark</h3>
            <p className="av-sub">it signs your recipes, notes and votes — change it anytime</p>
            <div className="av-grid">
              {AVATAR_SET.map((a, i) => {
                const mine = members.find(m => m.id === currentMemberId)?.avatar;
                const picked = mine && mine.icon === a.icon && mine.color === a.color;
                return (
                  <button
                    key={i}
                    className={`av-opt${picked ? ' picked' : ''}`}
                    style={{ background: a.color }}
                    disabled={pickerBusy}
                    onClick={() => saveAvatar(a)}
                  >
                    <svg viewBox="0 0 24 24" style={{ color: '#fdf8ec' }} dangerouslySetInnerHTML={{ __html: AV_ICONS[a.icon] }} />
                  </button>
                );
              })}
            </div>
            {pickerErr && <p className="av-err">{pickerErr}</p>}
          </div>
        </div>
      )}

      {/* Invite section — owner only */}
      {isOwner && (
        <div className="fam-set-section fam-set-invite">
          <div className="fam-set-eyebrow">Invite members</div>
          {members.length >= 4 ? (
            <p className="fam-set-hint">Your family is full (4 of 4 members).</p>
          ) : (
            <>
              <p className="fam-set-hint" style={{ marginBottom: '0.9rem' }}>
                Send an email invite. You can add {4 - members.length} more {4 - members.length === 1 ? 'person' : 'people'}.
              </p>
              <div className="fam-set-create-row">
                <input
                  type="email"
                  className="fam-set-name-input"
                  placeholder="name@example.com"
                  value={inviteEmail}
                  onChange={e => setInviteEmail(e.target.value)}
                  onKeyDown={e => e.key === 'Enter' && sendInvite()}
                  disabled={inviteSending}
                  maxLength={320}
                />
                <button className="primary-btn" onClick={sendInvite} disabled={inviteSending || !inviteEmail.trim()}>
                  {inviteSending ? 'Sending…' : 'Send Invite'}
                </button>
              </div>
              {inviteError   && <div className="fam-set-error">{inviteError}</div>}
              {inviteSuccess && <div className="fam-invite-success">{inviteSuccess}</div>}
            </>
          )}

          {/* Pending invites list */}
          {invitesLoading && <p className="fam-set-hint" style={{ marginTop: '1rem' }}>Loading…</p>}
          {!invitesLoading && invites && invites.length > 0 && (
            <div className="fam-pending-invites">
              <div className="fam-pending-label">Pending invites</div>
              <ul className="fam-invite-list">
                {invites.map(inv => (
                  <li key={inv.id} className="fam-invite-row">
                    <div className="fam-invite-email">{inv.email}</div>
                    <div className="fam-invite-meta">
                      Expires in {daysUntil(inv.expiresAt)}d
                    </div>
                    <button
                      className="ghost-btn fam-invite-action"
                      title="Resend invite"
                      onClick={() => resendInvite(inv.id)}
                    >
                      Resend
                    </button>
                    <button
                      className="icon-btn danger fam-remove-btn"
                      title="Cancel invite"
                      onClick={() => cancelInvite(inv.id)}
                    >
                      <IconX size={14} />
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { FamilySettingsView });