import { useState, useMemo, useEffect, useCallback } from 'react';
import { Button, Card, Descriptions, Table, Drawer, Form, Input, InputNumber, Space, Typography, message, Modal } from 'antd';
import { ArrowLeftOutlined, EditOutlined, InboxOutlined } from '@ant-design/icons';
import { useNavigate, useParams } from 'react-router-dom';
import { request } from '../api/client';
import { useAppContext } from '../store/AppContext';

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

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

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

interface TruckUpdateBody {
  submenu_id?: number | null;
  asn?: string | null;
  container_number?: string | null;
  truck_number?: string | null;
  driver_name?: string | null;
  purpose_id?: number | null;
  notes?: string | null;
  metadata?: string | null;
}

export default function TruckDetailPage() {
  const { truckId } = useParams<{ truckId: string }>();
  const navigate = useNavigate();
  const { currentUser } = useAppContext();
  const [messageApi, contextHolder] = message.useMessage();
  const [form] = Form.useForm();

  const [truckDetail, setTruckDetail] = useState<TruckDetailResponse | null>(null);
  const [truckHistory, setTruckHistory] = useState<TruckhistoryResponse[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [editDrawerVisible, setEditDrawerVisible] = useState<boolean>(false);
  const [archiving, setArchiving] = useState<boolean>(false);

  const purposeLabel = useMemo(() => {
    return truckDetail?.purpose?.label || 'N/A';
  }, [truckDetail]);

  const fetchTruckDetails = useCallback(async () => {
    if (!truckId) return;
    try {
      setLoading(true);
      const result = await request<TruckDetailResponse>({
        method: 'GET',
        path: '/trucks/{truck_id}/details',
        pathParams: { truck_id: parseInt(truckId, 10) }
      });
      setTruckDetail(result.data);
    } catch (error) {
      messageApi.error('Failed to load truck details');
    } finally {
      setLoading(false);
    }
  }, [truckId, messageApi]);

  const fetchTruckHistory = useCallback(async () => {
    if (!truckId) return;
    try {
      const result = await request<TruckhistoryResponse[]>({
        method: 'GET',
        path: '/trucks/history',
        query: { truck_id: parseInt(truckId, 10), limit: 50 }
      });
      setTruckHistory(result.data);
    } catch (error) {
      messageApi.error('Failed to load truck history');
    }
  }, [truckId, messageApi]);

  useEffect(() => {
    fetchTruckDetails();
    fetchTruckHistory();
  }, [fetchTruckDetails, fetchTruckHistory]);

  const navigateBack = useCallback(() => {
    navigate('/trucks');
  }, [navigate]);

  const openEditDrawer = useCallback(() => {
    if (truckDetail) {
      form.setFieldsValue({
        truck_number: truckDetail.truck_number,
        driver_name: truckDetail.driver_name,
        container_number: truckDetail.container_number,
        asn: truckDetail.asn,
        purpose_id: truckDetail.purpose_id,
        notes: truckDetail.notes
      });
    }
    setEditDrawerVisible(true);
  }, [truckDetail, form]);

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

  const submitEdit = useCallback(async (values: TruckUpdateBody) => {
    if (!truckId) return;
    try {
      const body: TruckUpdateBody = {
        asn: values.asn,
        container_number: values.container_number,
        truck_number: values.truck_number,
        driver_name: values.driver_name,
        purpose_id: values.purpose_id,
        notes: values.notes,
        metadata: values.metadata
      };
      const result = await request<TruckDetailResponse>({
        method: 'PUT',
        path: '/trucks/{truck_id}',
        pathParams: { truck_id: parseInt(truckId, 10) },
        body
      });
      setTruckDetail(result.data);
      setEditDrawerVisible(false);
      messageApi.success('Truck updated successfully');
      fetchTruckDetails();
      fetchTruckHistory();
    } catch (error) {
      messageApi.error('Failed to update truck');
    }
  }, [truckId, messageApi, fetchTruckDetails, fetchTruckHistory]);

  const archiveTruck = useCallback(() => {
    Modal.confirm({
      title: 'Archive Truck',
      content: 'Are you sure you want to archive this truck?',
      onOk: async () => {
        if (!truckId) return;
        try {
          setArchiving(true);
          await request({
            method: 'POST',
            path: '/trucks/{truck_id}/archive',
            pathParams: { truck_id: parseInt(truckId, 10) },
            query: { changed_by: currentUser?.id || 0 }
          });
          messageApi.success('Truck archived successfully');
          navigate('/trucks');
        } catch (error) {
          messageApi.error('Failed to archive truck');
        } finally {
          setArchiving(false);
        }
      }
    });
  }, [truckId, currentUser, messageApi, navigate]);

  const historyColumns = useMemo(() => [
    {
      title: 'Date',
      dataIndex: 'change_date',
      key: 'change_date',
      render: (text: string) => new Date(text).toLocaleString()
    },
    {
      title: 'Action',
      dataIndex: 'change_type',
      key: 'change_type'
    },
    {
      title: 'User',
      dataIndex: 'changed_by',
      key: 'changed_by'
    },
    {
      title: 'Notes',
      dataIndex: 'change_description',
      key: 'change_description'
    }
  ], []);

  const descriptionsItems = useMemo(() => {
    if (!truckDetail) return [];
    return [
      {
        label: 'Truck Number',
        children: truckDetail.truck_number
      },
      {
        label: 'Driver Name',
        children: truckDetail.driver_name
      },
      {
        label: 'Container Number',
        children: truckDetail.container_number
      },
      {
        label: 'ASN',
        children: truckDetail.asn
      },
      {
        label: 'Purpose',
        children: truckDetail.purpose?.label || 'N/A'
      },
      {
        label: 'Purpose ID',
        children: truckDetail.purpose_id
      },
      {
        label: 'Notes',
        children: truckDetail.notes || '-'
      },
      {
        label: 'Created At',
        children: new Date(truckDetail.created_at).toLocaleString()
      },
      {
        label: 'Updated At',
        children: new Date(truckDetail.updated_at).toLocaleString()
      },
      {
        label: 'Version',
        children: truckDetail.version
      }
    ];
  }, [truckDetail]);

  return (
    <div style={{ minHeight: '100vh', height: '100%', width: '100%', display: 'flex', flexDirection: 'column', padding: '24px', background: '#f5f5f5' }}>
      {contextHolder}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <Button icon={<ArrowLeftOutlined />} type="default" onClick={navigateBack}>
            Back
          </Button>
          <Typography.Title level={3} style={{ margin: 0 }}>
            Truck Details
          </Typography.Title>
        </div>
        <Space>
          <Button type="primary" icon={<EditOutlined />} onClick={openEditDrawer}>
            Edit
          </Button>
          <Button type="default" danger icon={<InboxOutlined />} loading={archiving} onClick={archiveTruck}>
            Archive
          </Button>
        </Space>
      </div>

      <Card title="Truck Information" loading={loading} style={{ marginBottom: '24px' }}>
        <Descriptions bordered column={{ xs: 1, sm: 2, lg: 3 }} items={descriptionsItems} />
      </Card>

      <Card title="Truck History" style={{ marginBottom: '24px' }}>
        <Table
          dataSource={truckHistory}
          columns={historyColumns}
          rowKey="id"
          pagination={{ pageSize: 10 }}
          size="small"
        />
      </Card>

      <Drawer
        title="Edit Truck"
        width={480}
        onClose={closeEditDrawer}
        open={editDrawerVisible}
      >
        <Form form={form} layout="vertical" onFinish={submitEdit}>
          <Form.Item
            name="truck_number"
            label="Truck Number"
            rules={[{ required: true, message: 'Truck number is required' }]}
          >
            <Input placeholder="Enter truck number" />
          </Form.Item>

          <Form.Item
            name="driver_name"
            label="Driver Name"
            rules={[{ required: true, message: 'Driver name is required' }]}
          >
            <Input placeholder="Enter driver name" />
          </Form.Item>

          <Form.Item name="container_number" label="Container Number">
            <Input placeholder="Enter container number" />
          </Form.Item>

          <Form.Item name="asn" label="ASN">
            <Input placeholder="Enter ASN" />
          </Form.Item>

          <Form.Item name="purpose_id" label="Purpose ID">
            <InputNumber placeholder="Enter purpose ID" style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item name="notes" label="Notes">
            <Input.TextArea placeholder="Enter notes" rows={4} />
          </Form.Item>

          <Button type="primary" htmlType="submit" block>
            Save Changes
          </Button>
        </Form>
      </Drawer>
    </div>
  );
}