import { Button } from '@/components/base/buttons/button';
import { cx } from '@/utils/cx';
import { formatShortDate } from '@/lib/format';
import type { FollowUp } from '@/types/entities';

interface FollowupWidgetProps {
    overdue: FollowUp[];
    upcoming: FollowUp[];
}

export const FollowupWidget = ({ overdue, upcoming }: FollowupWidgetProps) => {
    const items = [...overdue, ...upcoming].slice(0, 4);

    if (items.length === 0) {
        return null;
    }

    return (
        <div>
            <h3 className="mb-3 text-sm font-bold text-primary">Upcoming Follow-ups</h3>
            <div className="space-y-2">
                {items.map((item) => {
                    const isOverdue = overdue.some((o) => o.id === item.id);

                    return (
                        <div
                            key={item.id}
                            className={cx(
                                'rounded-lg border-l-2 p-3',
                                isOverdue
                                    ? 'border-l-error-solid bg-error-primary'
                                    : 'border-l-brand-solid bg-secondary',
                            )}
                        >
                            <p
                                className={cx(
                                    'text-xs font-semibold',
                                    isOverdue ? 'text-error-primary' : 'text-brand-secondary',
                                )}
                            >
                                {item.scheduledAt
                                    ? formatShortDate(item.scheduledAt)
                                    : 'No date'}
                                {isOverdue && ' — Overdue'}
                            </p>
                            <p className="mt-0.5 text-xs font-medium text-primary">
                                {item.description ?? item.followUpType ?? 'Follow-up'}
                            </p>
                            {(item.patientName || item.patientPhone) && (
                                <p className="mt-0.5 text-xs text-tertiary">
                                    {item.patientName}
                                    {item.patientPhone && ` · ${item.patientPhone}`}
                                </p>
                            )}
                        </div>
                    );
                })}
            </div>
            <Button className="mt-3 w-full" size="sm" color="secondary">
                Open Full Schedule
            </Button>
        </div>
    );
};