import { useState, useMemo, useEffect, useCallback } from 'react';
import { Table, Button, Input, Select, Card, Modal, Form, DatePicker, Space, Drawer, Tabs, Descriptions, Typography, Breadcrumb, Row, Col, InputNumber, Tag, message } from 'antd';
import { PlusOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import dayjs from 'dayjs';

interface DriverlicenseResponse {
  submenu_id: number;
  expiration_date: string;
  notes: string | null;
  metadata: string | null;
  id: string;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface DriverlicenseDetailResponse extends DriverlicenseResponse {
  history_records?: DriverlicensehistoryResponse[];
}

interface DriverlicensehistoryResponse {
  submenu_id: number;
  driver_license_id: string | null;
  change_date: string;
  change_description: string | null;
  changed_by: number | null;
  change_type: string;
  id: string;
  created_at: string;
  updated_at: string;
}

interface PaginationState {
  current: number;
  pageSize: number;
  total: number;
}

export default function DriverLicensesPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const [form] = Form.useForm();

  const [licenses, setLicenses] = useState<DriverlicenseResponse[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [searchText, setSearchText] = useState<string>('');
  const [filterType, setFilterType] = useState<string>('');
  const [filterExpiryStatus, setFilterExpiryStatus] = useState<string>('');
  const [addModalVisible, setAddModalVisible] = useState<boolean>(false);
  const [detailDrawerVisible, setDetailDrawerVisible] = useState<boolean>(false);
  const [selectedLicenseId, setSelectedLicenseId] = useState<string | null>(null);
  const [selectedLicenseDetail, setSelectedLicenseDetail] = useState<DriverlicenseDetailResponse | null>(null);
  const [historyRecords, setHistoryRecords] = useState<DriverlicensehistoryResponse[]>([]);
  const [activeDetailTab, setActiveDetailTab] = useState<string>('details');
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });

  const fetchLicenses = useCallback(async () => {
    setLoading(true);
    try {
      const result = await request<DriverlicenseResponse[]>({
        method: 'GET',
        path: '/driver-licenses/',
        query: {
          limit: pagination.pageSize,
          offset: (pagination.current - 1) * pagination.pageSize,
        },
      });
      setLicenses(result.data);
      setPagination(prev => ({ ...prev, total: result.data.length }));
    } catch (error) {
      messageApi.error('Failed to load driver licenses');
    } finally {
      setLoading(false);
    }
  }, [pagination.current, pagination.pageSize, messageApi]);

  useEffect(() => {
    fetchLicenses();
  }, []);

  const filteredLicenses = useMemo(() => {
    return licenses.filter(l => {
      const matchesSearch = !searchText || 
        l.notes?.toLowerCase().includes(searchText.toLowerCase()) || 
        l.metadata?.toLowerCase().includes(searchText.toLowerCase());
      const matchesType = !filterType || l.metadata?.includes(filterType);
      return matchesSearch && matchesType;
    });
  }, [licenses, searchText, filterType]);

  const openAddModal = useCallback(() => {
    setAddModalVisible(true);
  }, []);

  const closeAddModal = useCallback(() => {
    setAddModalVisible(false);
    form.resetFields();
  }, [form]);

  const handleCreateLicense = useCallback(async () => {
    try {
      const formValues = await form.validateFields();
      
      const body = {
        submenu_id: formValues.submenu_id || 1,
        expiration_date: formValues.expiry_date.format('YYYY-MM-DD'),
        notes: JSON.stringify({
          driver_name: formValues.driver_name,
          license_number: formValues.license_number,
          license_type: formValues.license_type,
          issue_date: formValues.issue_date?.format('YYYY-MM-DD'),
          issuing_authority: formValues.issuing_authority,
          status: formValues.status,
        }),
        metadata: formValues.metadata || null,
      };

      await request<DriverlicenseResponse>({
        method: 'POST',
        path: '/driver-licenses/',
        body,
      });

      messageApi.success('Driver license created successfully');
      setAddModalVisible(false);
      form.resetFields();
      fetchLicenses();
    } catch (error) {
      messageApi.error('Failed to create driver license');
    }
  }, [form, messageApi, fetchLicenses]);

  const viewLicenseDetails = useCallback(async (record: DriverlicenseResponse) => {
    setSelectedLicenseId(record.id);
    setDetailDrawerVisible(true);
    setActiveDetailTab('details');

    try {
      const result = await request<DriverlicenseDetailResponse>({
        method: 'GET',
        path: '/driver-licenses/{entity_id}/details',
        pathParams: { entity_id: record.id },
      });
      setSelectedLicenseDetail(result.data);
    } catch (error) {
      messageApi.error('Failed to load license details');
    }
  }, [messageApi]);

  const viewLicenseHistory = useCallback(async () => {
    if (!selectedLicenseId) return;

    try {
      const result = await request<DriverlicensehistoryResponse[]>({
        method: 'GET',
        path: '/driver-licenses/history/list',
        query: {
          driver_license_id: selectedLicenseId,
          limit: 50,
        },
      });
      setHistoryRecords(result.data);
    } catch (error) {
      messageApi.error('Failed to load license history');
    }
  }, [selectedLicenseId, messageApi]);

  const handleDeleteLicense = useCallback(async (record: DriverlicenseResponse) => {
    Modal.confirm({
      title: 'Delete License',
      content: 'Are you sure you want to delete this driver license?',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/driver-licenses/{entity_id}',
            pathParams: { entity_id: record.id },
          });
          messageApi.success('Driver license deleted successfully');
          fetchLicenses();
        } catch (error) {
          messageApi.error('Failed to delete driver license');
        }
      },
    });
  }, [messageApi, fetchLicenses]);

  const closeDetailDrawer = useCallback(() => {
    setDetailDrawerVisible(false);
    setSelectedLicenseDetail(null);
    setHistoryRecords([]);
  }, []);

  const handleTabChange = useCallback((activeKey: string) => {
    setActiveDetailTab(activeKey);
    if (activeKey === 'history') {
      viewLicenseHistory();
    }
  }, [viewLicenseHistory]);

  const parseNotesField = useCallback((notes: string | null, field: string): string => {
    if (!notes) return '';
    try {
      const parsed = JSON.parse(notes);
      return parsed[field] || '';
    } catch {
      return '';
    }
  }, []);

  const columns = useMemo(() => [
    {
      title: 'License ID',
      dataIndex: 'id',
      key: 'id',
      width: 120,
    },
    {
      title: 'Driver Name',
      key: 'driver_name',
      render: (_: unknown, record: DriverlicenseResponse) => parseNotesField(record.notes, 'driver_name'),
    },
    {
      title: 'License Number',
      key: 'license_number',
      render: (_: unknown, record: DriverlicenseResponse) => parseNotesField(record.notes, 'license_number'),
    },
    {
      title: 'License Type',
      key: 'license_type',
      render: (_: unknown, record: DriverlicenseResponse) => parseNotesField(record.notes, 'license_type'),
    },
    {
      title: 'Expiry Date',
      dataIndex: 'expiration_date',
      key: 'expiration_date',
      render: (date: string) => dayjs(date).format('YYYY-MM-DD'),
    },
    {
      title: 'Status',
      key: 'status',
      render: (_: unknown, record: DriverlicenseResponse) => {
        const status = parseNotesField(record.notes, 'status');
        const colorMap: Record<string, string> = {
          active: 'green',
          suspended: 'orange',
          revoked: 'red',
        };
        return <Tag color={colorMap[status] || 'default'}>{status}</Tag>;
      },
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: DriverlicenseResponse) => (
        <Space size="small">
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => viewLicenseDetails(record)}
          >
            View
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDeleteLicense(record)}
          >
            Delete
          </Button>
        </Space>
      ),
    },
  ], [parseNotesField, viewLicenseDetails, handleDeleteLicense]);

  const historyColumns = useMemo(() => [
    {
      title: 'Date',
      dataIndex: 'change_date',
      key: 'change_date',
      render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: 'Type',
      dataIndex: 'change_type',
      key: 'change_type',
      render: (type: string) => <Tag>{type}</Tag>,
    },
    {
      title: 'Description',
      dataIndex: 'change_description',
      key: 'change_description',
    },
    {
      title: 'Changed By',
      dataIndex: 'changed_by',
      key: 'changed_by',
    },
  ], []);

  const detailsContent = useMemo(() => {
    if (!selectedLicenseDetail) return null;

    const parsedNotes = selectedLicenseDetail.notes ? JSON.parse(selectedLicenseDetail.notes) : {};

    return (
      <Descriptions bordered column={2} size="middle">
        <Descriptions.Item label="License ID" span={2}>{selectedLicenseDetail.id}</Descriptions.Item>
        <Descriptions.Item label="Driver Name">{parsedNotes.driver_name}</Descriptions.Item>
        <Descriptions.Item label="License Number">{parsedNotes.license_number}</Descriptions.Item>
        <Descriptions.Item label="License Type">{parsedNotes.license_type}</Descriptions.Item>
        <Descriptions.Item label="Status">
          <Tag color={parsedNotes.status === 'active' ? 'green' : parsedNotes.status === 'suspended' ? 'orange' : 'red'}>
            {parsedNotes.status}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label="Issue Date">{parsedNotes.issue_date}</Descriptions.Item>
        <Descriptions.Item label="Expiry Date">{dayjs(selectedLicenseDetail.expiration_date).format('YYYY-MM-DD')}</Descriptions.Item>
        <Descriptions.Item label="Issuing Authority" span={2}>{parsedNotes.issuing_authority}</Descriptions.Item>
        <Descriptions.Item label="Created At" span={2}>{dayjs(selectedLicenseDetail.created_at).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
        <Descriptions.Item label="Updated At" span={2}>{dayjs(selectedLicenseDetail.updated_at).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
      </Descriptions>
    );
  }, [selectedLicenseDetail]);

  return (
    <div style={{ minHeight: '100vh', height: '100%', width: '100%', display: 'flex', flexDirection: 'column', padding: '24px', background: '#f5f5f5' }}>
      {contextHolder}
      
      <div style={{ marginBottom: '24px' }}>
        <Breadcrumb style={{ marginBottom: '16px' }}>
          <Breadcrumb.Item>
            <span style={{ cursor: 'pointer' }}>Dashboard</span>
          </Breadcrumb.Item>
          <Breadcrumb.Item>Driver Licenses</Breadcrumb.Item>
        </Breadcrumb>
        <Typography.Title level={2} style={{ marginBottom: '0' }}>
          Driver Licenses
        </Typography.Title>
      </div>

      <Card bordered={false}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px', flexWrap: 'wrap', gap: '12px' }}>
          <Space size="middle" wrap>
            <Input.Search
              placeholder="Search by driver name or license number"
              allowClear
              style={{ width: 280 }}
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
            />
            <Select
              placeholder="Filter by type"
              allowClear
              style={{ width: 160 }}
              value={filterType || undefined}
              onChange={(value) => setFilterType(value || '')}
              options={[
                { label: 'CDL-A', value: 'CDL-A' },
                { label: 'CDL-B', value: 'CDL-B' },
                { label: 'CDL-C', value: 'CDL-C' },
                { label: 'Non-CDL', value: 'Non-CDL' },
              ]}
            />
            <Select
              placeholder="Filter by expiry status"
              allowClear
              style={{ width: 180 }}
              value={filterExpiryStatus || undefined}
              onChange={(value) => setFilterExpiryStatus(value || '')}
              options={[
                { label: 'Valid', value: 'valid' },
                { label: 'Expired', value: 'expired' },
                { label: 'Expiring Soon', value: 'expiring_soon' },
              ]}
            />
          </Space>
          <Button type="primary" icon={<PlusOutlined />} onClick={openAddModal}>
            Add License
          </Button>
        </div>

        <Table
          rowKey="id"
          dataSource={filteredLicenses}
          columns={columns}
          loading={loading}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            onChange: (page, pageSize) => {
              setPagination(prev => ({ ...prev, current: page, pageSize: pageSize || 20 }));
            },
          }}
        />
      </Card>

      <Modal
        title="Add Driver License"
        open={addModalVisible}
        onCancel={closeAddModal}
        onOk={handleCreateLicense}
        width={640}
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="driver_name"
            label="Driver Name"
            rules={[{ required: true, message: 'Please enter driver name' }]}
          >
            <Input placeholder="Enter driver name" />
          </Form.Item>

          <Form.Item
            name="license_number"
            label="License Number"
            rules={[{ required: true, message: 'Please enter license number' }]}
          >
            <Input placeholder="Enter license number" />
          </Form.Item>

          <Form.Item
            name="license_type"
            label="License Type"
            rules={[{ required: true, message: 'Please select license type' }]}
          >
            <Select
              placeholder="Select license type"
              options={[
                { label: 'CDL-A', value: 'CDL-A' },
                { label: 'CDL-B', value: 'CDL-B' },
                { label: 'CDL-C', value: 'CDL-C' },
                { label: 'Non-CDL', value: 'Non-CDL' },
              ]}
            />
          </Form.Item>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="issue_date"
                label="Issue Date"
                rules={[{ required: true, message: 'Please select issue date' }]}
              >
                <DatePicker style={{ width: '100%' }} placeholder="Select issue date" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="expiry_date"
                label="Expiry Date"
                rules={[{ required: true, message: 'Please select expiry date' }]}
              >
                <DatePicker style={{ width: '100%' }} placeholder="Select expiry date" />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item name="issuing_authority" label="Issuing Authority">
            <Input placeholder="Enter issuing authority" />
          </Form.Item>

          <Form.Item
            name="status"
            label="Status"
            rules={[{ required: true, message: 'Please select status' }]}
          >
            <Select
              placeholder="Select status"
              options={[
                { label: 'Active', value: 'active' },
                { label: 'Suspended', value: 'suspended' },
                { label: 'Revoked', value: 'revoked' },
              ]}
            />
          </Form.Item>

          <Form.Item name="submenu_id" hidden initialValue={1}>
            <InputNumber />
          </Form.Item>
        </Form>
      </Modal>

      <Drawer
        title="License Details"
        open={detailDrawerVisible}
        onClose={closeDetailDrawer}
        width={640}
        destroyOnClose
      >
        <Tabs
          activeKey={activeDetailTab}
          onChange={handleTabChange}
          items={[
            {
              key: 'details',
              label: 'Details',
              children: detailsContent,
            },
            {
              key: 'history',
              label: 'History',
              children: (
                <Table
                  rowKey="id"
                  dataSource={historyRecords}
                  columns={historyColumns}
                  size="small"
                  pagination={false}
                />
              ),
            },
          ]}
        />
      </Drawer>
    </div>
  );
}