MeshiTrack/packages/web/src/app/(dashboard)/medicines/page.tsx

'use client';

import Link from 'next/link';
import { useApi } from '@/lib/useApi';

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

  if (sessionLoading) {
    return <PageSkeleton />;
  }

  if (!householdId) {
    return (
      <div>
        <h1 className="text-2xl font-bold mb-4">Medicines</h1>
        <div className="rounded-xl border bg-white p-6 shadow-sm">
          <p className="text-gray-500">
            You need to{' '}
            <Link href="/settings" className="text-primary-600 underline">
              create or join a household
            </Link>{' '}
            before managing medicines.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">Medicines</h1>
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <SectionCard
          title="Library"
          description="Manage your medicines and their products"
          href="/medicines/library"
        />
        <SectionCard
          title="Cabinet"
          description="Track your medicine inventory, quantities and expiry dates"
          href="/medicines/cabinet"
        />
        <SectionCard
          title="Regimens"
          description="Define daily medication schedules and track dosage frequency"
          href="/medicines/regimens"
        />
        <SectionCard
          title="Organizer"
          description="Fill your pill organizer and track cabinet usage"
          href="/medicines/organizer"
        />
        <SectionCard
          title="Activity"
          description="View cabinet event history and spending summaries"
          href="/medicines/activity"
        />
      </div>
    </div>
  );
}

function SectionCard({
  title,
  description,
  href,
}: {
  title: string;
  description: string;
  href: string;
}) {
  return (
    <Link
      href={href}
      className="rounded-xl border bg-white p-6 shadow-sm hover:shadow-md transition-shadow"
    >
      <h2 className="text-lg font-semibold">{title}</h2>
      <p className="mt-1 text-sm text-gray-500">{description}</p>
    </Link>
  );
}

function PageSkeleton() {
  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">Medicines</h1>
      <div className="animate-pulse grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div className="h-24 rounded-xl bg-gray-200" />
        <div className="h-24 rounded-xl bg-gray-200" />
        <div className="h-24 rounded-xl bg-gray-200" />
        <div className="h-24 rounded-xl bg-gray-200" />
        <div className="h-24 rounded-xl bg-gray-200" />
      </div>
    </div>
  );
}