import React from 'react';
import {
  View, Text, ScrollView, TouchableOpacity, StyleSheet, Linking,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useBooking } from '../context/BookingContext';
import { COLORS, FONTS, FONT_SIZE, SPACING } from '../theme';

const PRICING = [
  {
    title: 'Discovery Call',
    duration: '15 Minutes',
    price: 'FREE',
    badge: 'Introductory',
    highlight: false,
    desc: 'Brief initial chat via phone or video. Let\'s get to know each other, explore what you\'d like to work on, and check compatibility with zero obligation.',
    cta: 'Schedule Call',
  },
  {
    title: 'Standard Session',
    duration: '60 Minutes',
    price: '$100',
    badge: 'Most Popular',
    highlight: true,
    desc: 'Available in person at my private practice in Kiyovu, Kigali, or online. Price also acceptable in equivalent Euro or RWF.',
    cta: 'Book Session',
  },
  {
    title: '6-Session Package',
    duration: '6 × 60 Minutes',
    price: '$500',
    badge: 'Value Pack',
    highlight: false,
    desc: 'Pay for 5 sessions upfront and get the 6th session completely FREE — a saving of $100. Ideal for trauma reprocessing, EMDR, or behavioral coaching.',
    cta: 'Purchase Package',
  },
];

export default function CostsScreen({ navigation }: any) {
  const { openBookingModal } = useBooking();
  const openWhatsApp = () => Linking.openURL('https://wa.me/250790000000');

  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>

      {/* Header */}
      <View style={styles.pageHeader}>
        <Text style={styles.overline}>Investment & Access</Text>
        <Text style={styles.pageTitle}>Costs & Location</Text>
        <Text style={styles.pageSubtitle}>
          Therapy and coaching as investments in your mental well-being and life quality.
        </Text>
        <View style={styles.divider} />
      </View>

      {/* Philosophy */}
      <View style={styles.section}>
        <Text style={styles.bodyText}>
          When we suffer from physical pain or a broken bone, we don't hesitate to see a doctor. Yet when we struggle with emotional exhaustion, anxiety, or traumatic baggage, we often put it off.
        </Text>
        <Text style={styles.philosophyBold}>
          Investing in your mental health is the most profound commitment you can make to yourself, your family, and your future.
        </Text>
      </View>

      {/* Pricing Cards */}
      <View style={[styles.section, { backgroundColor: COLORS.slate50 }]}>
        {PRICING.map((card, i) => (
          <View key={i} style={[styles.pricingCard, card.highlight && styles.pricingCardHighlight]}>
            <View style={styles.pricingCardHeader}>
              <View>
                <Text style={styles.pricingTitle}>{card.title}</Text>
                <View style={styles.pricingDurationRow}>
                  <Ionicons name="time-outline" size={13} color={COLORS.slate400} />
                  <Text style={styles.pricingDuration}>{card.duration}</Text>
                </View>
              </View>
              <View style={[styles.pricingBadge, card.highlight ? styles.pricingBadgeDark : styles.pricingBadgeLight]}>
                <Text style={[styles.pricingBadgeText, card.highlight ? { color: COLORS.white } : { color: COLORS.slate700 }]}>
                  {card.badge}
                </Text>
              </View>
            </View>
            <Text style={styles.pricingPrice}>{card.price}
              {card.price !== 'FREE' && <Text style={styles.pricingPriceSub}> / session</Text>}
            </Text>
            <View style={styles.pricingDivider} />
            <Text style={styles.pricingDesc}>{card.desc}</Text>
            <TouchableOpacity
              style={[styles.pricingBtn, card.highlight ? styles.pricingBtnDark : styles.pricingBtnOutline]}
              onPress={openBookingModal}
            >
              <Text style={[styles.pricingBtnText, !card.highlight && styles.pricingBtnTextDark]}>
                {card.cta}
              </Text>
            </TouchableOpacity>
          </View>
        ))}
      </View>

      {/* Sliding Scale */}
      <View style={styles.section}>
        <View style={styles.slidingScaleBox}>
          <View style={styles.sectionHeadRow}>
            <Ionicons name="heart-outline" size={20} color={COLORS.slate900} />
            <Text style={styles.sectionHeading}>Financial Solidarity / Sliding Scale</Text>
          </View>
          <Text style={styles.bodyText}>
            I firmly believe that everyone should have access to quality mental health counseling. For students, low-income earners, or individuals in challenging financial circumstances, I offer sliding scale rates on a limited basis.
          </Text>
          <Text style={styles.italicQuote}>
            "Please don't let financial limits hold you back from seeking support. Reach out and talk to me, and we will find a creative solution that works for you."
          </Text>
          <TouchableOpacity
            style={styles.btnDark}
            onPress={() => navigation.navigate('MoreMenu')}
          >
            <Text style={styles.btnDarkText}>Request Sliding Scale</Text>
          </TouchableOpacity>
        </View>
      </View>

      {/* Payment Methods */}
      <View style={[styles.section, { backgroundColor: COLORS.slate50 }]}>
        <View style={styles.infoCard}>
          <View style={styles.sectionHeadRow}>
            <Ionicons name="card-outline" size={18} color={COLORS.slate800} />
            <Text style={styles.sectionHeading}>Payment Methods</Text>
          </View>
          {[
            'Cash (USD, Euro, or RWF)',
            'Credit & debit cards (Visa, Mastercard)',
            'Direct Bank Transfers (Domestic & International)',
            'Mobile Money (MoMo) — preferred locally in Rwanda',
          ].map((method, i) => (
            <View key={i} style={styles.checkRow}>
              <Ionicons name="checkmark" size={14} color={COLORS.slate900} />
              <Text style={styles.checkText}>{method}</Text>
            </View>
          ))}
        </View>

        <View style={styles.infoCard}>
          <View style={styles.sectionHeadRow}>
            <Ionicons name="time-outline" size={18} color={COLORS.slate800} />
            <Text style={styles.sectionHeading}>Session Duration & Formats</Text>
          </View>
          {[
            'Standard session: 60 minutes',
            'EMDR & Hypnosis can be extended to 90–120 minutes',
            'In-person (Kiyovu, Kigali) or online worldwide',
            'Adaptive pacing based on therapeutic check-ins',
          ].map((item, i) => (
            <View key={i} style={styles.checkRow}>
              <Ionicons name="checkmark" size={14} color={COLORS.slate900} />
              <Text style={styles.checkText}>{item}</Text>
            </View>
          ))}
        </View>
      </View>

      {/* Location */}
      <View style={styles.darkSection}>
        <View style={{ alignItems: 'center', gap: SPACING.sm }}>
          <Ionicons name="location" size={36} color={COLORS.white} />
          <Text style={styles.darkTitle}>In-Person Practice & Online Worldwide</Text>
          <View style={styles.dividerWhite} />
        </View>
        <View style={styles.locationCard}>
          <View style={styles.locationBadge}>
            <Ionicons name="location" size={12} color={COLORS.white} />
            <Text style={styles.locationBadgeText}>In Kigali, Rwanda</Text>
          </View>
          <Text style={styles.locationCardTitle}>Kiyovu Practice Room</Text>
          <Text style={styles.locationCardText}>
            My quiet private practice is located in Kiyovu, one of the greenest, safest, and most tranquil suburbs in Kigali. The practice provides a safe, quiet space surrounded by trees, offering absolute anonymity and ease of parking.
          </Text>
        </View>
        <View style={styles.locationCard}>
          <View style={[styles.locationBadge, styles.locationBadgeOutline]}>
            <Ionicons name="globe-outline" size={12} color={COLORS.slate900} />
            <Text style={[styles.locationBadgeText, { color: COLORS.slate900 }]}>Worldwide Online</Text>
          </View>
          <Text style={styles.locationCardTitle}>Secure Encrypted Video Calling</Text>
          <Text style={styles.locationCardText}>
            Sessions are conducted via encrypted, safe video platforms (like Signal or Whereby), ensuring strict clinical compliance and absolute data privacy.
          </Text>
        </View>
      </View>

      {/* Cancellation Policy */}
      <View style={styles.section}>
        <View style={styles.cancellationBox}>
          <Ionicons name="warning-outline" size={22} color={COLORS.error} style={{ marginTop: 2 }} />
          <View style={{ flex: 1, gap: SPACING.xs }}>
            <Text style={styles.cancellationTitle}>Cancellation & Booking Policy</Text>
            <Text style={styles.cancellationText}>
              When scheduling an appointment, that slot is reserved exclusively for you. If you need to cancel or reschedule, please do so at least <Text style={{ fontWeight: '700' }}>24 hours in advance</Text>.
            </Text>
            <Text style={styles.cancellationText}>
              Appointments cancelled with less than 24 hours' notice will be charged the <Text style={{ fontWeight: '700' }}>full-session fee</Text>.
            </Text>
          </View>
        </View>
      </View>

      {/* Bottom CTA */}
      <View style={[styles.section, { backgroundColor: COLORS.white }]}>
        <Text style={styles.ctaTitle}>Have Questions About Fees?</Text>
        <Text style={styles.ctaBody}>
          I'm always happy to clarify rates, package configurations, or provide further information over a brief introductory chat.
        </Text>
        <View style={styles.rowBtns}>
          <TouchableOpacity style={styles.btnDark} onPress={openBookingModal}>
            <Text style={styles.btnDarkText}>Book FREE Call</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.btnOutline} onPress={openWhatsApp}>
            <Ionicons name="chatbubble-ellipses-outline" size={14} color={COLORS.slate600} />
            <Text style={styles.btnOutlineText}>WhatsApp</Text>
          </TouchableOpacity>
        </View>
      </View>

    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container:          { flex: 1, backgroundColor: COLORS.white },
  pageHeader:         { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.sm, backgroundColor: COLORS.slate50, borderBottomWidth: 1, borderBottomColor: COLORS.slate200 },
  overline:           { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 3 },
  pageTitle:          { fontFamily: FONTS.heading, fontSize: FONT_SIZE.xxl, fontWeight: '900', color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: -0.5 },
  pageSubtitle:       { fontFamily: FONTS.serif, fontSize: FONT_SIZE.base, color: COLORS.slate500, fontStyle: 'italic' },
  divider:            { width: 48, height: 2, backgroundColor: COLORS.slate900 },
  dividerWhite:       { width: 48, height: 2, backgroundColor: COLORS.white },
  section:            { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.md },
  darkSection:        { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.md, backgroundColor: COLORS.slate900 },
  bodyText:           { fontFamily: FONTS.serif, fontSize: FONT_SIZE.base, color: COLORS.slate600, lineHeight: 26 },
  philosophyBold:     { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1, lineHeight: 20 },
  pricingCard:        { backgroundColor: COLORS.white, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.lg, gap: SPACING.md },
  pricingCardHighlight: { borderWidth: 2, borderColor: COLORS.slate900 },
  pricingCardHeader:  { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' },
  pricingTitle:       { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.base, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1 },
  pricingDurationRow: { flexDirection: 'row', gap: 4, alignItems: 'center', marginTop: 4 },
  pricingDuration:    { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 2 },
  pricingBadge:       { paddingHorizontal: SPACING.sm, paddingVertical: 3 },
  pricingBadgeDark:   { backgroundColor: COLORS.slate900 },
  pricingBadgeLight:  { backgroundColor: COLORS.slate100 },
  pricingBadgeText:   { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 1 },
  pricingPrice:       { fontFamily: FONTS.heading, fontWeight: '900', fontSize: 38, color: COLORS.slate900, letterSpacing: -1 },
  pricingPriceSub:    { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate400, fontWeight: '400' },
  pricingDivider:     { height: 1, backgroundColor: COLORS.slate100 },
  pricingDesc:        { fontFamily: FONTS.serif, fontSize: FONT_SIZE.sm, color: COLORS.slate500, lineHeight: 20 },
  pricingBtn:         { paddingVertical: SPACING.sm + 4, alignItems: 'center' },
  pricingBtnDark:     { backgroundColor: COLORS.slate900 },
  pricingBtnOutline:  { borderWidth: 1, borderColor: COLORS.slate200 },
  pricingBtnText:     { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.white, textTransform: 'uppercase', letterSpacing: 2 },
  pricingBtnTextDark: { color: COLORS.slate900 },
  slidingScaleBox:    { backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.lg, gap: SPACING.md },
  sectionHeadRow:     { flexDirection: 'row', gap: SPACING.sm, alignItems: 'center' },
  sectionHeading:     { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xs, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 2, flex: 1 },
  italicQuote:        { fontFamily: FONTS.serif, fontStyle: 'italic', fontSize: FONT_SIZE.sm, color: COLORS.slate600, lineHeight: 20 },
  infoCard:           { backgroundColor: COLORS.white, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.lg, gap: SPACING.sm },
  checkRow:           { flexDirection: 'row', gap: SPACING.sm, alignItems: 'flex-start' },
  checkText:          { flex: 1, fontFamily: FONTS.sans, fontSize: FONT_SIZE.xs, color: COLORS.slate600, lineHeight: 18 },
  darkTitle:          { fontFamily: FONTS.heading, fontWeight: '900', fontSize: FONT_SIZE.xl, color: COLORS.white, textTransform: 'uppercase', textAlign: 'center', lineHeight: 28 },
  locationCard:       { backgroundColor: COLORS.slate800, borderWidth: 1, borderColor: COLORS.slate700, padding: SPACING.lg, gap: SPACING.sm },
  locationBadge:      { flexDirection: 'row', gap: 4, alignItems: 'center', backgroundColor: COLORS.slate900, alignSelf: 'flex-start', paddingHorizontal: SPACING.sm, paddingVertical: 3 },
  locationBadgeOutline: { backgroundColor: COLORS.white, borderWidth: 1, borderColor: COLORS.slate200 },
  locationBadgeText:  { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.white, textTransform: 'uppercase', letterSpacing: 1 },
  locationCardTitle:  { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.white, textTransform: 'uppercase', letterSpacing: 1 },
  locationCardText:   { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate400, lineHeight: 18 },
  cancellationBox:    { flexDirection: 'row', gap: SPACING.md, backgroundColor: COLORS.errorBg, borderWidth: 1, borderColor: COLORS.errorBorder, padding: SPACING.md },
  cancellationTitle:  { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xs, color: COLORS.error, textTransform: 'uppercase', letterSpacing: 2 },
  cancellationText:   { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate600, lineHeight: 18 },
  ctaTitle:           { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xl, color: COLORS.slate900, textTransform: 'uppercase' },
  ctaBody:            { fontFamily: FONTS.serif, fontSize: FONT_SIZE.sm, color: COLORS.slate500, lineHeight: 20 },
  rowBtns:            { flexDirection: 'row', gap: SPACING.sm },
  btnDark:            { flex: 1, backgroundColor: COLORS.slate900, paddingVertical: SPACING.sm + 4, alignItems: 'center', justifyContent: 'center' },
  btnDarkText:        { color: COLORS.white, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  btnOutline:         { flex: 1, borderWidth: 1, borderColor: COLORS.slate200, paddingVertical: SPACING.sm + 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 4 },
  btnOutlineText:     { color: COLORS.slate900, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
});
