import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Card,
  Descriptions,
  Button,
  Tag,
  Typography,
  Space,
  Modal,
  Input,
  message,
  Spin,
  Timeline,
  Tabs,
  Avatar,
  Progress,
  Select,
  Form,
  Switch,
  Divider,
  Alert,
  Table,
  Rate,
  Statistic,
  Row,
  Col,
} from 'antd';
import {
  ArrowLeftOutlined,
  PlayCircleOutlined,
  PauseCircleOutlined,
  DownloadOutlined,
  StarOutlined,
  PhoneOutlined,
  ClockCircleOutlined,
  DollarOutlined,
  UserOutlined,
  SoundOutlined,
  FileTextOutlined,
  TranslationOutlined,
  EditOutlined,
  DeleteOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  AuditOutlined,
  SettingOutlined,
  MessageOutlined,
} from '@ant-design/icons';
import { TranslationCall } from '../../types';
import { database } from '../../utils/database';
import { api } from '../../utils/api';

const { Title, Text, Paragraph } = Typography;
const { TextArea } = Input;
const { TabPane } = Tabs;
const { Option } = Select;

interface CallDetailProps {}

const CallDetail: React.FC<CallDetailProps> = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  
  const [call, setCall] = useState<TranslationCall | null>(null);
  const [loading, setLoading] = useState(true);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [statusModalVisible, setStatusModalVisible] = useState(false);
  const [refundModalVisible, setRefundModalVisible] = useState(false);
  const [adminNoteModalVisible, setAdminNoteModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [statusForm] = Form.useForm();
  const [refundForm] = Form.useForm();
  const [noteForm] = Form.useForm();

  // 模拟音频播放状态
  const [audioProgress, setAudioProgress] = useState(0);

  useEffect(() => {
    if (id) {
      loadCallDetails();
    }
  }, [id]);

  const loadCallDetails = async () => {
    try {
      setLoading(true);
      await database.connect();
      
      // 模拟获取通话详情（管理员视角）
      const mockCall: TranslationCall = {
        id: id!,
        userId: 'user_1',
        callId: `CA${Date.now()}`,
        clientName: '张先生',
        clientPhone: '+86 138 0013 8000',
        type: 'human',
        status: 'completed',
        sourceLanguage: 'zh-CN',
        targetLanguage: 'en-US',
        startTime: '2024-01-15T10:30:00Z',
        endTime: '2024-01-15T10:45:00Z',
        duration: 900,
        cost: 45.00,
        rating: 5,
        feedback: '翻译非常专业，沟通顺畅，非常满意！',
        translatorId: 'translator_1',
        translatorName: '李翻译',
        translatorPhone: '+86 138 0013 8001',
        recordingUrl: '/recordings/call_123456.mp3',
        transcription: '用户: 您好，我想了解一下贵公司的产品服务。\n翻译: Hello, I would like to learn about your company\'s products and services.\n客户: Thank you for your interest. Let me introduce our main products...\n翻译: 感谢您的关注。让我为您介绍我们的主要产品...',
        translation: '这是一次关于产品咨询的商务通话，客户询问了公司的主要产品和服务，我们提供了详细的介绍和说明。',
        // 管理员相关字段
        adminNotes: '通话质量良好，客户满意度高',
        paymentStatus: 'paid',
        refundAmount: 0,
        qualityScore: 95,
        issues: [],
      };

      setCall(mockCall);
      setDuration(mockCall.duration || 0);
      
      // 填充表单数据
      form.setFieldsValue({
        clientName: mockCall.clientName,
        clientPhone: mockCall.clientPhone,
        translatorName: mockCall.translatorName,
        cost: mockCall.cost,
      });
      
      statusForm.setFieldsValue({
        status: mockCall.status,
      });
      
    } catch (error) {
      console.error('加载通话详情失败:', error);
      message.error('加载通话详情失败');
    } finally {
      setLoading(false);
    }
  };

  const handlePlayPause = () => {
    setIsPlaying(!isPlaying);
    
    if (!isPlaying) {
      // 模拟音频播放
      const interval = setInterval(() => {
        setCurrentTime(prev => {
          const newTime = prev + 1;
          setAudioProgress((newTime / duration) * 100);
          
          if (newTime >= duration) {
            clearInterval(interval);
            setIsPlaying(false);
            setCurrentTime(0);
            setAudioProgress(0);
          }
          
          return newTime;
        });
      }, 1000);
    }
  };

  const handleEdit = async (values: any) => {
    if (!call) return;
    
    try {
      const updatedCall = {
        ...call,
        ...values,
        updatedAt: new Date().toISOString(),
      };
      
      setCall(updatedCall);
      setEditModalVisible(false);
      message.success('通话信息更新成功');
    } catch (error) {
      message.error('更新通话信息失败');
    }
  };

  const handleStatusChange = async (values: any) => {
    if (!call) return;
    
    try {
      const updatedCall = {
        ...call,
        status: values.status,
        updatedAt: new Date().toISOString(),
      };
      
      setCall(updatedCall);
      setStatusModalVisible(false);
      message.success('状态更新成功');
    } catch (error) {
      message.error('更新状态失败');
    }
  };

  const handleRefund = async (values: any) => {
    if (!call) return;
    
    try {
      const refundAmount = values.amount || call.cost;
      
      // 模拟退款API调用
      await api.refundPayment(`payment_${call.id}`, refundAmount);
      
      const updatedCall = {
        ...call,
        refundAmount: refundAmount,
        paymentStatus: 'refunded' as const,
        updatedAt: new Date().toISOString(),
      };
      
      setCall(updatedCall);
      setRefundModalVisible(false);
      message.success('退款处理成功');
    } catch (error) {
      message.error('退款处理失败');
    }
  };

  const handleAddAdminNote = async (values: any) => {
    if (!call) return;
    
    try {
      const updatedCall = {
        ...call,
        adminNotes: values.note,
        updatedAt: new Date().toISOString(),
      };
      
      setCall(updatedCall);
      setAdminNoteModalVisible(false);
      message.success('管理员备注添加成功');
    } catch (error) {
      message.error('添加备注失败');
    }
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  const getStatusColor = (status: string) => {
    const colors = {
      pending: 'orange',
      active: 'blue',
      completed: 'green',
      cancelled: 'red',
      refunded: 'purple',
    };
    return colors[status as keyof typeof colors] || 'default';
  };

  const getStatusText = (status: string) => {
    const texts = {
      pending: '等待中',
      active: '通话中',
      completed: '已完成',
      cancelled: '已取消',
      refunded: '已退款',
    };
    return texts[status as keyof typeof texts] || status;
  };

  const getPaymentStatusColor = (status: string) => {
    const colors = {
      pending: 'orange',
      paid: 'green',
      refunded: 'purple',
      failed: 'red',
    };
    return colors[status as keyof typeof colors] || 'default';
  };

  const getPaymentStatusText = (status: string) => {
    const texts = {
      pending: '待支付',
      paid: '已支付',
      refunded: '已退款',
      failed: '支付失败',
    };
    return texts[status as keyof typeof texts] || status;
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />
        <div style={{ marginTop: '16px' }}>加载通话详情...</div>
      </div>
    );
  }

  if (!call) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <div>通话记录不存在</div>
        <Button type="primary" onClick={() => navigate('/calls')} style={{ marginTop: '16px' }}>
          返回通话列表
        </Button>
      </div>
    );
  }

  return (
    <div style={{ padding: '24px' }}>
      {/* 头部导航 */}
      <div style={{ marginBottom: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Button
            icon={<ArrowLeftOutlined />}
            onClick={() => navigate('/calls')}
            style={{ marginRight: '16px' }}
          >
            返回
          </Button>
          <Title level={2} style={{ display: 'inline-block', margin: 0 }}>
            通话详情 #{call.id}
          </Title>
        </div>
        
        {/* 管理员操作按钮 */}
        <Space>
          <Button
            icon={<EditOutlined />}
            onClick={() => setEditModalVisible(true)}
          >
            编辑信息
          </Button>
          <Button
            icon={<SettingOutlined />}
            onClick={() => setStatusModalVisible(true)}
          >
            更改状态
          </Button>
          <Button
            icon={<DollarOutlined />}
            onClick={() => setRefundModalVisible(true)}
            disabled={call.paymentStatus !== 'paid'}
          >
            处理退款
          </Button>
          <Button
            icon={<MessageOutlined />}
            onClick={() => setAdminNoteModalVisible(true)}
          >
            添加备注
          </Button>
        </Space>
      </div>

      {/* 系统状态提醒 */}
      {call.issues && call.issues.length > 0 && (
        <Alert
          message="系统检测到问题"
          description={call.issues.join(', ')}
          type="warning"
          showIcon
          style={{ marginBottom: '24px' }}
        />
      )}

      {/* 基本信息卡片 */}
      <Card title="通话信息" style={{ marginBottom: '24px' }}>
        <Descriptions column={3} bordered>
          <Descriptions.Item label="通话ID" span={1}>
            {call.callId}
          </Descriptions.Item>
          <Descriptions.Item label="状态" span={1}>
            <Tag color={getStatusColor(call.status)}>
              {getStatusText(call.status)}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="支付状态" span={1}>
            <Tag color={getPaymentStatusColor(call.paymentStatus)}>
              {getPaymentStatusText(call.paymentStatus)}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="客户姓名" span={1}>
            <Space>
              <UserOutlined />
              {call.clientName}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="客户电话" span={1}>
            <Space>
              <PhoneOutlined />
              {call.clientPhone}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="译员" span={1}>
            <Space>
              <Avatar size="small" icon={<UserOutlined />} />
              {call.translatorName}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="开始时间" span={1}>
            <Space>
              <ClockCircleOutlined />
              {new Date(call.startTime).toLocaleString()}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="结束时间" span={1}>
            <Space>
              <ClockCircleOutlined />
              {call.endTime ? new Date(call.endTime).toLocaleString() : '-'}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="通话时长" span={1}>
            <Space>
              <PhoneOutlined />
              {formatTime(call.duration || 0)}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="费用" span={1}>
            <Space>
              <DollarOutlined />
              <Text strong>¥{call.cost.toFixed(2)}</Text>
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="退款金额" span={1}>
            <Space>
              <DollarOutlined />
              <Text type={call.refundAmount > 0 ? 'danger' : 'secondary'}>
                ¥{call.refundAmount.toFixed(2)}
              </Text>
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="质量评分" span={1}>
            <Space>
              <AuditOutlined />
              <Text strong style={{ color: call.qualityScore >= 90 ? '#52c41a' : call.qualityScore >= 70 ? '#faad14' : '#ff4d4f' }}>
                {call.qualityScore}/100
              </Text>
            </Space>
          </Descriptions.Item>
        </Descriptions>
        
        {call.adminNotes && (
          <div style={{ marginTop: '16px' }}>
            <Text strong>管理员备注：</Text>
            <Paragraph style={{ marginTop: '8px', background: '#f6f6f6', padding: '12px', borderRadius: '6px' }}>
              {call.adminNotes}
            </Paragraph>
          </div>
        )}
      </Card>

      {/* 录音播放器 */}
      {call.recordingUrl && (
        <Card 
          title={
            <Space>
              <SoundOutlined />
              录音播放
            </Space>
          }
          style={{ marginBottom: '24px' }}
        >
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <div style={{ marginBottom: '20px' }}>
              <Button
                type="primary"
                size="large"
                icon={isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
                onClick={handlePlayPause}
                style={{ marginRight: '16px' }}
              >
                {isPlaying ? '暂停' : '播放'}
              </Button>
              <Button
                icon={<DownloadOutlined />}
                onClick={() => message.success('录音下载中...')}
              >
                下载录音
              </Button>
            </div>
            
            <div style={{ margin: '20px 0' }}>
              <Progress
                percent={audioProgress}
                showInfo={false}
                strokeColor="#1890ff"
              />
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '8px' }}>
                <Text type="secondary">{formatTime(currentTime)}</Text>
                <Text type="secondary">{formatTime(duration)}</Text>
              </div>
            </div>
          </div>
        </Card>
      )}

      {/* 详细内容标签页 */}
      <Card>
        <Tabs defaultActiveKey="transcription">
          <TabPane
            tab={
              <Space>
                <FileTextOutlined />
                转录内容
              </Space>
            }
            key="transcription"
          >
            <div style={{ minHeight: '200px' }}>
              {call.transcription ? (
                <Paragraph>
                  <pre style={{ whiteSpace: 'pre-wrap', fontFamily: 'inherit' }}>
                    {call.transcription}
                  </pre>
                </Paragraph>
              ) : (
                <div style={{ textAlign: 'center', color: '#999', padding: '50px' }}>
                  暂无转录内容
                </div>
              )}
            </div>
          </TabPane>
          
          <TabPane
            tab={
              <Space>
                <TranslationOutlined />
                翻译摘要
              </Space>
            }
            key="translation"
          >
            <div style={{ minHeight: '200px' }}>
              {call.translation ? (
                <Paragraph>{call.translation}</Paragraph>
              ) : (
                <div style={{ textAlign: 'center', color: '#999', padding: '50px' }}>
                  暂无翻译摘要
                </div>
              )}
            </div>
          </TabPane>
          
          <TabPane
            tab={
              <Space>
                <StarOutlined />
                用户评价
              </Space>
            }
            key="rating"
          >
            <div style={{ minHeight: '200px', padding: '20px' }}>
              <div style={{ marginBottom: '20px' }}>
                <Text strong>服务评分：</Text>
                <Rate disabled value={call.rating} style={{ marginLeft: '8px' }} />
                {call.rating && (
                  <Text style={{ marginLeft: '8px' }}>
                    ({call.rating}/5 分)
                  </Text>
                )}
              </div>
              
              {call.feedback && (
                <div>
                  <Text strong>用户反馈：</Text>
                  <Paragraph style={{ marginTop: '8px' }}>
                    {call.feedback}
                  </Paragraph>
                </div>
              )}
            </div>
          </TabPane>
          
          <TabPane
            tab={
              <Space>
                <AuditOutlined />
                质量分析
              </Space>
            }
            key="quality"
          >
            <div style={{ padding: '20px' }}>
              <Descriptions column={2}>
                <Descriptions.Item label="质量评分">
                  <Progress
                    type="circle"
                    percent={call.qualityScore}
                    width={80}
                    strokeColor={call.qualityScore >= 90 ? '#52c41a' : call.qualityScore >= 70 ? '#faad14' : '#ff4d4f'}
                  />
                </Descriptions.Item>
                <Descriptions.Item label="系统检测">
                  {call.issues && call.issues.length > 0 ? (
                    <div>
                      {call.issues.map((issue, index) => (
                        <Tag key={index} color="red" style={{ marginBottom: '4px' }}>
                          {issue}
                        </Tag>
                      ))}
                    </div>
                  ) : (
                    <Tag color="green">无异常</Tag>
                  )}
                </Descriptions.Item>
              </Descriptions>
            </div>
          </TabPane>
        </Tabs>
      </Card>

      {/* 编辑信息弹窗 */}
      <Modal
        title="编辑通话信息"
        visible={editModalVisible}
        onCancel={() => setEditModalVisible(false)}
        footer={null}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleEdit}
        >
          <Form.Item
            name="clientName"
            label="客户姓名"
            rules={[{ required: true, message: '请输入客户姓名' }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="clientPhone"
            label="客户电话"
            rules={[{ required: true, message: '请输入客户电话' }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="translatorName"
            label="译员姓名"
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="cost"
            label="费用"
            rules={[{ required: true, message: '请输入费用' }]}
          >
            <Input type="number" addonAfter="元" />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setEditModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 更改状态弹窗 */}
      <Modal
        title="更改通话状态"
        visible={statusModalVisible}
        onCancel={() => setStatusModalVisible(false)}
        footer={null}
      >
        <Form
          form={statusForm}
          layout="vertical"
          onFinish={handleStatusChange}
        >
          <Form.Item
            name="status"
            label="新状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select>
              <Option value="pending">等待中</Option>
              <Option value="active">通话中</Option>
              <Option value="completed">已完成</Option>
              <Option value="cancelled">已取消</Option>
            </Select>
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setStatusModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                更新状态
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 退款处理弹窗 */}
      <Modal
        title="处理退款"
        visible={refundModalVisible}
        onCancel={() => setRefundModalVisible(false)}
        footer={null}
      >
        <Form
          form={refundForm}
          layout="vertical"
          onFinish={handleRefund}
          initialValues={{ amount: call.cost }}
        >
          <Alert
            message="退款提醒"
            description={`原支付金额：¥${call.cost.toFixed(2)}`}
            type="info"
            style={{ marginBottom: '16px' }}
          />
          
          <Form.Item
            name="amount"
            label="退款金额"
            rules={[
              { required: true, message: '请输入退款金额' },
              { type: 'number', min: 0, max: call.cost, message: `退款金额不能超过¥${call.cost.toFixed(2)}` }
            ]}
          >
            <Input type="number" addonAfter="元" />
          </Form.Item>
          
          <Form.Item
            name="reason"
            label="退款原因"
            rules={[{ required: true, message: '请输入退款原因' }]}
          >
            <TextArea rows={3} placeholder="请输入退款原因..." />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setRefundModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" danger htmlType="submit">
                确认退款
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 添加管理员备注弹窗 */}
      <Modal
        title="添加管理员备注"
        visible={adminNoteModalVisible}
        onCancel={() => setAdminNoteModalVisible(false)}
        footer={null}
      >
        <Form
          form={noteForm}
          layout="vertical"
          onFinish={handleAddAdminNote}
          initialValues={{ note: call.adminNotes }}
        >
          <Form.Item
            name="note"
            label="备注内容"
            rules={[{ required: true, message: '请输入备注内容' }]}
          >
            <TextArea rows={4} placeholder="请输入管理员备注..." />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setAdminNoteModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                保存备注
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default CallDetail;