import { useState } from 'react';
import {
  ActivityIndicator,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useMessageData } from '../../src/hooks';
import type { Conversation, Interview, Notification } from '../../src/types';
import { colors } from '../../src/theme';

/** Tab 键 */
type TabKey = 'message' | 'notification' | 'interview';

/** Tab 配置 */
const TABS: { key: TabKey; label: string }[] = [
  { key: 'message', label: '消息' },
  { key: 'notification', label: '通知' },
  { key: 'interview', label: '面试' },
];

/** 会话卡片 */
function ConversationCard({ conversation }: { conversation: Conversation }) {
  return (
    <View style={styles.convCard}>
      <View style={styles.avatarWrap}>
        <View style={styles.avatar}>
          <Text style={styles.avatarText}>{conversation.avatar}</Text>
        </View>
        {conversation.unread && <View style={styles.unreadDot} />}
      </View>

      <View style={styles.convBody}>
        <Text style={styles.contactName}>{conversation.contactName}</Text>
        <Text style={styles.lastMessage} numberOfLines={1}>
          {conversation.lastMessage}
        </Text>
      </View>

      <View style={styles.convRight}>
        <Text style={styles.time}>{conversation.timestamp}</Text>
        {conversation.matched && (
          <View style={styles.matchedTag}>
            <Text style={styles.matchedText}>✓ 已匹配</Text>
          </View>
        )}
      </View>
    </View>
  );
}

/** 通知卡片 */
function NotificationCard({ notification }: { notification: Notification }) {
  return (
    <View style={styles.notiCard}>
      <View style={styles.notiTitleRow}>
        {!notification.read && <View style={styles.notiDot} />}
        <Text style={styles.notiTitle}>{notification.title}</Text>
      </View>
      <Text style={styles.notiContent} numberOfLines={2}>
        {notification.content}
      </Text>
      <Text style={styles.notiTime}>{notification.timestamp}</Text>
    </View>
  );
}

/** 面试卡片 */
function InterviewCard({ interview }: { interview: Interview }) {
  const isVideo = interview.type === 'video';
  return (
    <View style={styles.interviewCard}>
      <View style={styles.interviewHeader}>
        <Text style={styles.interviewTitle}>
          {interview.companyName}·{interview.positionName}
        </Text>
        <Text style={styles.interviewTime}>{interview.time}</Text>
      </View>

      <View style={styles.interviewFooter}>
        <View style={[styles.typeTag, isVideo ? styles.typeTagVideo : styles.typeTagOffline]}>
          <Text style={[styles.typeText, isVideo ? styles.typeTextVideo : styles.typeTextOffline]}>
            {isVideo ? '视频面试' : '线下面试'}
          </Text>
        </View>
        <Pressable
          style={styles.actionBtn}
          onPress={() => {
            console.log(isVideo ? '加入会议' : '导航前往', interview.id);
          }}
        >
          <Text style={styles.actionText}>{isVideo ? '加入会议' : '导航前往'}</Text>
        </Pressable>
      </View>
    </View>
  );
}

/**
 * 消息/沟通页
 */
