import React, { useState } from 'react';
import {
  Table,
  Card,
  Typography,
  Space,
  Tag,
  DatePicker,
  Select,
  Input,
  Button,
  Row,
  Col,
  Alert,
  Timeline,
} from 'antd';
import {
  AuditOutlined,
  SearchOutlined,
  FilterOutlined,
  UserOutlined,
  AppstoreOutlined,
  KeyOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

const { Title, Text } = Typography;
const { RangePicker } = DatePicker;
const { Option } = Select;

interface AuditLogEntry {
  id: string;
  timestamp: string;
  user_id: string;
  action: string;
  resource_type: string;
  resource_id: string;
  status: 'success' | 'failure' | 'warning';
  ip_address: string;
  user_agent: string;
  details: Record<string, any>;
}

// Mock audit data for demonstration
const mockAuditData: AuditLogEntry[] = [
  {
    id: '1',
    timestamp: dayjs().subtract(1, 'hour').toISOString(),
    user_id: 'admin@example.com',
    action: 'CREATE_APPLICATION',
    resource_type: 'application',
    resource_id: 'com.example.newapp',
    status: 'success',
    ip_address: '192.168.1.100',
    user_agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
    details: {
      app_link: 'https://newapp.example.com',
      owner: 'Development Team'
    }
  },
  {
    id: '2',
    timestamp: dayjs().subtract(2, 'hours').toISOString(),
    user_id: 'user@example.com',
    action: 'CREATE_TOKEN',
    resource_type: 'token',
    resource_id: 'token-abc123',
    status: 'success',
    ip_address: '192.168.1.101',
    user_agent: 'curl/7.68.0',
    details: {
      app_id: 'com.example.app',
      permissions: ['repo.read', 'repo.write']
    }
  },
  {
    id: '3',
    timestamp: dayjs().subtract(3, 'hours').toISOString(),
    user_id: 'admin@example.com',
    action: 'DELETE_TOKEN',
    resource_type: 'token',
    resource_id: 'token-xyz789',
    status: 'success',
    ip_address: '192.168.1.100',
    user_agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
    details: {
      app_id: 'com.example.oldapp',
      reason: 'Token compromised'
    }
  },
  {
    id: '4',
    timestamp: dayjs().subtract(4, 'hours').toISOString(),
    user_id: 'user@example.com',
    action: 'VERIFY_TOKEN',
    resource_type: 'token',
    resource_id: 'token-def456',
    status: 'failure',
    ip_address: '192.168.1.102',
    user_agent: 'PostmanRuntime/7.28.4',
    details: {
      app_id: 'com.example.app',
      error: 'Token expired'
    }
  },
  {
    id: '5',
    timestamp: dayjs().subtract(6, 'hours').toISOString(),
    user_id: 'admin@example.com',
    action: 'UPDATE_APPLICATION',
    resource_type: 'application',
    resource_id: 'com.example.app',
    status: 'success',
    ip_address: '192.168.1.100',
    user_agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
    details: {
      changes: {
        callback_url: 'https://updated.example.com/callback'
      }
    }
  },
];

const Audit: React.FC = () => {
  const [auditData, setAuditData] = useState<AuditLogEntry[]>(mockAuditData);
  const [filteredData, setFilteredData] = useState<AuditLogEntry[]>(mockAuditData);
  const [loading, setLoading] = useState(false);
  const [filters, setFilters] = useState({
    dateRange: null as any,
    action: '',
    status: '',
    user: '',
    resourceType: '',
  });

  const applyFilters = () => {
    let filtered = [...auditData];

    if (filters.dateRange && filters.dateRange.length === 2) {
      const [start, end] = filters.dateRange;
      filtered = filtered.filter(entry => {
        const entryDate = dayjs(entry.timestamp);
        return entryDate.isAfter(start) && entryDate.isBefore(end);
      });
    }

    if (filters.action) {
      filtered = filtered.filter(entry => entry.action === filters.action);
    }

    if (filters.status) {
      filtered = filtered.filter(entry => entry.status === filters.status);
    }

    if (filters.user) {
      filtered = filtered.filter(entry => 
        entry.user_id.toLowerCase().includes(filters.user.toLowerCase())
      );
    }

    if (filters.resourceType) {
      filtered = filtered.filter(entry => entry.resource_type === filters.resourceType);
    }

    setFilteredData(filtered);
  };

  const clearFilters = () => {
    setFilters({
      dateRange: null,
      action: '',
      status: '',
      user: '',
      resourceType: '',
    });
    setFilteredData(auditData);
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'success':
        return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
      case 'failure':
        return <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />;
      case 'warning':
        return <ExclamationCircleOutlined style={{ color: '#faad14' }} />;
      default:
        return <ClockCircleOutlined style={{ color: '#1890ff' }} />;
    }
  };

  const getActionIcon = (action: string) => {
    if (action.includes('APPLICATION')) return <AppstoreOutlined />;
    if (action.includes('TOKEN')) return <KeyOutlined />;
    if (action.includes('USER')) return <UserOutlined />;
    return <AuditOutlined />;
  };

  const columns = [
    {
      title: 'Timestamp',
      dataIndex: 'timestamp',
      key: 'timestamp',
      render: (timestamp: string) => (
        <div>
          <div>{dayjs(timestamp).format('MMM DD, YYYY')}</div>
          <Text type="secondary" style={{ fontSize: '12px' }}>
            {dayjs(timestamp).format('HH:mm:ss')}
          </Text>
        </div>
      ),
      sorter: (a: AuditLogEntry, b: AuditLogEntry) => 
        dayjs(a.timestamp).unix() - dayjs(b.timestamp).unix(),
      defaultSortOrder: 'descend' as const,
    },
    {
      title: 'User',
      dataIndex: 'user_id',
      key: 'user_id',
      render: (userId: string) => (
        <div>
          <UserOutlined style={{ marginRight: '8px' }} />
          {userId}
        </div>
      ),
    },
    {
      title: 'Action',
      dataIndex: 'action',
      key: 'action',
      render: (action: string) => (
        <div>
          {getActionIcon(action)}
          <span style={{ marginLeft: '8px' }}>{action.replace(/_/g, ' ')}</span>
        </div>
      ),
    },
    {
      title: 'Resource',
      key: 'resource',
      render: (_: any, record: AuditLogEntry) => (
        <div>
          <div>
            <Tag color="blue">{record.resource_type.toUpperCase()}</Tag>
          </div>
          <Text type="secondary" style={{ fontSize: '12px' }}>
            {record.resource_id}
          </Text>
        </div>
      ),
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag 
          color={status === 'success' ? 'green' : status === 'failure' ? 'red' : 'orange'}
          icon={getStatusIcon(status)}
        >
          {status.toUpperCase()}
        </Tag>
      ),
    },
    {
      title: 'IP Address',
      dataIndex: 'ip_address',
      key: 'ip_address',
      render: (ip: string) => <Text code>{ip}</Text>,
    },
  ];

  const expandedRowRender = (record: AuditLogEntry) => (
    <Card size="small" title="Event Details">
      <Row gutter={16}>
        <Col span={12}>
          <Space direction="vertical" size="small">
            <div>
              <Text strong>User Agent:</Text>
              <div style={{ wordBreak: 'break-all' }}>
                <Text type="secondary">{record.user_agent}</Text>
              </div>
            </div>
            <div>
              <Text strong>Event ID:</Text>
              <div><Text code>{record.id}</Text></div>
            </div>
          </Space>
        </Col>
        <Col span={12}>
          <div>
            <Text strong>Additional Details:</Text>
            <pre style={{ 
              background: '#f5f5f5', 
              padding: '8px', 
              borderRadius: '4px',
              fontSize: '12px',
              marginTop: '8px'
            }}>
              {JSON.stringify(record.details, null, 2)}
            </pre>
          </div>
        </Col>
      </Row>
    </Card>
  );

  return (
    <div>
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        <div>
          <Title level={2}>Audit Log</Title>
          <Text type="secondary">
            Monitor and track all system activities and security events
          </Text>
        </div>

        {/* Statistics Cards */}
        <Row gutter={16}>
          <Col span={6}>
            <Card>
              <div style={{ textAlign: 'center' }}>
                <AuditOutlined style={{ fontSize: '32px', color: '#1890ff', marginBottom: '8px' }} />
                <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{filteredData.length}</div>
                <div>Total Events</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <div style={{ textAlign: 'center' }}>
                <CheckCircleOutlined style={{ fontSize: '32px', color: '#52c41a', marginBottom: '8px' }} />
                <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
                  {filteredData.filter(e => e.status === 'success').length}
                </div>
                <div>Successful</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <div style={{ textAlign: 'center' }}>
                <ExclamationCircleOutlined style={{ fontSize: '32px', color: '#ff4d4f', marginBottom: '8px' }} />
                <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
                  {filteredData.filter(e => e.status === 'failure').length}
                </div>
                <div>Failed</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <div style={{ textAlign: 'center' }}>
                <UserOutlined style={{ fontSize: '32px', color: '#722ed1', marginBottom: '8px' }} />
                <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
                  {new Set(filteredData.map(e => e.user_id)).size}
                </div>
                <div>Unique Users</div>
              </div>
            </Card>
          </Col>
        </Row>

        {/* Filters */}
        <Card title="Filters" extra={
          <Space>
            <Button onClick={applyFilters} type="primary" icon={<SearchOutlined />}>
              Apply Filters
            </Button>
            <Button onClick={clearFilters} icon={<DeleteOutlined />}>
              Clear
            </Button>
          </Space>
        }>
          <Row gutter={16}>
            <Col span={6}>
              <div style={{ marginBottom: '8px' }}>
                <Text strong>Date Range:</Text>
              </div>
              <RangePicker
                style={{ width: '100%' }}
                value={filters.dateRange}
                onChange={(dates) => setFilters({ ...filters, dateRange: dates })}
              />
            </Col>
            <Col span={4}>
              <div style={{ marginBottom: '8px' }}>
                <Text strong>Action:</Text>
              </div>
              <Select
                style={{ width: '100%' }}
                placeholder="All actions"
                value={filters.action}
                onChange={(value) => setFilters({ ...filters, action: value })}
                allowClear
              >
                <Option value="CREATE_APPLICATION">Create Application</Option>
                <Option value="UPDATE_APPLICATION">Update Application</Option>
                <Option value="DELETE_APPLICATION">Delete Application</Option>
                <Option value="CREATE_TOKEN">Create Token</Option>
                <Option value="DELETE_TOKEN">Delete Token</Option>
                <Option value="VERIFY_TOKEN">Verify Token</Option>
              </Select>
            </Col>
            <Col span={4}>
              <div style={{ marginBottom: '8px' }}>
                <Text strong>Status:</Text>
              </div>
              <Select
                style={{ width: '100%' }}
                placeholder="All statuses"
                value={filters.status}
                onChange={(value) => setFilters({ ...filters, status: value })}
                allowClear
              >
                <Option value="success">Success</Option>
                <Option value="failure">Failure</Option>
                <Option value="warning">Warning</Option>
              </Select>
            </Col>
            <Col span={5}>
              <div style={{ marginBottom: '8px' }}>
                <Text strong>User:</Text>
              </div>
              <Input
                placeholder="Search by user"
                value={filters.user}
                onChange={(e) => setFilters({ ...filters, user: e.target.value })}
                allowClear
              />
            </Col>
            <Col span={5}>
              <div style={{ marginBottom: '8px' }}>
                <Text strong>Resource Type:</Text>
              </div>
              <Select
                style={{ width: '100%' }}
                placeholder="All types"
                value={filters.resourceType}
                onChange={(value) => setFilters({ ...filters, resourceType: value })}
                allowClear
              >
                <Option value="application">Application</Option>
                <Option value="token">Token</Option>
                <Option value="user">User</Option>
              </Select>
            </Col>
          </Row>
        </Card>

        {/* Recent Activity Timeline */}
        <Card title="Recent Activity">
          <Timeline>
            {filteredData.slice(0, 5).map((entry) => (
              <Timeline.Item
                key={entry.id}
                dot={getStatusIcon(entry.status)}
                color={entry.status === 'success' ? 'green' : entry.status === 'failure' ? 'red' : 'orange'}
              >
                <div>
                  <Text strong>{entry.action.replace(/_/g, ' ')}</Text>
                  <div>
                    <Text type="secondary">
                      {entry.user_id} • {dayjs(entry.timestamp).fromNow()}
                    </Text>
                  </div>
                  <div>
                    <Tag>{entry.resource_type}</Tag>
                    <Text type="secondary" style={{ marginLeft: '8px' }}>
                      {entry.resource_id}
                    </Text>
                  </div>
                </div>
              </Timeline.Item>
            ))}
          </Timeline>
        </Card>

        {/* Audit Log Table */}
        <Card title="Audit Log Entries">
          <Alert
            message="Demo Data"
            description="This audit log shows simulated data for demonstration purposes. In production, this would display real audit events from your KMS system."
            type="info"
            showIcon
            style={{ marginBottom: '16px' }}
          />
          
          <Table
            columns={columns}
            dataSource={filteredData}
            rowKey="id"
            loading={loading}
            expandable={{
              expandedRowRender,
              expandRowByClick: true,
            }}
            pagination={{
              pageSize: 10,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total, range) =>
                `${range[0]}-${range[1]} of ${total} audit entries`,
            }}
          />
        </Card>
      </Space>
    </div>
  );
};

export default Audit;