'use client';

import { useApi } from '@/lib/useApi';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { RecipeList } from './RecipeList';

function PageSkeleton() {
  return (
    <div style={{ padding: '28px 32px' }}>
      {[...Array(3)].map((_, i) => (
        <div
          key={i}
          style={{
            height: 80,
            background: 'var(--bg-elev)',
            borderRadius: 'var(--r-md)',
            marginBottom: 12,
            opacity: 0.5,
          }}
        />
      ))}
    </div>
  );
}

function NoHousehold() {
  return (
    <div style={{ padding: '28px 32px' }}>
      <div
        style={{
          background: 'var(--bg-elev)',
          border: '1px solid var(--border)',
          borderRadius: 'var(--r-md)',
          padding: 24,
        }}
      >
        <p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
          You need to create or join a household before managing recipes.
        </p>
      </div>
    </div>
  );
}

export default function RecipesPage() {
  const { householdId, isLoading } = useApi();

  if (isLoading) {
    return (
      <>
        <SetPageHeader title="Recipes" subtitle="Your recipe collection" />
        <PageSkeleton />
      </>
    );
  }

  if (!householdId) {
    return (
      <>
        <SetPageHeader title="Recipes" subtitle="Your recipe collection" />
        <NoHousehold />
      </>
    );
  }

  return (
    <>
      <SetPageHeader title="Recipes" subtitle="Your recipe collection" />
      <RecipeList householdId={householdId} />
    </>
  );
}