import React, { ReactNode } from 'react';
import { View, Text, Modal, ScrollView, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { CheckCircle, X } from 'lucide-react-native';  // Updated icons
import colors from '../../Constant/Color';
type ModalProps = {
  visible: boolean;
  onClose: () => void;
  onChecked: () => void
}

const TermsAndConditionsModal: React.FC<ModalProps> = ({ visible, onClose, onChecked }) => {
  return (
    <Modal
      animationType="slide"
      transparent={false}
      visible={visible}
      onRequestClose={onClose}
    >
      <View style={styles.container}>
        <ScrollView contentContainerStyle={styles.scrollContainer}>
          <View style={styles.header}>
            <Text style={styles.title}>Terms & Conditions</Text>
            <Text style={styles.subtitle}>Last updated: {new Date().toLocaleDateString()}</Text>
          </View>

          <View style={styles.content}>
            <Section title="1. Acceptance of Terms">
              <Text style={styles.paragraph}>
                By accessing or using our services, you agree to be bound by these Terms and Conditions.
                If you do not agree with any part of these terms, you must not use our services.
              </Text>
            </Section>

            <Section title="2. User Responsibilities">
              <Text style={styles.paragraph}>
                You are responsible for maintaining the confidentiality of your account information and
                for all activities that occur under your account. You agree to notify us immediately
                of any unauthorized use of your account.
              </Text>
            </Section>

            <Section title="3. Intellectual Property">
              <Text style={styles.paragraph}>
                All content included on our platform, such as text, graphics, logos, and software, is
                the property of our company and protected by intellectual property laws. You may not
                reproduce, distribute, or create derivative works without our express permission.
              </Text>
            </Section>

            <Section title="4. Limitation of Liability">
              <Text style={styles.paragraph}>
                Our company shall not be liable for any indirect, incidental, special, or consequential
                damages resulting from the use or inability to use our services, even if we have been
                advised of the possibility of such damages.
              </Text>
            </Section>

            <Section title="5. Privacy Policy">
              <Text style={styles.paragraph}>
                Your use of our services is also governed by our Privacy Policy, which explains how we
                collect, use, and protect your personal information. Please review our Privacy Policy
                to understand our practices.
              </Text>
            </Section>

            <Section title="6. Changes to Terms">
              <Text style={styles.paragraph}>
                We reserve the right to modify these terms at any time. We will notify you of any changes
                by posting the new Terms and Conditions on this page. Your continued use of the service
                after such modifications constitutes your acceptance of the new terms.
              </Text>
            </Section>

            <Section title="7. Governing Law">
              <Text style={styles.paragraph}>
                These Terms shall be governed by and construed in accordance with the laws of the
                jurisdiction in which our company is registered, without regard to its conflict of law provisions.
              </Text>
            </Section>

            <Text style={styles.footerText}>
              If you have any questions about these Terms, please contact us at legal@company.com.
            </Text>
          </View>

          {/* Accept Button */}
          <TouchableOpacity 
            style={styles.acceptButton}
            onPress={() => {
              onClose();
              onChecked();
            }}
          >
            <CheckCircle color={colors.white} size={28} />
            <Text style={styles.acceptButtonText}>I Accept</Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    </Modal>
  );
};

// Reusable Section component
type SectionProps = {
  title: string;
  children: ReactNode;
};

const Section: React.FC<SectionProps> = ({ title, children }) => (
  <View style={styles.section}>
    <Text style={styles.sectionTitle}>{title}</Text>
    {children}
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.lightGray,  // Updated with your colors
  },
  scrollContainer: {
    paddingBottom: 120,  // Space for accept button
    flexGrow: 1,
  },
  header: {
    backgroundColor: colors.primary,  // Orange header
    paddingVertical: 32,
    paddingHorizontal: 24,
    borderBottomLeftRadius: 24,
    borderBottomRightRadius: 24,
    marginBottom: 24,
    shadowColor: colors.shadow,
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.25,
    shadowRadius: 12,
    elevation: 8,
  },
  title: {
    fontSize: 28,
    fontWeight: '800',
    color: colors.white,
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: 'rgba(255,255,255,0.85)',
  },
  content: {
    paddingHorizontal: 24,
    paddingBottom: 40,
  },
  section: {
    marginBottom: 28,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: colors.darkText,
    marginBottom: 12,
  },
  paragraph: {
    fontSize: 16,
    lineHeight: 25,
    color: colors.grayText,
  },
  footerText: {
    fontSize: 15,
    fontStyle: 'italic',
    color: colors.lightText,
    marginTop: 24,
    textAlign: 'center',
    lineHeight: 22,
  },
  acceptButton: {
    position: 'absolute',
    bottom: 40,
    left: 24,
    right: 24,
    backgroundColor: colors.primary,
    borderRadius: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 18,
    paddingHorizontal: 20,
    shadowColor: colors.shadow,
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.35,
    shadowRadius: 16,
    elevation: 12,
  },
  acceptButtonText: {
    color: colors.white,
    fontSize: 18,
    fontWeight: '700',
    marginLeft: 12,
    letterSpacing: 0.5,
  },
});

export default TermsAndConditionsModal;