/**
 * DialpadScreen.tsx — the home screen. A real-phone dialpad: big number display
 * with a backspace, 3x4 keypad with letters, and a prominent green call button.
 * Shows the live registration status so the engineer knows they're reachable.
 */
import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet, SafeAreaView } from 'react-native';
import DialKey from '../components/DialKey';
import { colors, spacing, typography } from '../theme';

interface Props {
  registered: boolean;
  extension: string;
  onCall: (number: string) => void;
  onLogout: () => void;
}

const KEYS: { d: string; l?: string }[] = [
  { d: '1', l: '' }, { d: '2', l: 'ABC' }, { d: '3', l: 'DEF' },
  { d: '4', l: 'GHI' }, { d: '5', l: 'JKL' }, { d: '6', l: 'MNO' },
  { d: '7', l: 'PQRS' }, { d: '8', l: 'TUV' }, { d: '9', l: 'WXYZ' },
  { d: '*', l: '' }, { d: '0', l: '+' }, { d: '#', l: '' },
];

export default function DialpadScreen({ registered, extension, onCall, onLogout }: Props) {
  const [number, setNumber] = useState('');

  const press = (d: string) => setNumber((n) => (n.length < 20 ? n + d : n));
  const longPressZero = (d: string) => d === '0' && setNumber((n) => n + '+');
  const backspace = () => setNumber((n) => n.slice(0, -1));
  const clearAll = () => setNumber('');

  return (
    <SafeAreaView style={styles.safe}>
      {/* Header: status + identity */}
      <View style={styles.header}>
        <View style={styles.statusRow}>
          <View style={[styles.dot, { backgroundColor: registered ? colors.answer : colors.decline }]} />
          <Text style={styles.statusText}>
            {registered ? `Online · Ext ${extension}` : 'Connecting…'}
          </Text>
        </View>
        <Pressable onPress={onLogout} hitSlop={12}>
          <Text style={styles.logout}>Sign out</Text>
        </Pressable>
      </View>

      {/* Number display */}
      <View style={styles.display}>
        <Text
          numberOfLines={1}
          adjustsFontSizeToFit
          style={styles.number}
          onLongPress={clearAll}
        >
          {number || ' '}
        </Text>
      </View>

      {/* Keypad */}
      <View style={styles.pad}>
        {KEYS.map((k) => (
          <DialKey key={k.d} digit={k.d} letters={k.l} onPress={press} onLongPress={longPressZero} />
        ))}
      </View>

      {/* Call row: call button centered, backspace to the right */}
      <View style={styles.callRow}>
        <View style={styles.side} />
        <Pressable
          onPress={() => number && registered && onCall(number)}
          disabled={!number || !registered}
          style={[styles.callBtn, (!number || !registered) && styles.callBtnDisabled]}
        >
          <Text style={styles.callIcon}>📞</Text>
        </Pressable>
        <View style={styles.side}>
          {number.length > 0 && (
            <Pressable onPress={backspace} hitSlop={16} style={styles.backspace}>
              <Text style={styles.backspaceIcon}>⌫</Text>
            </Pressable>
          )}
        </View>
      </View>
    </SafeAreaView>
  );
}

const CALL = 74;
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bg },
  header: {
    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
    paddingHorizontal: spacing.lg, paddingVertical: spacing.md,
  },
  statusRow: { flexDirection: 'row', alignItems: 'center' },
  dot: { width: 8, height: 8, borderRadius: 4, marginRight: spacing.sm },
  statusText: { ...typography.label, color: colors.textSecondary },
  logout: { ...typography.label, color: colors.primary },

  display: { minHeight: 92, justifyContent: 'center', paddingHorizontal: spacing.lg },
  number: { fontSize: 42, fontWeight: '300', color: colors.text, textAlign: 'center', letterSpacing: 1 },

  pad: {
    flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly',
    paddingHorizontal: spacing.xl, gap: spacing.md, alignSelf: 'center', maxWidth: 340,
  },

  callRow: {
    flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
    paddingVertical: spacing.lg, marginTop: 'auto',
  },
  side: { width: 96, alignItems: 'center' },
  callBtn: {
    width: CALL, height: CALL, borderRadius: CALL / 2, backgroundColor: colors.answer,
    alignItems: 'center', justifyContent: 'center',
  },
  callBtnDisabled: { backgroundColor: colors.separator },
  callIcon: { fontSize: 32 },
  backspace: { padding: spacing.sm },
  backspaceIcon: { fontSize: 26, color: colors.textSecondary },
});