'use client';

import Link from 'next/link';
import { useAuth } from '@/lib/hooks/useAuth';
import { Card } from '@/components/ui/common/Card';

export default function TodayPage() {
  const { currentOrganization } = useAuth();
  const showNoSubscriptionNotice =
    Boolean(currentOrganization?.isOwner) && !currentOrganization?.plan;

  return (
    <div>
      <h1 className="text-2xl font-semibold mb-6">
        Welcome back Babak !!
      </h1>

      {showNoSubscriptionNotice && (
        <div className="mb-6 rounded-[var(--radius-md)] border border-amber-500/30 bg-amber-500/10 p-4">
          <p className="text-sm text-amber-200">
            This organization does not have an active subscription yet.{' '}
            <Link href="/settings/subscriptions" className="font-medium underline underline-offset-2">
              Choose a plan
            </Link>{' '}
            to start the purchase process.
          </p>
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
        <Card>
          <p className="text-sm text-card-muted">Today's Appointments</p>
          <p className="text-2xl font-semibold mt-2">12</p>
          <p className="text-xs text-text-muted mt-1">Monday 2/5/2026</p>
        </Card>
        <Card>
          <p className="text-sm text-card-muted">Active Patients</p>
          <p className="text-2xl font-semibold mt-2">675</p>
        </Card>
        <Card>
          <p className="text-sm text-card-muted">New Lab Case</p>
          <p className="text-2xl font-semibold mt-2">5</p>
          <p className="text-xs text-text-muted mt-1">35 ↑</p>
        </Card>
        <Card>
          <p className="text-sm text-card-muted">Today invoices</p>
          <p className="text-2xl font-semibold mt-2">1200$</p>
          <p className="text-xs text-text-muted mt-1">21,300 $</p>
        </Card>
      </div>
    </div>
  );
}