import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Table, Button, Input, Select, DatePicker, Card, Space, Modal, Form, Typography, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { useAppContext } from '../store/AppContext';
import { ROUTES } from '../router/routes.constant';

interface TruckResponse {
  id: number;
  submenu_id: number;
  asn: string;
  container_number: string;
  truck_number: string;
  driver_name: string;
  purpose_id: number | null;
  notes: string | null;
  metadata: string | null;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface TruckPurposeResponse {
  id: string;
  cfg_truck_purpose_id: number;
  code: string;
  label: string;
  description: string | null;
  is_active: boolean;
  submenu_id: number;
  created_at: string;
  updated_at: string;
}

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

export default function TrucksListPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { currentUser } = useAppContext();

  const [trucks, setTrucks] = useState<TruckResponse[]>([]);
  const [trucksLoading, setTrucksLoading] = useState<boolean>(false);
  const [searchText, setSearchText] = useState<string>('');
  const [filterPurpose, setFilterPurpose] = useState<string>('');
  const [filterDateRange, setFilterDateRange] = useState<[string, string] | []>([]);
  const [pagination, setPagination] = useState<PaginationState>({
    current: 1,
    pageSize: 20,
    total: 0,
  });
  const [addModalVisible, setAddModalVisible] = useState<boolean>(false);
  const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
  const [archiveModalVisible, setArchiveModalVisible] = useState<boolean>(false);
  const [selectedTruckId, setSelectedTruckId] = useState<number | null>(null);
  const [truckPurposes, setTruckPurposes] = useState<TruckPurposeResponse[]>([]);

  const [addForm] = Form.useForm();
  const [editForm] = Form.useForm();

  const fetchTrucks = useCallback(async () => {
    setTrucksLoading(true);
    try {
      const result = await request<TruckResponse[]>({
        method: 'GET',
        path: '/trucks/',
        query: {
          limit: pagination.pageSize,
          offset: (pagination.current - 1) * pagination.pageSize,
          truck_number: searchText || undefined,
          container_number: searchText || undefined,
        },
      });
      setTrucks(result.data);
      setPagination((prev) => ({ ...prev, total: result.data.length }));
    } catch (error) {
      messageApi.error('Failed to load trucks');
    } finally {
      setTrucksLoading(false);
    }
  }, [pagination.current, pagination.pageSize, searchText, messageApi]);

