import { Badge } from '@/components/base/badges/badges';
import { TopBar } from '@/components/layout/top-bar';
import { formatShortDate } from '@/lib/format';
import { useFollowUps } from '@/hooks/use-follow-ups';
import { cx } from '@/utils/cx';
import type { FollowUp, FollowUpStatus, Priority } from '@/types/entities';

const statusColor = (status: FollowUpStatus | null): 'error' | 'brand' | 'success' | 'gray' => {
    switch (status) {
        case 'OVERDUE':
            return 'error';
        case 'PENDING':
            return 'brand';
        case 'COMPLETED':
            return 'success';
        case 'CANCELLED':
        default:
            return 'gray';
    }
};

const priorityColor = (priority: Priority | null): 'error' | 'warning' | 'brand' | 'gray' => {
    switch (priority) {
        case 'URGENT':
            return 'error';
        case 'HIGH':
            return 'warning';
        case 'NORMAL':
            return 'brand';
        case 'LOW':
        default:
            return 'gray';
    }
};

const cardBorderClass = (status: FollowUpStatus | null, isOverdue: boolean): string => {
    if (isOverdue || status === 'OVERDUE') {
        return 'border-l-error-500 bg-error-primary';
    }
    if (status === 'COMPLETED') {
        return 'border-l-success-500';
    }
    if (status === 'CANCELLED') {
        return 'border-l-gray-300';
    }
    return 'border-l-brand-500';
};

interface FollowUpCardProps {
    followUp: FollowUp;
    isOverdue?: boolean;
}

const FollowUpCard = ({ followUp, isOverdue = false }: FollowUpCardProps) => {
    return (
        <div className={cx('rounded-xl border-l-[3px] bg-primary p-4', cardBorderClass(followUp.followUpStatus, isOverdue))}>
            <div className="flex items-start justify-between gap-3">
                <div className="min-w-0 flex-1">
                    <p
                        className={cx(
                            'text-xs font-semibold',
                            isOverdue || followUp.followUpStatus === 'OVERDUE' ? 'text-error-primary' : 'text-brand-secondary',
                        )}
                    >
                        {followUp.scheduledAt ? formatShortDate(followUp.scheduledAt) : 'No date scheduled'}
                        {(isOverdue || followUp.followUpStatus === 'OVERDUE') && ' — Overdue'}
                    </p>
                    <p className="mt-1 text-sm font-medium text-primary">
                        {followUp.description ?? followUp.followUpType ?? 'Follow-up'}
                    </p>
                    {(followUp.patientName || followUp.patientPhone) && (
                        <p className="mt-0.5 text-xs text-tertiary">
                            {followUp.patientName}
                            {followUp.patientPhone && ` · ${followUp.patientPhone}`}
                        </p>
                    )}
                </div>
                <div className="flex shrink-0 flex-col items-end gap-1.5">
                    {followUp.followUpStatus && (
                        <Badge size="sm" color={statusColor(followUp.followUpStatus)}>
                            {followUp.followUpStatus}
                        </Badge>
                    )}
                    {followUp.priority && (
                        <Badge size="sm" color={priorityColor(followUp.priority)}>
                            {followUp.priority}
                        </Badge>
                    )}
                </div>
            </div>
        </div>
    );
};

export const FollowUpsPage = () => {
    const { followUps, overdue, upcoming } = useFollowUps();

    const completed = followUps.filter((f) => f.followUpStatus === 'COMPLETED');

    return (
        <div className="flex flex-1 flex-col overflow-hidden">
            <TopBar title="Follow-ups" subtitle="Scheduled callbacks and reminders" />
            <div className="flex-1 overflow-y-auto p-7 space-y-6">
                {/* Overdue section */}
                {overdue.length > 0 && (
                    <div>
                        <h2 className="mb-3 text-sm font-bold text-error-primary">Overdue ({overdue.length})</h2>
                        <div className="space-y-3">
                            {overdue.map((followUp) => (
                                <FollowUpCard key={followUp.id} followUp={followUp} isOverdue />
                            ))}
                        </div>
                    </div>
                )}

                {/* Upcoming section */}
                {upcoming.length > 0 && (
                    <div>
                        <h2 className="mb-3 text-sm font-bold text-primary">Upcoming ({upcoming.length})</h2>
                        <div className="space-y-3">
                            {upcoming.map((followUp) => (
                                <FollowUpCard key={followUp.id} followUp={followUp} />
                            ))}
                        </div>
                    </div>
                )}

                {/* Completed section */}
                {completed.length > 0 && (
                    <div>
                        <h2 className="mb-3 text-sm font-bold text-tertiary">Completed ({completed.length})</h2>
                        <div className="space-y-3">
                            {completed.map((followUp) => (
                                <FollowUpCard key={followUp.id} followUp={followUp} />
                            ))}
                        </div>
                    </div>
                )}

                {overdue.length === 0 && upcoming.length === 0 && completed.length === 0 && (
                    <div className="flex flex-1 items-center justify-center py-20">
                        <div className="flex flex-col items-center gap-2 text-center">
                            <h3 className="text-sm font-semibold text-primary">No follow-ups</h3>
                            <p className="text-sm text-tertiary">All caught up — no scheduled callbacks or reminders.</p>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};
