import { useState } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { Card, CardBody, CardHeader } from '../ui/wp-card';
import { Divider } from '../ui/divider';
import { Heading } from '../ui/heading';
import { Flex, FlexItem } from '../ui/flex';
import { Text } from '../ui/text';
import { Spacer } from '../ui/spacer';
import { PlusCircle, Trash2 } from 'lucide-react';
import { Controller, useFormContext } from 'react-hook-form';
import { FhirPeriod } from '../index.ts';

interface FhirOperationalHoursNotAvailableProps {
    notAvailable: any;
    label: string;
    context?: string;
    submitting?: boolean;
}

const FhirOperationalHoursNotAvailable = ({
                                              notAvailable,
                                              label,
                                              context = 'notAvailable',
                                              submitting = false
                                          }: FhirOperationalHoursNotAvailableProps) => {
    const { control, getValues } = useFormContext();
    const [confirmIndex, setConfirmIndex] = useState<number | null>(null);
    const spacerMargin = '24px';

    const addNotAvailable = () => {
        if (canAddNotAvailable()) {
            notAvailable.append({ description: '', during: { start: '', end: '' } });
        }
    };

    const requestRemove = (index: number) => {
        setConfirmIndex(index);
    };

    const confirmRemove = () => {
        if (confirmIndex !== null) {
            notAvailable.remove(confirmIndex);
            setConfirmIndex(null);
        }
    };

    const cancelRemove = () => setConfirmIndex(null);

    const canAddNotAvailable = (): boolean => {
        if (notAvailable.fields.length === 0) return true;
        const lastDescription = getValues(`${context}.${notAvailable.fields.length - 1}.description`) ?? '';
        return lastDescription.trim() !== '';
    };

    return (
        <>
            <Spacer margin={spacerMargin}/>
            <Heading level={5}>{label}</Heading>
            <Divider margin="2"/>
            <Spacer margin={spacerMargin}/>

            {notAvailable.fields.map((period: any, periodIndex: number) => (
                <div key={period.id}>
                    <Card>
                        <CardHeader>
                            <Flex align="center" justify="space-between" style={{ width: '100%' }}>
                                <FlexItem>
                                    <Heading level={5}>Description</Heading>
                                </FlexItem>
                                <FlexItem>
                                    {confirmIndex === periodIndex ? (
                                        <Flex align="center" gap={1}>
                                            <FlexItem>
                                                <Text size="small" style={{ color: 'var(--danger)' }}>Remove?</Text>
                                            </FlexItem>
                                            <FlexItem>
                                                {/* Yes/No are an INLINE confirm, not a modal — there is
                                                    no X doing the same thing, so "No" stays. The
                                                    hardcoded #cc1818 goes: btn-red-ghost is the house
                                                    treatment for exactly this. */}
                                                <button
                                                    type="button"
                                                    className="btn btn-red-ghost-sm"
                                                    onClick={confirmRemove}
                                                    disabled={submitting}
                                                >
                                                    Yes
                                                </button>
                                            </FlexItem>
                                            <FlexItem>
                                                <button
                                                    type="button"
                                                    className="btn btn-blue-ghost-sm"
                                                    onClick={cancelRemove}
                                                    disabled={submitting}
                                                >
                                                    No
                                                </button>
                                            </FlexItem>
                                        </Flex>
                                    ) : (
                                        <button
                                            type="button"
                                            className="btn btn-red-ghost"
                                            title="Remove not available period"
                                            aria-label="Remove not available period"
                                            onClick={() => requestRemove(periodIndex)}
                                            disabled={submitting}
                                        >
                                            <Trash2 />
                                        </button>
                                    )}
                                </FlexItem>
                            </Flex>
                        </CardHeader>
                        <CardBody>
                            <Controller
                                name={`${context}.${periodIndex}.description`}
                                control={control}
                                render={({ field }) => (
                                    <TextareaControl
                                                     style={{ width: '100%' }}
                                                     label=""
                                                     // Named from the visible Description heading above,
                                                     // which is a heading rather than a label.
                                                     aria-label="Description"
                                                     help="Reason presented to the user explaining why time not available"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     rows={5}
                                                     disabled={submitting}/>
                                )}
                            />

                            <Spacer margin={spacerMargin}/>

                            <FhirPeriod
                                label="Service not available from this date"
                                context={`${context}.${periodIndex}.during`}
                                disabled={submitting}
                                alwaysExpanded
                            />

                            <Spacer margin={spacerMargin}/>
                        </CardBody>
                    </Card>
                    <Spacer margin={spacerMargin}/>
                </div>
            ))}

            <Flex align="center" justify="center">
                <FlexItem>
                    <button
                        type="button"
                        className={`btn btn-blue-ghost${submitting ? ' btn-busy' : ''}`}
                        onClick={addNotAvailable}
                        disabled={!canAddNotAvailable() || submitting}
                    >
                        <PlusCircle />
                        Add
                    </button>
                </FlexItem>
            </Flex>
        </>
    );
};

export default FhirOperationalHoursNotAvailable;