'use client';

import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { CabinetTab } from '../CabinetTab';
import { SetPageHeader } from '@/components/layout/SetPageHeader';

export default function CabinetPage() {
  const { householdId, isLoading: sessionLoading } = useApi();

  if (sessionLoading) {
    return (
      <>
        <SetPageHeader
          title="Medicine Cabinet"
          subtitle="Everything on hand, with days of supply"
          crumbs={['Medicines', 'Cabinet']}
        />
        <div style={{ padding: '28px 32px' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[1, 2, 3].map((i) => (
              <div
                key={i}
                style={{
                  height: 64,
                  borderRadius: 'var(--r-md)',
                  background: 'var(--bg-inset)',
                }}
              />
            ))}
          </div>
        </div>
      </>
    );
  }

  if (!householdId) {
    return (
      <>
        <SetPageHeader
          title="Medicine Cabinet"
          subtitle="Everything on hand, with days of supply"
          crumbs={['Medicines', 'Cabinet']}
        />
        <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{' '}
              <Link href="/settings" style={{ color: 'var(--brand)', textDecoration: 'underline' }}>
                create or join a household
              </Link>{' '}
              before managing medicines.
            </p>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <SetPageHeader
        title="Medicine Cabinet"
        subtitle="Everything on hand, with days of supply"
        crumbs={['Medicines', 'Cabinet']}
      />
      <div className="mt-page">
        <CabinetTab householdId={householdId} />
      </div>
    </>
  );
}
