import React from 'react';
import { YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { MobileSheet } from './Sheet';
import { CTAButton } from './Primitives';

type Translator = (key: string, defaultValue?: string) => string;

type LegalConsentSheetProps = {
  open: boolean;
  onClose: () => void;
  onConfirm: (consents: { acceptedTerms: boolean; acceptedWaiver: boolean }) => Promise<void> | void;
  busy?: boolean;
  requireWaiver?: boolean;
  t: Translator;
};

export function LegalConsentSheet({ open, onClose, onConfirm, busy = false, requireWaiver = true, t }: LegalConsentSheetProps) {
  const [acceptedTerms, setAcceptedTerms] = React.useState(false);
  const [acceptedWaiver, setAcceptedWaiver] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (open) {
      setAcceptedTerms(false);
      setAcceptedWaiver(false);
      setError(null);
    }
  }, [open]);

  async function handleConfirm() {
    if (!acceptedTerms) {
      setError(t('events.legalConsent.errorTerms', 'Please confirm the terms.'));
      return;
    }

    if (requireWaiver && !acceptedWaiver) {
      setError(t('events.legalConsent.errorWaiver', 'Please confirm the waiver.'));
      return;
    }

    setError(null);
    await onConfirm({ acceptedTerms, acceptedWaiver: requireWaiver ? acceptedWaiver : true });
  }

  return (
    <MobileSheet
      open={open}
      onClose={onClose}
      title={t('events.legalConsent.title', 'Before purchase')}
      footer={
        <YStack space="$2">
          {error ? (
            <Text fontSize="$sm" color="#b91c1c">
              {error}
            </Text>
          ) : null}
          <CTAButton label={t('events.legalConsent.confirm', 'Continue to checkout')} onPress={handleConfirm} loading={busy} disabled={busy} />
          <CTAButton label={t('events.legalConsent.cancel', 'Cancel')} tone="ghost" onPress={onClose} disabled={busy} />
        </YStack>
      }
    >
      <YStack space="$2">
        <Text fontSize="$sm" color="#111827">
          {t('events.legalConsent.description', 'Please confirm the legal notes before buying an add-on.')}
        </Text>
        <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <input
            type="checkbox"
            checked={acceptedTerms}
            onChange={(event) => setAcceptedTerms(event.target.checked)}
            style={{ marginTop: 4, width: 16, height: 16 }}
          />
          <Text fontSize="$sm" color="#111827">
            {t(
              'events.legalConsent.checkboxTerms',
              'I have read and accept the Terms & Conditions, Privacy Policy, and Right of Withdrawal.',
            )}
          </Text>
        </label>
        {requireWaiver ? (
          <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <input
              type="checkbox"
              checked={acceptedWaiver}
              onChange={(event) => setAcceptedWaiver(event.target.checked)}
              style={{ marginTop: 4, width: 16, height: 16 }}
            />
            <Text fontSize="$sm" color="#111827">
              {t(
                'events.legalConsent.checkboxWaiver',
                'I expressly request immediate provision of the digital service and understand my right of withdrawal expires once fulfilled.',
              )}
            </Text>
          </label>
        ) : null}
      </YStack>
    </MobileSheet>
  );
}