export default function ChatScreen() {
  const [tab, setTab] = useState<TabKey>('message');
  const { conversations, notifications, interviews, matchResult, loading, error, refresh } =
    useMessageData();

  // 加载态
  if (loading) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <View style={styles.loading}>
          <ActivityIndicator size="large" color={colors.primary} />
        </View>
      </SafeAreaView>
    );
  }

  // 错误态
  if (error) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <View style={styles.loading}>
          <Text style={styles.stateText}>加载失败，请重试</Text>
          <Pressable style={styles.retryBtn} onPress={refresh}>
            <Text style={styles.retryText}>重试</Text>
          </Pressable>
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      {/* 顶部导航 */}
      <View style={styles.nav}>
        <Text style={styles.navTitle}>消息</Text>
      </View>

      {/* Tab 切换栏 */}
      <View style={styles.tabBar}>
        {TABS.map((item) => {
          const active = tab === item.key;
          return (
            <Pressable key={item.key} style={styles.tabItem} onPress={() => setTab(item.key)}>
              <Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{item.label}</Text>
              <View style={[styles.tabIndicator, active && styles.tabIndicatorActive]} />
            </Pressable>
          );
        })}
      </View>

      {/* 内容区 */}
      <ScrollView
        style={styles.scroll}
        contentContainerStyle={styles.content}
        showsVerticalScrollIndicator={false}
      >
        {tab === 'message' && (
          <>
            {/* 双向匹配成功横幅 */}
            {matchResult && (
              <Pressable
                style={styles.matchBanner}
                onPress={() => {
                  console.log('查看匹配详情', matchResult.companies);
                }}
              >
                <Text style={styles.matchBannerTitle}>
                  恭喜！您与{matchResult.total}家企业双向匹配成功
                </Text>
                <Text style={styles.matchBannerLink}>点击查看详情</Text>
              </Pressable>
            )}

            {/* 会话列表 */}
            {conversations.length === 0 ? (
              <Text style={styles.emptyText}>暂无消息</Text>
            ) : (
              conversations.map((conversation) => (
                <ConversationCard key={conversation.id} conversation={conversation} />
              ))
            )}
          </>
        )}

        {tab === 'notification' && (
          <>
            {/* Offer 待处理横幅 */}
            <Pressable
              style={styles.offerBanner}
              onPress={() => {
                console.log('查看 Offer 列表');
              }}
            >
              <Text style={styles.offerTitle}>您有2个Offer待处理</Text>
              <Text style={styles.offerLink}>立即查看 &gt;</Text>
            </Pressable>

            {/* 系统通知列表 */}
            {notifications.length === 0 ? (
              <Text style={styles.emptyText}>暂无通知</Text>
            ) : (
              notifications.map((notification) => (
                <NotificationCard key={notification.id} notification={notification} />
              ))
            )}
          </>
        )}

        {tab === 'interview' && (
          <>
            {/* 面试日程标题 */}
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>今日面试</Text>
              <Pressable
                onPress={() => {
                  console.log('查看全部日程');
                }}
              >
                <Text style={styles.sectionLink}>全部日程 &gt;</Text>
              </Pressable>
            </View>

            {/* 面试卡片 */}
            {interviews.length === 0 ? (
              <Text style={styles.emptyText}>暂无面试</Text>
            ) : (
              interviews.map((interview) => (
                <InterviewCard key={interview.id} interview={interview} />
              ))
            )}
          </>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: colors.pageBg,
  },
  loading: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  stateText: {
    marginTop: 12,
    fontSize: 14,
    color: colors.textSecondary,
  },
  retryBtn: {
    marginTop: 16,
    paddingHorizontal: 24,
    paddingVertical: 8,
    borderRadius: 18,
    backgroundColor: colors.primaryBtn,
  },
  retryText: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.white,
  },
  emptyText: {
    paddingVertical: 24,
    fontSize: 14,
    color: colors.textSecondary,
    textAlign: 'center',
  },
  nav: {
    paddingHorizontal: 20,
    paddingTop: 8,
    paddingBottom: 12,
  },
  navTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  tabBar: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: colors.border,
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    paddingTop: 4,
  },
  tabLabel: {
    fontSize: 15,
    color: colors.textSecondary,
    paddingBottom: 8,
  },
  tabLabelActive: {
    color: colors.textPrimary,
    fontWeight: '600',
  },
  tabIndicator: {
    height: 2,
    width: 24,
    borderRadius: 1,
    backgroundColor: 'transparent',
    marginBottom: -1,
  },
  tabIndicatorActive: {
    backgroundColor: colors.primary,
  },
  scroll: {
    flex: 1,
  },
  content: {
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 24,
  },
  // 匹配横幅
  matchBanner: {
    backgroundColor: colors.primaryLight,
    borderRadius: 16,
    padding: 16,
    marginBottom: 16,
  },
  matchBannerTitle: {
    fontSize: 15,
    fontWeight: '700',
    color: colors.primaryDark,
  },
  matchBannerLink: {
    marginTop: 6,
    fontSize: 13,
    color: colors.primary,
  },
  // 会话卡片
  convCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
  },
  avatarWrap: {
    position: 'relative',
  },
  avatar: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: colors.primaryLight,
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarText: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.primary,
  },
  unreadDot: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: colors.danger,
    borderWidth: 1.5,
    borderColor: colors.white,
  },
  convBody: {
    flex: 1,
    marginLeft: 12,
  },
  contactName: {
    fontSize: 15,
    fontWeight: '600',
    color: colors.textPrimary,
  },
  lastMessage: {
    marginTop: 4,
    fontSize: 13,
    color: colors.textSecondary,
  },
  convRight: {
    alignItems: 'flex-end',
    marginLeft: 8,
  },
  time: {
    fontSize: 12,
    color: colors.textSecondary,
  },
  matchedTag: {
    marginTop: 6,
    backgroundColor: colors.primaryLight,
    borderRadius: 8,
    paddingHorizontal: 6,
    paddingVertical: 2,
  },
  matchedText: {
    fontSize: 11,
    color: colors.primaryDark,
  },
  // Offer 横幅
  offerBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.actionLight,
    borderRadius: 16,
    padding: 16,
    marginBottom: 16,
  },
  offerTitle: {
    flex: 1,
    fontSize: 15,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  offerLink: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.action,
  },
  // 通知卡片
  notiCard: {
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
  },
  notiTitleRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  notiDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: colors.danger,
    marginRight: 6,
  },
  notiTitle: {
    fontSize: 15,
    fontWeight: '600',
    color: colors.textPrimary,
  },
  notiContent: {
    marginTop: 6,
    fontSize: 13,
    lineHeight: 18,
    color: colors.textSecondary,
  },
  notiTime: {
    marginTop: 8,
    fontSize: 12,
    color: colors.textSecondary,
  },
  // 面试
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  sectionLink: {
    fontSize: 13,
    color: colors.primary,
  },
  interviewCard: {
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
  },
  interviewHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  interviewTitle: {
    flex: 1,
    fontSize: 15,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  interviewTime: {
    marginLeft: 8,
    fontSize: 16,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  interviewFooter: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 12,
  },
  typeTag: {
    borderRadius: 8,
    paddingHorizontal: 8,
    paddingVertical: 3,
  },
  typeTagVideo: {
    backgroundColor: colors.primaryLight,
  },
  typeTagOffline: {
    backgroundColor: colors.border,
  },
  typeText: {
    fontSize: 12,
    fontWeight: '600',
  },
  typeTextVideo: {
    color: colors.primary,
  },
  typeTextOffline: {
    color: colors.textSecondary,
  },
  actionBtn: {
    backgroundColor: colors.primaryBtn,
    borderRadius: 18,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  actionText: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.white,
  },
});