'use client';

import Link from 'next/link';
import { useApi } from '@/lib/useApi';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { Icon } from '@/components/ui/Icon';
import type { IconName } from '@/components/ui/Icon';

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

  if (sessionLoading) {
    return (
      <>
        <SetPageHeader title="Medicines" subtitle="All known medicines" />
        <PageSkeleton />
      </>
    );
  }

  if (!householdId) {
    return (
      <>
        <SetPageHeader title="Medicines" subtitle="All known medicines" />
        <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="Medicines" subtitle="All known medicines" />
      <div style={{ padding: '28px 32px 56px', maxWidth: 1400 }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
            gap: 14,
          }}
        >
          <SectionCard
            title="Library"
            description="Manage your medicines and their products"
            href="/medicines/library"
            icon="pill"
          />
          <SectionCard
            title="Cabinet"
            description="Track your medicine inventory, quantities and expiry dates"
            href="/medicines/cabinet"
            icon="cabinet"
          />
          <SectionCard
            title="Schedule"
            description="Today's dose log and weekly overview"
            href="/medicines/schedule"
            icon="clock"
          />
          <SectionCard
            title="Regimens"
            description="Define daily medication schedules"
            href="/medicines/regimens"
            icon="list"
          />
          <SectionCard
            title="Organizer"
            description="Fill your pill organizer and track cabinet usage"
            href="/medicines/organizer"
            icon="calendar"
          />
          <SectionCard
            title="Activity"
            description="View cabinet event history and spending summaries"
            href="/medicines/activity"
            icon="trend"
          />
          <SectionCard
            title="Stores"
            description="Manage pharmacies and stores for price tracking"
            href="/stores"
            icon="store"
          />
          <SectionCard
            title="Prices"
            description="Track and compare medicine prices across stores"
            href="/medicine-prices"
            icon="tag"
          />
          <SectionCard
            title="Refills"
            description="Get refill alerts and manage shopping lists"
            href="/refills"
            icon="refresh"
          />
          <SectionCard
            title="Purchases"
            description="Record medicine purchases and track online orders"
            href="/purchases"
            icon="truck"
          />
        </div>
      </div>
    </>
  );
}

function SectionCard({
  title,
  description,
  href,
  icon,
}: {
  title: string;
  description: string;
  href: string;
  icon: IconName;
}) {
  return (
    <Link
      href={href}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 10,
        padding: 18,
        background: 'var(--bg-elev)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--r-md)',
        textDecoration: 'none',
        transition: 'all 0.15s',
      }}
    >
      <div
        style={{
          width: 34,
          height: 34,
          borderRadius: 'var(--r-sm)',
          background: 'var(--brand-soft)',
          color: 'var(--brand)',
          display: 'grid',
          placeItems: 'center',
        }}
      >
        <Icon name={icon} size={16} />
      </div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-strong)' }}>{title}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 2 }}>{description}</div>
      </div>
    </Link>
  );
}

function PageSkeleton() {
  return (
    <div style={{ padding: '28px 32px' }}>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
          gap: 14,
        }}
      >
        {Array.from({ length: 9 }).map((_, i) => (
          <div
            key={i}
            style={{ height: 96, borderRadius: 'var(--r-md)', background: 'var(--bg-inset)' }}
          />
        ))}
      </div>
    </div>
  );
}