import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

import SheetModal from '@/components/ui/SheetModal';

type Props = {
  visible: boolean;
  onClose: () => void;
};

export default function WidgetModal({ visible, onClose }: Props) {
  const { t } = useTranslation();

  return (
    <SheetModal visible={visible} title={t('profile.widget')} onClose={onClose}>
      <View style={styles.content}>
        <View style={styles.row}>
          <PreviewCard label={t('widget.lockScreen')}>
            <View style={[styles.previewInner, styles.previewLock]}>
              <Text style={styles.previewDate} numberOfLines={1}>
                {t('widget.previewDate')}
              </Text>
              <Text style={styles.previewTime} numberOfLines={1}>
                13:45
              </Text>
            </View>
          </PreviewCard>

          <PreviewCard label={t('widget.homeScreen')}>
            <View style={[styles.previewInner, styles.previewHome]}>
              <Text style={styles.previewQuote} numberOfLines={3}>
                {t('widget.previewQuote')}
              </Text>
            </View>
          </PreviewCard>
        </View>

        <Text style={styles.desc}>{t('settings.widgetDesc')}</Text>
      </View>
    </SheetModal>
  );
}

function PreviewCard({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <View style={styles.card}>
      {children}
      <Text style={styles.cardLabel}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  content: {
    paddingBottom: 18,
    gap: 14,
  },
  row: {
    flexDirection: 'row',
    gap: 12,
  },
  card: {
    flex: 1,
    borderRadius: 16,
    overflow: 'hidden',
    backgroundColor: 'rgba(255,255,255,0.75)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(94,42,40,0.12)',
  },
  previewInner: {
    height: 120,
    padding: 12,
    justifyContent: 'center',
  },
  previewLock: {
    backgroundColor: 'rgba(244,214,194,0.65)',
  },
  previewHome: {
    backgroundColor: 'rgba(243,208,225,0.55)',
  },
  previewDate: {
    color: 'rgba(94,42,40,0.70)',
    fontSize: 12,
    fontWeight: '600',
    marginBottom: 6,
  },
  previewTime: {
    color: '#ffffff',
    fontSize: 44,
    fontWeight: '800',
    letterSpacing: 1,
  },
  previewQuote: {
    color: '#5E2A28',
    fontSize: 14,
    lineHeight: 20,
    fontWeight: '700',
  },
  cardLabel: {
    paddingVertical: 10,
    textAlign: 'center',
    color: '#5E2A28',
    fontSize: 13,
    fontWeight: '700',
  },
  desc: {
    color: 'rgba(94,42,40,0.75)',
    fontSize: 13,
    lineHeight: 18,
  },
});