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

const CHANNELS = ['WhatsApp', 'Email', 'Phone Call'];
const FORMATS  = ['In-person (Kiyovu, Kigali)', 'Online Worldwide'];

export default function ContactScreen() {
  const { openBookingModal } = useBooking();
  const openWhatsApp = () => Linking.openURL('https://wa.me/250790000000');
  const openEmail    = () => Linking.openURL('mailto:mail@yourwave-coaching.com');

  const [name,    setName]    = useState('');
  const [email,   setEmail]   = useState('');
  const [phone,   setPhone]   = useState('');
  const [channel, setChannel] = useState('WhatsApp');
  const [format,  setFormat]  = useState('In-person (Kiyovu, Kigali)');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted]   = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = () => {
    if (!name.trim() || !email.trim() || !message.trim()) {
      Alert.alert('Required fields', 'Please fill in your name, email, and message.');
      return;
    }
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setSubmitted(true);
      setName(''); setEmail(''); setPhone(''); setMessage('');
    }, 1200);
  };

  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>

        {/* Header */}
        <View style={styles.pageHeader}>
          <Text style={styles.overline}>Get In Touch</Text>
          <Text style={styles.pageTitle}>Contact Me</Text>
          <Text style={styles.pageSubtitle}>
            Have any questions or ready to book? I would love to hear from you.
          </Text>
          <View style={styles.divider} />
        </View>

        {/* Quick Actions */}
        <View style={styles.quickActions}>
          <TouchableOpacity style={styles.quickBtn} onPress={openBookingModal}>
            <Ionicons name="call-outline" size={18} color={COLORS.white} />
            <Text style={styles.quickBtnText}>Book FREE Call</Text>
          </TouchableOpacity>
          <TouchableOpacity style={[styles.quickBtn, styles.quickBtnOutline]} onPress={openWhatsApp}>
            <Ionicons name="chatbubble-ellipses-outline" size={18} color={COLORS.slate900} />
            <Text style={[styles.quickBtnText, { color: COLORS.slate900 }]}>WhatsApp</Text>
          </TouchableOpacity>
        </View>

        {/* Contact Form */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Send Me a Message</Text>

          {submitted ? (
            <View style={styles.successBox}>
              <Ionicons name="checkmark-circle" size={40} color={COLORS.slate900} />
              <Text style={styles.successTitle}>Message Sent!</Text>
              <Text style={styles.successText}>
                Thank you for reaching out. Manuel will review your details and get back to you within 24 hours via your preferred contact channel.
              </Text>
              <TouchableOpacity onPress={() => setSubmitted(false)}>
                <Text style={styles.successAction}>Send another message</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={styles.form}>

              {/* Name */}
              <View style={styles.fieldGroup}>
                <Text style={styles.fieldLabel}>Your Name *</Text>
                <TextInput
                  style={styles.input}
                  value={name}
                  onChangeText={setName}
                  placeholder="e.g. Jean Bosco"
                  placeholderTextColor={COLORS.slate400}
                />
              </View>

              {/* Email */}
              <View style={styles.fieldGroup}>
                <Text style={styles.fieldLabel}>Email Address *</Text>
                <TextInput
                  style={styles.input}
                  value={email}
                  onChangeText={setEmail}
                  placeholder="e.g. bosco@gmail.com"
                  placeholderTextColor={COLORS.slate400}
                  keyboardType="email-address"
                  autoCapitalize="none"
                />
              </View>

              {/* Phone */}
              <View style={styles.fieldGroup}>
                <Text style={styles.fieldLabel}>Phone Number</Text>
                <TextInput
                  style={styles.input}
                  value={phone}
                  onChangeText={setPhone}
                  placeholder="e.g. +250 790 000 000"
                  placeholderTextColor={COLORS.slate400}
                  keyboardType="phone-pad"
                />
              </View>

              {/* Channel */}
              <View style={styles.fieldGroup}>
                <Text style={styles.fieldLabel}>Preferred Contact Channel</Text>
                <View style={styles.chipGroup}>
                  {CHANNELS.map(c => (
                    <TouchableOpacity
                      key={c}
                      style={[styles.chip, channel === c && styles.chipActive]}
                      onPress={() => setChannel(c)}
                    >
                      <Text style={[styles.chipText, channel === c && styles.chipTextActive]}>{c}</Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>

              {/* Format */}
              <View style={styles.fieldGroup}>
                <Text style={styles.fieldLabel}>Preferred Session Type</Text>
                <View style={styles.chipGroup}>
                  {FORMATS.map(f => (
                    <TouchableOpacity
                      key={f}
                      style={[styles.chip, format === f && styles.chipActive]}
                      onPress={() => setFormat(f)}
                    >
                      <Text style={[styles.chipText, format === f && styles.chipTextActive]}>{f}</Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>

              {/* Message */}
              <View style={styles.fieldGroup}>
                <Text style={styles.fieldLabel}>Your Message *</Text>
                <TextInput
                  style={[styles.input, styles.textArea]}
                  value={message}
                  onChangeText={setMessage}
                  placeholder="Write your questions, areas of concern, or preferred times for a Discovery call..."
                  placeholderTextColor={COLORS.slate400}
                  multiline
                  numberOfLines={5}
                  textAlignVertical="top"
                />
              </View>

              {/* Submit */}
              <TouchableOpacity
                style={[styles.submitBtn, submitting && styles.submitBtnDisabled]}
                onPress={handleSubmit}
                disabled={submitting}
              >
                <Ionicons name="send" size={14} color={COLORS.white} />
                <Text style={styles.submitBtnText}>
                  {submitting ? 'Sending...' : 'Send Message'}
                </Text>
              </TouchableOpacity>

              <View style={styles.privacyRow}>
                <Ionicons name="shield-checkmark-outline" size={13} color={COLORS.slate400} />
                <Text style={styles.privacyText}>
                  Your data is confidential and protected by professional secrecy.
                </Text>
              </View>
            </View>
          )}
        </View>

        {/* Practice Details */}
        <View style={[styles.section, { backgroundColor: COLORS.slate50 }]}>
          <Text style={styles.sectionTitle}>Practice Details</Text>

          <View style={styles.detailRow}>
            <Ionicons name="location-outline" size={18} color={COLORS.slate400} />
            <View style={{ flex: 1, gap: 2 }}>
              <Text style={styles.detailLabel}>Kigali Practice Location</Text>
              <Text style={styles.detailValue}>Kiyovu, Kigali, Rwanda</Text>
              <Text style={styles.detailNote}>Quiet green sanctuary, safe neighborhood, dedicated parking, complete privacy.</Text>
            </View>
          </View>

          <View style={styles.detailRow}>
            <Ionicons name="mail-outline" size={18} color={COLORS.slate400} />
            <View style={{ flex: 1, gap: 2 }}>
              <Text style={styles.detailLabel}>Email Address</Text>
              <TouchableOpacity onPress={openEmail}>
                <Text style={[styles.detailValue, { textDecorationLine: 'underline' }]}>
                  mail@yourwave-coaching.com
                </Text>
              </TouchableOpacity>
            </View>
          </View>

          <View style={styles.detailRow}>
            <Ionicons name="globe-outline" size={18} color={COLORS.slate400} />
            <View style={{ flex: 1, gap: 2 }}>
              <Text style={styles.detailLabel}>Website</Text>
              <TouchableOpacity onPress={() => Linking.openURL('https://www.yourwave-coaching.com')}>
                <Text style={[styles.detailValue, { textDecorationLine: 'underline' }]}>
                  www.yourwave-coaching.com
                </Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* Confidentiality Note */}
          <View style={styles.confidentialityBox}>
            <Text style={styles.confidentialityTitle}>Professional Confidentiality</Text>
            <Text style={styles.confidentialityText}>
              Every communication is subject to strict professional secrecy (Schweigepflicht) according to German counseling regulations. No information is ever shared with third parties without your explicit written consent.
            </Text>
          </View>
        </View>

      </ScrollView>
    </KeyboardAvoidingView>
  );
}

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 },
  quickActions:        { flexDirection: 'row', gap: SPACING.sm, padding: SPACING.lg, paddingVertical: SPACING.md, backgroundColor: COLORS.slate900 },
  quickBtn:            { flex: 1, backgroundColor: COLORS.white, paddingVertical: SPACING.sm + 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.xs },
  quickBtnOutline:     { backgroundColor: 'transparent', borderWidth: 1, borderColor: COLORS.slate600 },
  quickBtnText:        { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 2 },
  section:             { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.md },
  sectionTitle:        { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 2 },
  form:                { gap: SPACING.md },
  fieldGroup:          { gap: 4 },
  fieldLabel:          { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 2 },
  input:               { backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200, paddingHorizontal: SPACING.md, paddingVertical: SPACING.sm + 2, fontFamily: FONTS.sans, fontSize: FONT_SIZE.sm, color: COLORS.slate900 },
  textArea:            { minHeight: 120, paddingTop: SPACING.sm },
  chipGroup:           { flexDirection: 'row', flexWrap: 'wrap', gap: SPACING.sm },
  chip:                { borderWidth: 1, borderColor: COLORS.slate200, paddingHorizontal: SPACING.md, paddingVertical: SPACING.xs + 2, backgroundColor: COLORS.slate50 },
  chipActive:          { backgroundColor: COLORS.slate900, borderColor: COLORS.slate900 },
  chipText:            { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate700, textTransform: 'uppercase', letterSpacing: 1 },
  chipTextActive:      { color: COLORS.white },
  submitBtn:           { backgroundColor: COLORS.slate900, paddingVertical: SPACING.sm + 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.xs },
  submitBtnDisabled:   { backgroundColor: COLORS.slate200 },
  submitBtnText:       { color: COLORS.white, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  privacyRow:          { flexDirection: 'row', gap: SPACING.xs, alignItems: 'center', justifyContent: 'center' },
  privacyText:         { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, flex: 1, lineHeight: 16 },
  successBox:          { backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.xl, alignItems: 'center', gap: SPACING.md },
  successTitle:        { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.lg, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1 },
  successText:         { fontFamily: FONTS.serif, fontSize: FONT_SIZE.sm, color: COLORS.slate500, textAlign: 'center', lineHeight: 20 },
  successAction:       { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xs, color: COLORS.slate900, textDecorationLine: 'underline', textTransform: 'uppercase', letterSpacing: 1 },
  detailRow:           { flexDirection: 'row', gap: SPACING.md, alignItems: 'flex-start' },
  detailLabel:         { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate400, textTransform: 'uppercase', letterSpacing: 2 },
  detailValue:         { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.slate900 },
  detailNote:          { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, lineHeight: 16 },
  confidentialityBox:  { backgroundColor: COLORS.white, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.md, gap: SPACING.xs },
  confidentialityTitle:{ fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 2 },
  confidentialityText: { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate500, lineHeight: 18 },
});
