'use client';

import { useCallback, useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import {
  StaffWorkingHoursStep,
  createDefaultWorkingHoursState,
  useWorkingHoursForm,
  workingHoursPayloadFromState,
  workingHoursStateFromApi,
} from '@/components/ui/staff/StaffWorkingHoursStep';
import { accountApi } from '@/lib/api/account';

type OwnerWorkingHoursDialogProps = {
  open: boolean;
  onClose: () => void;
  onComplete: (options: {
    skipHours: boolean;
    hoursPayload?: ReturnType<typeof workingHoursPayloadFromState>;
  }) => Promise<void>;
};

export function OwnerWorkingHoursDialog({
  open,
  onClose,
  onComplete,
}: OwnerWorkingHoursDialogProps) {
  const t = useTranslations('settings');
  const tStaff = useTranslations('staff');
  const tCommon = useTranslations('common');
  const {
    days,
    setDays,
    autoRepeatWeekly,
    setAutoRepeatWeekly,
    validationError,
    setValidationError,
    reset,
  } = useWorkingHoursForm();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!open) {
      setLoading(false);
      return;
    }

    let cancelled = false;
    reset(createDefaultWorkingHoursState());

    void accountApi
      .getMyWorkingHours()
      .then((res) => {
        if (cancelled) return;
        reset(workingHoursStateFromApi(res.data));
      })
      .catch(() => {
        /* keep defaults for first-time opt-in */
      });

    return () => {
      cancelled = true;
    };
  }, [open, reset]);

  const handleValidationChange = useCallback(
    (error: string | null) => {
      setValidationError(error);
    },
    [setValidationError],
  );

  const handleClose = useCallback(() => {
    if (loading) return;
    onClose();
  }, [loading, onClose]);

  const handleSkip = async () => {
    try {
      setLoading(true);
      await onComplete({ skipHours: true });
      onClose();
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async () => {
    if (validationError) return;
    try {
      setLoading(true);
      await onComplete({
        skipHours: false,
        hoursPayload: workingHoursPayloadFromState({ days, autoRepeatWeekly }),
      });
      onClose();
    } finally {
      setLoading(false);
    }
  };

  if (!open) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50">
      <div
        className="w-full sm:max-w-lg max-h-[90dvh] overflow-y-auto rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-md)] border border-border bg-background-secondary p-4 sm:p-6 shadow-xl space-y-4"
        role="dialog"
        aria-modal="true"
        aria-labelledby="owner-working-hours-title"
      >
        <div className="flex items-start justify-between gap-3">
          <div>
            <h2 id="owner-working-hours-title" className="text-lg font-semibold text-text-primary pr-2">
              {t('participateWorkingHoursTitle')}
            </h2>
            <p className="text-xs text-text-muted mt-1">{t('participateWorkingHoursSubtitle')}</p>
          </div>
          <DialogCloseButton onClick={handleClose} />
        </div>

        <StaffWorkingHoursStep
          days={days}
          autoRepeatWeekly={autoRepeatWeekly}
          onDaysChange={setDays}
          onAutoRepeatWeeklyChange={setAutoRepeatWeekly}
          onValidationChange={handleValidationChange}
          disabled={loading}
        />

        <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-2">
          <Button variant="outline" type="button" disabled={loading} onClick={handleClose}>
            {tCommon('cancel')}
          </Button>
          <Button
            type="button"
            variant="outline"
            isLoading={loading}
            onClick={() => handleSkip()}
          >
            {tStaff('skipForNow')}
          </Button>
          <Button
            type="button"
            isLoading={loading}
            disabled={Boolean(validationError)}
            onClick={() => handleSave()}
          >
            {t('participateSaveHours')}
          </Button>
        </div>
      </div>
    </div>
  );
}

export { workingHoursPayloadFromState };
