helix-engage/src/components/call-desk/disposition-form.tsx

import { useState } from 'react';
import { TextArea } from '@/components/base/textarea/textarea';
import type { CallDisposition } from '@/types/entities';
import { cx } from '@/utils/cx';

interface DispositionFormProps {
    onSubmit: (disposition: CallDisposition, notes: string) => void;
    defaultDisposition?: CallDisposition | null;
}

const dispositionOptions: Array<{
    value: CallDisposition;
    label: string;
    activeClass: string;
    defaultClass: string;
}> = [
    {
        value: 'APPOINTMENT_BOOKED',
        label: 'Appointment Booked',
        activeClass: 'bg-success-solid text-white ring-transparent',
        defaultClass: 'bg-success-primary text-success-primary border-success',
    },
    {
        value: 'APPOINTMENT_RESCHEDULED',
        label: 'Appt Rescheduled',
        activeClass: 'bg-warning-solid text-white ring-transparent',
        defaultClass: 'bg-warning-primary text-warning-primary border-warning',
    },
    {
        value: 'APPOINTMENT_CANCELLED',
        label: 'Appt Cancelled',
        activeClass: 'bg-error-solid text-white ring-transparent',
        defaultClass: 'bg-error-primary text-error-primary border-error',
    },
    {
        value: 'FOLLOW_UP_SCHEDULED',
        label: 'Follow-up Needed',
        activeClass: 'bg-brand-solid text-white ring-transparent',
        defaultClass: 'bg-brand-primary text-brand-secondary border-brand',
    },
    {
        value: 'INFO_PROVIDED',
        label: 'Info Provided',
        activeClass: 'bg-utility-blue-light-600 text-white ring-transparent',
        defaultClass: 'bg-utility-blue-light-50 text-utility-blue-light-700 border-utility-blue-light-200',
    },
    {
        value: 'NO_ANSWER',
        label: 'No Answer',
        activeClass: 'bg-warning-solid text-white ring-transparent',
        defaultClass: 'bg-warning-primary text-warning-primary border-warning',
    },
    {
        value: 'WRONG_NUMBER',
        label: 'Wrong Number',
        activeClass: 'bg-secondary-solid text-white ring-transparent',
        defaultClass: 'bg-secondary text-secondary border-secondary',
    },
    {
        value: 'NOT_INTERESTED',
        label: 'Not Interested',
        activeClass: 'bg-error-solid text-white ring-transparent',
        defaultClass: 'bg-error-primary text-error-primary border-error',
    },
    {
        value: 'CALLBACK_REQUESTED',
        label: 'Callback Requested',
        activeClass: 'bg-utility-blue-600 text-white ring-transparent',
        defaultClass: 'bg-utility-blue-50 text-utility-blue-700 border-utility-blue-200',
    },
];

export const DispositionForm = ({ onSubmit, defaultDisposition }: DispositionFormProps) => {
    const [selected, setSelected] = useState<CallDisposition | null>(defaultDisposition ?? null);
    const [notes, setNotes] = useState('');

    const handleSubmit = () => {
        if (selected === null) return;
        onSubmit(selected, notes);
    };

    return (
        <div className="flex flex-col gap-4">
            <span className="text-sm font-bold text-primary">What happened?</span>

            <div className="grid grid-cols-2 gap-2">
                {dispositionOptions.map((option) => {
                    const isSelected = selected === option.value;
                    return (
                        <button
                            key={option.value}
                            type="button"
                            onClick={() => setSelected(option.value)}
                            className={cx(
                                'cursor-pointer rounded-xl border-2 p-3 text-xs font-semibold transition duration-100 ease-linear',
                                isSelected
                                    ? cx(option.activeClass, 'ring-2 ring-brand')
                                    : option.defaultClass,
                            )}
                        >
                            {option.label}
                        </button>
                    );
                })}
            </div>

            <TextArea
                label="Notes (optional)"
                placeholder="Add any notes about this call..."
                value={notes}
                onChange={(value) => setNotes(value)}
                rows={3}
            />

            <div className="flex justify-end">
                <button
                    type="button"
                    onClick={handleSubmit}
                    disabled={selected === null}
                    className={cx(
                        'rounded-xl px-6 py-2.5 text-sm font-semibold transition duration-100 ease-linear',
                        selected !== null
                            ? 'cursor-pointer bg-brand-solid text-white hover:bg-brand-solid_hover'
                            : 'cursor-not-allowed bg-disabled text-disabled',
                    )}
                >
                    Save & Close Call
                </button>
            </div>
        </div>
    );
};