basil/packages/web/src/components/FamilyGate.tsx

import { useEffect, useState, FormEvent, ReactNode } from 'react';
import { familiesApi } from '../services/api';
import { useAuth } from '../contexts/AuthContext';
import '../styles/FamilyGate.css';

interface FamilyGateProps {
  children: ReactNode;
}

type CheckState = 'idle' | 'checking' | 'needs-family' | 'ready';

export default function FamilyGate({ children }: FamilyGateProps) {
  const { isAuthenticated, loading: authLoading, logout } = useAuth();
  const [state, setState] = useState<CheckState>('idle');
  const [name, setName] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (authLoading) return;
    if (!isAuthenticated) {
      setState('idle');
      return;
    }
    let cancelled = false;
    (async () => {
      setState('checking');
      try {
        const res = await familiesApi.list();
        if (cancelled) return;
        const count = res.data?.length ?? 0;
        setState(count === 0 ? 'needs-family' : 'ready');
      } catch {
        if (!cancelled) setState('ready');
      }
    })();
    return () => { cancelled = true; };
  }, [isAuthenticated, authLoading]);

  async function handleCreate(e: FormEvent) {
    e.preventDefault();
    const trimmed = name.trim();
    if (!trimmed) return;
    setSubmitting(true);
    setError(null);
    try {
      await familiesApi.create(trimmed);
      setState('ready');
    } catch (e: any) {
      setError(e?.response?.data?.error || 'Failed to create family');
    } finally {
      setSubmitting(false);
    }
  }

  const showModal = isAuthenticated && state === 'needs-family';

  return (
    <>
      {children}
      {showModal && (
        <div className="family-gate-overlay" role="dialog" aria-modal="true">
          <div className="family-gate-modal">
            <h2>Create your family</h2>
            <p>
              To keep recipes organized and shareable, every account belongs to
              a family. Name yours to get started — you can invite others later.
            </p>
            <form onSubmit={handleCreate}>
              <label htmlFor="family-gate-name">Family name</label>
              <input
                id="family-gate-name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="e.g. Smith Family"
                autoFocus
                disabled={submitting}
                required
              />
              {error && <div className="family-gate-error">{error}</div>}
              <div className="family-gate-actions">
                <button
                  type="button"
                  className="family-gate-secondary"
                  onClick={logout}
                  disabled={submitting}
                >
                  Sign out
                </button>
                <button type="submit" disabled={submitting || !name.trim()}>
                  {submitting ? 'Creating…' : 'Create family'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </>
  );
}