import { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, Linking } from 'react-native';
import { useLocalSearchParams, router } from 'expo-router';
import { useQuery } from '@tanstack/react-query';
import { api } from '../../../services/api';

const TABS = ['Profile', 'Subscription', 'Invoices', 'Payments'];

export default function ClientDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const [tab, setTab] = useState('Profile');

  const { data: client, isLoading } = useQuery({
    queryKey: ['client', id],
    queryFn: () => api.get(`/api/v1/clients/${id}`).then(r => r.data),
  });

  if (isLoading) return <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>;

  return (
    <View className="flex-1 bg-gray-50">
      <View className="px-4 pt-14 pb-4 bg-primary flex-row items-center">
        <TouchableOpacity onPress={() => router.back()} className="mr-3">
          <Text className="text-white text-lg">←</Text>
        </TouchableOpacity>
        <View>
          <Text className="text-white font-bold text-lg">{client?.firstName} {client?.lastName}</Text>
          <Text className="text-white/70 text-sm">{client?.accountNumber}</Text>
        </View>
      </View>

      <View className="flex-row bg-white border-b border-gray-100">
        {TABS.map(t => (
          <TouchableOpacity key={t} onPress={() => setTab(t)} className={`flex-1 py-3 items-center border-b-2 ${tab === t ? 'border-primary' : 'border-transparent'}`}>
            <Text className={`text-sm font-medium ${tab === t ? 'text-primary' : 'text-gray-500'}`}>{t}</Text>
          </TouchableOpacity>
        ))}
      </View>

      <ScrollView className="flex-1 px-4 py-4">
        {tab === 'Profile' && (
          <View className="bg-white rounded-2xl border border-gray-100">
            {[
              { label: 'Account #', value: client?.accountNumber },
              { label: 'Status', value: client?.status },
              { label: 'Email', value: client?.email },
              { label: 'Phone', value: client?.phone, onPress: () => client?.phone && Linking.openURL(`tel:${client.phone}`) },
              { label: 'Address', value: client?.address },
              { label: 'Area', value: client?.area?.name },
            ].map((item, i) => (
              <TouchableOpacity
                key={item.label}
                disabled={!item.onPress}
                onPress={item.onPress}
                className={`px-4 py-3 ${i > 0 ? 'border-t border-gray-100' : ''}`}
              >
                <Text className="text-gray-500 text-xs">{item.label}</Text>
                <Text className={`font-medium mt-0.5 ${item.onPress ? 'text-primary' : 'text-gray-900'}`}>{item.value ?? '—'}</Text>
              </TouchableOpacity>
            ))}
          </View>
        )}
        {tab === 'Subscription' && <Text className="text-gray-500 text-center py-10">Subscription details coming soon</Text>}
        {tab === 'Invoices' && <Text className="text-gray-500 text-center py-10">Invoices coming soon</Text>}
        {tab === 'Payments' && <Text className="text-gray-500 text-center py-10">Payments coming soon</Text>}
      </ScrollView>
    </View>
  );
}