import { useEffect, useState } from 'react';
import type { VisitInvitationView } from '../../types/visitInvitation';
import { VisitAttendeeSummary } from './VisitAttendeeSummary';
import {
    DECLINE_REASON_MAX, VISIT_ACCEPT_CLOSED, VISIT_TIME_PASSED, acceptIsUnfinished, overSentence, visitIsOver, visitTimePhase, visitTitle,
    visitWhen,
} from '../../utils/visitInvitationWords';
import { useVisitClock } from '../../hooks/useVisitClock';

/**
 * The invitee's own answer to a team video visit: which team and patient, when, whether the time moved, whether their
 * time is held, and Accept / Decline with an optional reason. Used by the invitee's view and by a staff member who is
 * themselves invited, so both say the same thing.
 */
export const YourVisitAnswer = ({
    view,
    busy,
    onRespond,
}: {
    view: Pick<VisitInvitationView, 'start' | 'end' | 'team' | 'teamUnresolved' | 'patient' | 'timeChangedSinceAnswer' | 'reservation' | 'declineReason' | 'yourInvitation' | 'appointmentStatus' | 'host' | 'attendees'>;
    busy: boolean;
    onRespond: (response: 'accepted' | 'declined', declineReason?: string) => void;
}) => {
    const [declining, setDeclining] = useState(false);
    const [reason, setReason] = useState('');
    const answered = view.yourInvitation?.response;
    const now = useVisitClock([view]);
    const phase = visitTimePhase(view, now);
    // A visit that is over takes no answer; what was answered before stays readable. Over by its status, or by its
    // scheduled end having passed: either way it is history, and a booked one is still booked.
    const overByStatus = visitIsOver(view.appointmentStatus);
    const over = overByStatus || phase === 'ended';
    // From its start the server takes no accept; a decline, which only gives time back, is still taken until its end.
    const begun = !over && phase === 'begun';
    // A moved time needs a fresh answer, whatever was answered before.
    const needsAnswer = !over && (!answered || view.timeChangedSinceAnswer);
    // An accept whose hold is not confirmed (including no reservation reported) keeps its buttons, so it can be finished.
    const unfinished = !over && acceptIsUnfinished({ response: answered, reservation: view.reservation });
    const when = visitWhen(view);
    // A decline being written when the visit ends is retired with its reason: there is nothing left to send.
    useEffect(() => {
        if (!over) return;
        setDeclining(false);
        setReason('');
    }, [over]);

    return (
        <div className="space-y-2" data-testid="your-visit-answer">
            <p className="text-sm font-semibold">{visitTitle(view)}</p>
            {when && <p className="text-sm text-muted-foreground">{when}</p>}
            {view.teamUnresolved && (
                <p className="text-xs text-muted-foreground">This invitation was sent before visits named their team.</p>
            )}
            {/* Who hosts it and who else is invited, as the server shows an invitee: read-only, beside their own answer. */}
            <VisitAttendeeSummary host={view.host} attendees={view.attendees} />
            {overByStatus && <div className="text-sm text-muted-foreground" role="status">{overSentence(view.appointmentStatus)}</div>}
            {!overByStatus && over && <div className="text-sm text-muted-foreground" role="status">{VISIT_TIME_PASSED}</div>}
            {begun && (needsAnswer || unfinished) && (
                <div className="text-sm text-muted-foreground" role="status">{VISIT_ACCEPT_CLOSED}</div>
            )}
            {!over && !begun && view.timeChangedSinceAnswer && (
                <div className="text-sm text-warning" role="status">The time of this visit has changed since you answered. Please answer again.</div>
            )}

            {/* On a visit that is over, an earlier accept is history: no hold claim and nothing to finish. */}
            {over && answered === 'accepted' && (
                <p className="text-sm text-muted-foreground">You accepted this invitation.</p>
            )}
            {/* Once it has begun, an accept that did not finish cannot be finished: say so, never "accept again". */}
            {begun && !needsAnswer && answered === 'accepted' && view.reservation?.state !== 'reserved' && view.reservation?.state !== 'not-applicable' && (
                <p className="text-sm text-muted-foreground">You accepted, but your time was not held.</p>
            )}
            {!over && !needsAnswer && answered === 'accepted' && !(begun && unfinished) && (
                <p className="text-sm text-muted-foreground">
                    {view.reservation?.state === 'reserved'
                        ? 'You accepted. The time is held on your calendar.'
                        : view.reservation?.state === 'not-applicable'
                          ? 'You accepted.'
                          : view.reservation
                            ? 'You accepted, but your time is not held yet. Accept again to finish.'
                            : 'You accepted, but your time is not confirmed as held. Accept again to finish.'}
                </p>
            )}
            {!needsAnswer && answered === 'declined' && (
                <p className="text-sm text-muted-foreground">
                    You declined this invitation.{view.declineReason ? ` Your reason: “${view.declineReason}”` : ''}
                </p>
            )}

            {(needsAnswer || unfinished) && !declining && (
                <>
                    {!begun && <p className="text-xs text-muted-foreground">Accepting adds this visit to your calendar and holds the time.</p>}
                    <span className="flex flex-wrap gap-2">
                        {!begun && (
                            <button type="button" className="btn btn-green" disabled={busy} onClick={() => onRespond('accepted')}>
                                Accept
                            </button>
                        )}
                        <button type="button" className="btn btn-red" disabled={busy} onClick={() => setDeclining(true)}>
                            Decline
                        </button>
                    </span>
                </>
            )}

            {declining && !over && (
                <div className="space-y-2">
                    <label htmlFor="visit-decline-reason" className="text-sm">
                        Reason (optional). Only the organizer and you will see it.
                    </label>
                    <textarea
                        id="visit-decline-reason"
                        className="w-full rounded-md border border-border p-2 text-sm"
                        maxLength={DECLINE_REASON_MAX}
                        rows={2}
                        value={reason}
                        onChange={(e) => setReason(e.target.value)}
                    />
                    <p className="text-xs text-muted-foreground">{reason.length}/{DECLINE_REASON_MAX}</p>
                    <span className="flex flex-wrap gap-2">
                        <button
                            type="button"
                            className="btn btn-red"
                            disabled={busy}
                            onClick={() => {
                                onRespond('declined', reason);
                                setDeclining(false);
                            }}
                        >
                            Decline the visit
                        </button>
                        <button type="button" className="btn btn-blue-ghost" disabled={busy} onClick={() => setDeclining(false)}>
                            Back
                        </button>
                    </span>
                </div>
            )}
        </div>
    );
};

export default YourVisitAnswer;