import { FC } from 'react';

const AppointmentScreen: FC = () => {
  const mockAppointments = [
    {
      id: 1,
      title: '商务会议翻译',
      date: '2024-01-20',
      time: '10:00-12:00',
      language: '中文 ⇄ 英文',
      status: '已确认',
      translator: '李译员'
    },
    {
      id: 2,
      title: '医疗咨询翻译',
      date: '2024-01-22',
      time: '14:00-15:00',
      language: '中文 ⇄ 西班牙文',
      status: '待确认',
      translator: '王译员'
    },
    {
      id: 3,
      title: '法律文件翻译',
      date: '2024-01-25',
      time: '09:00-11:00',
      language: '中文 ⇄ 法文',
      status: '已取消',
      translator: '张译员'
    },
  ];

  return (
    <div style={styles.container}>
      <div style={styles.content}>
        {/* 新建预约 */}
        <div style={styles.section}>
          <h3 style={styles.sectionTitle}>预约翻译服务</h3>
          <button style={styles.newAppointmentButton}>
            <span style={styles.buttonIcon}>➕</span>
            <span style={styles.buttonText}>新建预约</span>
          </button>
        </div>

        {/* 快速预约选项 */}
        <div style={styles.section}>
          <h3 style={styles.sectionTitle}>快速预约</h3>
          <div style={styles.quickOptions}>
            <button style={styles.quickOption}>
              <span style={styles.optionIcon}>🏢</span>
              <span style={styles.optionLabel}>商务会议</span>
            </button>
            <button style={styles.quickOption}>
              <span style={styles.optionIcon}>🏥</span>
              <span style={styles.optionLabel}>医疗咨询</span>
            </button>
            <button style={styles.quickOption}>
              <span style={styles.optionIcon}>⚖️</span>
              <span style={styles.optionLabel}>法律事务</span>
            </button>
            <button style={styles.quickOption}>
              <span style={styles.optionIcon}>🎓</span>
              <span style={styles.optionLabel}>学术交流</span>
            </button>
          </div>
        </div>

        {/* 我的预约 */}
        <div style={styles.section}>
          <h3 style={styles.sectionTitle}>我的预约</h3>
          <div style={styles.appointmentsList}>
            {mockAppointments.map((appointment) => (
              <div key={appointment.id} style={styles.appointmentItem}>
                <div style={styles.appointmentHeader}>
                  <h4 style={styles.appointmentTitle}>{appointment.title}</h4>
                  <div style={{
                    ...styles.appointmentStatus,
                    backgroundColor: 
                      appointment.status === '已确认' ? '#f6ffed' :
                      appointment.status === '待确认' ? '#fff7e6' : '#fff1f0',
                    color:
                      appointment.status === '已确认' ? '#52c41a' :
                      appointment.status === '待确认' ? '#fa8c16' : '#ff4d4f'
                  }}>
                    {appointment.status}
                  </div>
                </div>
                
                <div style={styles.appointmentDetails}>
                  <div style={styles.appointmentRow}>
                    <span style={styles.appointmentLabel}>📅 日期时间</span>
                    <span style={styles.appointmentValue}>
                      {appointment.date} {appointment.time}
                    </span>
                  </div>
                  
                  <div style={styles.appointmentRow}>
                    <span style={styles.appointmentLabel}>🌐 语言</span>
                    <span style={styles.appointmentValue}>
                      {appointment.language}
                    </span>
                  </div>
                  
                  <div style={styles.appointmentRow}>
                    <span style={styles.appointmentLabel}>👤 译员</span>
                    <span style={styles.appointmentValue}>
                      {appointment.translator}
                    </span>
                  </div>
                </div>

                <div style={styles.appointmentActions}>
                  <button style={styles.actionButton}>编辑</button>
                  <button style={{...styles.actionButton, backgroundColor: '#ff4d4f'}}>
                    取消
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 预约统计 */}
        <div style={styles.section}>
          <h3 style={styles.sectionTitle}>本月统计</h3>
          <div style={styles.statsContainer}>
            <div style={styles.statItem}>
              <span style={styles.statValue}>8</span>
              <span style={styles.statLabel}>总预约</span>
            </div>
            <div style={styles.statItem}>
              <span style={styles.statValue}>6</span>
              <span style={styles.statLabel}>已完成</span>
            </div>
            <div style={styles.statItem}>
              <span style={styles.statValue}>1</span>
              <span style={styles.statLabel}>待确认</span>
            </div>
            <div style={styles.statItem}>
              <span style={styles.statValue}>1</span>
              <span style={styles.statLabel}>已取消</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column' as const,
    height: '100%',
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
    padding: '16px',
    paddingBottom: '100px',
  },
  section: {
    marginBottom: '24px',
  },
  sectionTitle: {
    fontSize: '18px',
    fontWeight: 'bold',
    color: '#333',
    margin: '0 0 16px 0',
  },
  newAppointmentButton: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    padding: '16px',
    backgroundColor: '#1890ff',
    color: '#fff',
    border: 'none',
    borderRadius: '12px',
    cursor: 'pointer',
    fontSize: '16px',
    fontWeight: 'bold',
    boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)',
  },
  buttonIcon: {
    fontSize: '20px',
    marginRight: '8px',
  },
  buttonText: {
    fontSize: '16px',
  },
  quickOptions: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: '12px',
  },
  quickOption: {
    display: 'flex',
    flexDirection: 'column' as const,
    alignItems: 'center',
    padding: '20px',
    backgroundColor: '#fff',
    border: 'none',
    borderRadius: '12px',
    cursor: 'pointer',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
    transition: 'transform 0.2s ease',
  },
  optionIcon: {
    fontSize: '32px',
    marginBottom: '8px',
  },
  optionLabel: {
    fontSize: '14px',
    color: '#333',
    fontWeight: 'bold',
  },
  appointmentsList: {
    display: 'flex',
    flexDirection: 'column' as const,
    gap: '16px',
  },
  appointmentItem: {
    backgroundColor: '#fff',
    borderRadius: '12px',
    padding: '16px',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
  },
  appointmentHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '12px',
  },
  appointmentTitle: {
    fontSize: '16px',
    fontWeight: 'bold',
    color: '#333',
    margin: 0,
  },
  appointmentStatus: {
    padding: '4px 8px',
    borderRadius: '4px',
    fontSize: '12px',
    fontWeight: 'bold',
  },
  appointmentDetails: {
    marginBottom: '16px',
  },
  appointmentRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '8px',
  },
  appointmentLabel: {
    fontSize: '14px',
    color: '#666',
  },
  appointmentValue: {
    fontSize: '14px',
    color: '#333',
    fontWeight: 'bold',
  },
  appointmentActions: {
    display: 'flex',
    gap: '8px',
  },
  actionButton: {
    flex: 1,
    padding: '8px 16px',
    backgroundColor: '#1890ff',
    color: '#fff',
    border: 'none',
    borderRadius: '6px',
    cursor: 'pointer',
    fontSize: '14px',
    fontWeight: 'bold',
  },
  statsContainer: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: '12px',
  },
  statItem: {
    display: 'flex',
    flexDirection: 'column' as const,
    alignItems: 'center',
    padding: '16px 8px',
    backgroundColor: '#fff',
    borderRadius: '12px',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
  },
  statValue: {
    fontSize: '20px',
    fontWeight: 'bold',
    color: '#1890ff',
    marginBottom: '4px',
  },
  statLabel: {
    fontSize: '12px',
    color: '#666',
    textAlign: 'center' as const,
  },
};

export default AppointmentScreen;