  const fetchTruckPurposes = useCallback(async () => {
    try {
      const result = await request<TruckPurposeResponse[]>({
        method: 'GET',
        path: '/configuration/truck-purposes',
        query: {
          is_active: true,
          limit: 100,
        },
      });
      setTruckPurposes(result.data);
    } catch (error) {
      messageApi.error('Failed to load truck purposes');
    }
  }, [messageApi]);

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

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

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(e.target.value);
  };

  const handlePurposeFilterChange = (value: string) => {
    setFilterPurpose(value);
  };

  const handleDateRangeChange = (dates: [string, string] | null) => {
    setFilterDateRange(dates || []);
  };

  const handlePaginationChange = (page: number, pageSize: number) => {
    setPagination((prev) => ({ ...prev, current: page, pageSize }));
  };

  const openAddModal = () => {
    setAddModalVisible(true);
  };

  const closeAddModal = () => {
    setAddModalVisible(false);
    addForm.resetFields();
  };

  const openEditModal = (record: TruckResponse) => {
    setEditModalVisible(true);
    setSelectedTruckId(record.id);
    editForm.setFieldsValue({
      truck_number: record.truck_number,
      driver_name: record.driver_name,
      purpose_id: record.purpose_id,
      notes: record.notes,
    });
  };

  const closeEditModal = () => {
    setEditModalVisible(false);
    setSelectedTruckId(null);
    editForm.resetFields();
  };

  const openArchiveModal = (record: TruckResponse) => {
    setArchiveModalVisible(true);
    setSelectedTruckId(record.id);
  };

  const closeArchiveModal = () => {
    setArchiveModalVisible(false);
    setSelectedTruckId(null);
  };

  const handleAddTruck = async () => {
    try {
      const formValues = await addForm.validateFields();
      await request<TruckResponse>({
        method: 'POST',
        path: '/trucks/',
        body: {
          submenu_id: formValues.submenu_id || 1,
          asn: formValues.asn || '',
          container_number: formValues.container_number || '',
          truck_number: formValues.truck_number,
          driver_name: formValues.driver_name,
          purpose_id: formValues.purpose_id || null,
          notes: formValues.notes || null,
        },
      });
      messageApi.success('Truck added successfully');
      setAddModalVisible(false);
      addForm.resetFields();
      fetchTrucks();
    } catch (error) {
      messageApi.error('Failed to add truck');
    }
  };

  const handleEditTruck = async () => {
    if (!selectedTruckId) return;
    try {
      const formValues = await editForm.validateFields();
      await request<TruckResponse>({
        method: 'PUT',
        path: '/trucks/{truck_id}',
        pathParams: { truck_id: selectedTruckId },
        body: {
          truck_number: formValues.truck_number,
          driver_name: formValues.driver_name,
          purpose_id: formValues.purpose_id || null,
          notes: formValues.notes || null,
        },
      });
      messageApi.success('Truck updated successfully');
      setEditModalVisible(false);
      setSelectedTruckId(null);
      editForm.resetFields();
      fetchTrucks();
    } catch (error) {
      messageApi.error('Failed to update truck');
    }
  };

  const handleArchiveTruck = async () => {
    if (!selectedTruckId || !currentUser?.id) return;
    try {
      await request<TruckResponse>({
        method: 'POST',
        path: '/trucks/{truck_id}/archive',
        pathParams: { truck_id: selectedTruckId },
        query: { changed_by: currentUser.id },
      });
      messageApi.success('Truck archived successfully');
      setArchiveModalVisible(false);
      setSelectedTruckId(null);
      fetchTrucks();
    } catch (error) {
      messageApi.error('Failed to archive truck');
    }
  };

  const handleDeleteTruck = (record: TruckResponse) => {
    Modal.confirm({
      title: 'Confirm Delete',
      content: 'Are you sure you want to delete this truck?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/trucks/{truck_id}',
            pathParams: { truck_id: record.id },
          });
          messageApi.success('Truck deleted successfully');
          fetchTrucks();
        } catch (error) {
          messageApi.error('Failed to delete truck');
        }
      },
    });
  };

  const handleRowClick = (record: TruckResponse) => {
    navigate(`/trucks/${record.id}`);
  };

  const handleNavigateToDriverLicenses = () => {
    navigate('/driver-licenses');
  };

  const purposeOptions = useMemo(
    () => truckPurposes.map((p) => ({ label: p.label, value: p.cfg_truck_purpose_id })),
    [truckPurposes]
  );

  const columns = useMemo(
    () => [
      {
        title: 'Truck ID',
        dataIndex: 'id',
        key: 'id',
        width: 80,
      },
      {
        title: 'License Plate',
        dataIndex: 'truck_number',
        key: 'truck_number',
      },
      {
        title: 'Driver',
        dataIndex: 'driver_name',
        key: 'driver_name',
      },
      {
        title: 'Purpose',
        dataIndex: 'purpose_id',
        key: 'purpose_id',
        render: (purposeId: number | null) => {
          const purpose = truckPurposes.find((p) => p.cfg_truck_purpose_id === purposeId);
          return purpose ? purpose.label : '-';
        },
      },
      {
        title: 'Container',
        dataIndex: 'container_number',
        key: 'container_number',
      },
      {
        title: 'Arrival Time',
        dataIndex: 'created_at',
        key: 'created_at',
        render: (date: string) => new Date(date).toLocaleString(),
      },
      {
        title: 'Actions',
        key: 'actions',
        fixed: 'right' as const,
        width: 280,
        render: (_: unknown, record: TruckResponse) => (
          <Space size="small">
            <Button type="link" size="small" onClick={() => handleRowClick(record)}>
              View
            </Button>
            <Button type="link" size="small" onClick={() => openEditModal(record)}>
              Edit
            </Button>
            <Button type="link" size="small" onClick={() => openArchiveModal(record)}>
              Archive
            </Button>
            <Button type="link" size="small" danger onClick={() => handleDeleteTruck(record)}>
              Delete
            </Button>
          </Space>
        ),
      },
    ],
    [truckPurposes]
  );

  const rootStyle: CSSProperties = {
    minHeight: '100vh',
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    padding: '24px',
    background: '#f5f5f5',
  };

  const headerStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '16px',
  };

  return (
    <div style={rootStyle}>
      {contextHolder}
      <div style={headerStyle}>
        <Typography.Title level={2} style={{ margin: 0 }}>
          Truck Operations
        </Typography.Title>
        <Space>
          <Button type="primary" icon={<PlusOutlined />} onClick={openAddModal}>
            Add Truck
          </Button>
          <Button type="default" onClick={handleNavigateToDriverLicenses}>
            Driver Licenses
          </Button>
        </Space>
      </div>

      <Card bordered={false} style={{ marginBottom: '16px' }}>
        <Space wrap size="middle" style={{ width: '100%' }}>
          <Input.Search
            placeholder="Search by truck number or container..."
            allowClear
            style={{ width: 280 }}
            value={searchText}
            onChange={handleSearchChange}
            onSearch={fetchTrucks}
          />
          <Select
            placeholder="Filter by Purpose"
            allowClear
            style={{ width: 200 }}
            value={filterPurpose || undefined}
            onChange={handlePurposeFilterChange}
            options={purposeOptions}
          />
          <DatePicker.RangePicker
            placeholder={['Start Date', 'End Date']}
            onChange={handleDateRangeChange as any}
          />
        </Space>
      </Card>

      <Card bordered={false}>
        <Table
          rowKey="id"
          dataSource={trucks}
          columns={columns}
          loading={trucksLoading}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            showSizeChanger: true,
            showTotal: (total) => `Total ${total} items`,
            onChange: handlePaginationChange,
          }}
          onRow={(record) => ({
            onClick: () => handleRowClick(record),
            style: { cursor: 'pointer' },
          })}
        />
      </Card>

      <Modal
        title="Add New Truck"
        open={addModalVisible}
        onOk={handleAddTruck}
        onCancel={closeAddModal}
        okText="Create"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={addForm} layout="vertical">
          <Form.Item
            label="License Plate / Truck Number"
            name="truck_number"
            rules={[{ required: true, message: 'Please enter truck number' }]}
          >
            <Input placeholder="Enter license plate or truck number" />
          </Form.Item>
          <Form.Item
            label="Driver Name"
            name="driver_name"
            rules={[{ required: true, message: 'Please enter driver name' }]}
          >
            <Input placeholder="Enter driver name" />
          </Form.Item>
          <Form.Item label="Purpose" name="purpose_id">
            <Select placeholder="Select purpose" allowClear options={purposeOptions} />
          </Form.Item>
          <Form.Item label="ASN" name="asn">
            <Input placeholder="Enter ASN number" />
          </Form.Item>
          <Form.Item label="Container Number" name="container_number">
            <Input placeholder="Enter container number" />
          </Form.Item>
          <Form.Item label="Notes" name="notes">
            <Input.TextArea placeholder="Enter any notes" rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit Truck"
        open={editModalVisible}
        onOk={handleEditTruck}
        onCancel={closeEditModal}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={editForm} layout="vertical">
          <Form.Item
            label="License Plate / Truck Number"
            name="truck_number"
            rules={[{ required: true, message: 'Please enter truck number' }]}
          >
            <Input placeholder="Enter license plate or truck number" />
          </Form.Item>
          <Form.Item
            label="Driver Name"
            name="driver_name"
            rules={[{ required: true, message: 'Please enter driver name' }]}
          >
            <Input placeholder="Enter driver name" />
          </Form.Item>
          <Form.Item label="Purpose" name="purpose_id">
            <Select placeholder="Select purpose" allowClear options={purposeOptions} />
          </Form.Item>
          <Form.Item label="Notes" name="notes">
            <Input.TextArea placeholder="Enter any notes" rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Confirm Archive"
        open={archiveModalVisible}
        onOk={handleArchiveTruck}
        onCancel={closeArchiveModal}
        okText="Archive"
        cancelText="Cancel"
        okButtonProps={{ danger: true }}
      >
        <Typography.Text>
          Are you sure you want to archive this truck? This action will move the truck to archived
          status and create a history record.
        </Typography.Text>
      </Modal>
    </div>
  );
}