va-tracker/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx

import React, { useState } from 'react';

interface LeaveFormData {
    fromDate: string;
    toDate: string;
    comment: string;
}

const SickLeaveTab: React.FC<{
    submitLeave: Function;
    isSubmitting: boolean;
}> = ({ submitLeave, isSubmitting }) => {
    const [sickLeave, setSickLeave] = useState<LeaveFormData>({
        fromDate: '',
        toDate: '',
        comment: ''
    });
    const [sickErrors, setSickErrors] = useState<Partial<LeaveFormData>>({});

    const validateLeaveForm = (data: LeaveFormData): Partial<LeaveFormData> => {
        const errors: Partial<LeaveFormData> = {};

        if (!data.fromDate) {
            errors.fromDate = 'From date is required';
        }

        if (!data.toDate) {
            errors.toDate = 'To date is required';
        }

        if (!data.comment.trim()) {
            errors.comment = 'Comment is required';
        }

        if (data.fromDate && data.toDate && new Date(data.fromDate) > new Date(data.toDate)) {
            errors.toDate = 'To date must be after from date';
        }

        return errors;
    };

    const handleSickChange = (field: keyof LeaveFormData, value: string) => {
        setSickLeave(prev => ({ ...prev, [field]: value }));
        if (sickErrors[field]) {
            setSickErrors(prev => ({ ...prev, [field]: undefined }));
        }
    };

    const handleSubmit = async () => {
        const errors = validateLeaveForm(sickLeave);

        if (Object.keys(errors).length > 0) {
            setSickErrors(errors);
            return;
        }

        const success = await submitLeave({
            dateFrom: sickLeave.fromDate,
            dateTo: sickLeave.toDate,
            leaveType: "SICK",
            comment: sickLeave.comment,
        });

        if (success) {
            setSickLeave({ fromDate: "", toDate: "", comment: "" });
            setSickErrors({});
            alert("SICK submitted!");
        }
    };




    return (
        <div className="max-w-4xl">
            <div className="space-y-3">
                <div className="grid grid-cols-2 gap-4">
                    {/* From Date */}
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text font-semibold text-sm">From Date</span>
                        </label>
                        <input
                            type="date"
                            value={sickLeave.fromDate}
                            min={new Date().toISOString().split("T")[0]}
                            disabled={isSubmitting}
                            onChange={(e) => handleSickChange('fromDate', e.target.value)}
                            className={`input input-bordered input-sm w-full focus:input-primary transition-all ${sickErrors.fromDate ? 'input-error' : ''
                                }`}
                        />
                        {sickErrors.fromDate && (
                            <label className="label">
                                <span className="label-text-alt text-xs text-error font-medium">{sickErrors.fromDate}</span>
                            </label>
                        )}
                    </div>

                    {/* To Date */}
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text font-semibold text-sm">To Date</span>
                        </label>
                        <input
                            type="date"
                            value={sickLeave.toDate}
                            min={new Date().toISOString().split("T")[0]}
                            disabled={isSubmitting}
                            onChange={(e) => handleSickChange('toDate', e.target.value)}
                            className={`input input-bordered input-sm w-full focus:input-primary transition-all ${sickErrors.toDate ? 'input-error' : ''
                                }`}
                        />
                        {sickErrors.toDate && (
                            <label className="label">
                                <span className="label-text-alt text-xs text-error font-medium">{sickErrors.toDate}</span>
                            </label>
                        )}
                    </div>

                    {/* Description/Comment Field */}
                    <div className="form-control flex flex-col gap-1 col-span-2">
                        <label className="label">
                            <span className="label-text font-semibold text-sm">Description</span>
                        </label>
                        <textarea
                            className={`textarea text-xs textarea-bordered h-40 w-full focus:textarea-primary transition-all ${sickErrors.comment ? 'textarea-error' : ''
                                }`}
                            placeholder="Please describe your symptoms or reason for sick leave to help us better understand your situation."
                            value={sickLeave.comment}
                            disabled={isSubmitting}
                            onChange={(e) => handleSickChange('comment', e.target.value)}
                        />
                        {sickErrors.comment && (
                            <label className="label">
                                <span className="label-text-alt text-xs text-error font-medium">{sickErrors.comment}</span>
                            </label>
                        )}
                    </div>
                </div>

                {/* Submit Button */}
                <button
                    onClick={handleSubmit}
                    disabled={isSubmitting}
                    className="btn btn-primary flex-1"
                >
                    {isSubmitting ? (
                        <span className="loading loading-spinner loading-sm"></span>
                    ) : (
                        "Submit Sick Request"
                    )}
                </button>
            </div>
        </div>
    );
};

export default SickLeaveTab;