import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Layout, Card, Table, Button, Modal, Form, Input, InputNumber, Space, Breadcrumb, Typography, message, Alert } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { BmiService } from '@/services/bmi';
import { parseError } from '@/utils/errorHandler';
import { ROUTES } from '@/constants/routes';

interface BmiCategory {
  id: string;
  category_id: string;
  category_name: string;
  min_bmi: number;
  max_bmi: number | null;
  description: string | null;
  color_code: string | null;
  health_risk: string | null;
  recommendations: string | null;
  created_at: string;
  updated_at: string;
}

const AdminCategoriesPage = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const [createForm] = Form.useForm();
  const [editForm] = Form.useForm();

  const [categories, setCategories] = useState<BmiCategory[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
  const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
  const [confirmModalVisible, setConfirmModalVisible] = useState<boolean>(false);
  const [selectedCategory, setSelectedCategory] = useState<BmiCategory | null>(null);
  const [pendingAction, setPendingAction] = useState<string | null>(null);
  const [pendingPayload, setPendingPayload] = useState<Record<string, unknown> | null>(null);

  const { data: categoriesData, loading: categoriesLoading, error: categoriesError, execute: fetchCategories } = useApi(BmiService.listCategories);

  const categoryCount = useMemo(() => categories.length, [categories]);

  useEffect(() => {
    void fetchCategories({ limit: 50, offset: 0 });
  }, [fetchCategories]);

  useEffect(() => {
    if (categoriesData) {
      setCategories(categoriesData as BmiCategory[]);
      setLoading(false);
    }
  }, [categoriesData]);

  useEffect(() => {
    if (categoriesError) {
      const { message: errorMessage } = parseError(categoriesError);
      messageApi.error(errorMessage);
      setLoading(false);
    }
  }, [categoriesError, messageApi]);

  useEffect(() => {
    setLoading(categoriesLoading);
  }, [categoriesLoading]);

  useEffect(() => {
    if (editModalVisible && selectedCategory) {
      editForm.setFieldsValue({
        category_name: selectedCategory.category_name,
        min_bmi: selectedCategory.min_bmi,
        max_bmi: selectedCategory.max_bmi,
        color_code: selectedCategory.color_code,
        health_risk: selectedCategory.health_risk,
        description: selectedCategory.description,
        recommendations: selectedCategory.recommendations,
      });
    }
  }, [editModalVisible, selectedCategory, editForm]);

  const openCreateModal = useCallback(() => {
    setCreateModalVisible(true);
  }, []);

  const closeCreateModal = useCallback(() => {
    setCreateModalVisible(false);
    createForm.resetFields();
  }, [createForm]);

  const openEditModal = useCallback((record: BmiCategory) => {
    setEditModalVisible(true);
    setSelectedCategory(record);
  }, []);

  const closeEditModal = useCallback(() => {
    setEditModalVisible(false);
    setSelectedCategory(null);
    editForm.resetFields();
  }, [editForm]);

  const openConfirmModal = useCallback(() => {
    setConfirmModalVisible(true);
  }, []);

  const closeConfirmModal = useCallback(() => {
    setConfirmModalVisible(false);
    setPendingAction(null);
    setPendingPayload(null);
  }, []);

  const navigateToDashboard = useCallback(() => {
    navigate(ROUTES.ADMIN_DASHBOARD || '/admin');
  }, [navigate]);

  const navigateToUsers = useCallback(() => {
    navigate(ROUTES.ADMIN_USERS || '/admin/users');
  }, [navigate]);

  const navigateToAuditLogs = useCallback(() => {
    navigate(ROUTES.ADMIN_AUDIT_LOGS || '/admin/audit-logs');
  }, [navigate]);

  const submitCreateCategory = useCallback(async () => {
    try {
      const values = await createForm.validateFields();
      
      if (values.min_bmi < 0) {
        messageApi.error('Minimum BMI must be at least 0');
        return;
      }
      
      if (values.max_bmi !== undefined && values.max_bmi !== null && values.max_bmi <= 0) {
        messageApi.error('Maximum BMI must be greater than 0');
        return;
      }

      const payload = {
        category_name: values.category_name,
        min_bmi: values.min_bmi,
        max_bmi: values.max_bmi,
        description: values.description,
        color_code: values.color_code,
        health_risk: values.health_risk,
        recommendations: values.recommendations,
      };

      setPendingAction('create');
      setPendingPayload(payload);
      openConfirmModal();
    } catch (error) {
      messageApi.error('Validation failed. Please check your inputs.');
    }
  }, [createForm, messageApi, openConfirmModal]);

  const submitEditCategory = useCallback(async () => {
    try {
      const values = await editForm.validateFields();
      
      if (values.min_bmi < 0) {
        messageApi.error('Minimum BMI must be at least 0');
        return;
      }

      const payload = {
        category_name: values.category_name,
        min_bmi: values.min_bmi,
        max_bmi: values.max_bmi,
        description: values.description,
        color_code: values.color_code,
        health_risk: values.health_risk,
        recommendations: values.recommendations,
      };

      setPendingAction('update');
      setPendingPayload(payload);
      openConfirmModal();
    } catch (error) {
      messageApi.error('Validation failed. Please check your inputs.');
    }
  }, [editForm, messageApi, openConfirmModal]);

  const deleteCategory = useCallback((record: BmiCategory) => {
    setSelectedCategory(record);
    setPendingAction('delete');
    openConfirmModal();
  }, [openConfirmModal]);

  const confirmAndExecute = useCallback(async () => {
    try {
      if (pendingAction === 'create' && pendingPayload) {
        await BmiService.createCategory(pendingPayload);
        messageApi.success('Category created successfully!');
        setConfirmModalVisible(false);
        setCreateModalVisible(false);
        createForm.resetFields();
        await fetchCategories({ limit: 50, offset: 0 });
      } else if (pendingAction === 'update' && pendingPayload && selectedCategory) {
        await BmiService.updateCategory(selectedCategory.category_id, pendingPayload);
        messageApi.success('Category updated successfully!');
        setConfirmModalVisible(false);
        setEditModalVisible(false);
        setSelectedCategory(null);
        editForm.resetFields();
        await fetchCategories({ limit: 50, offset: 0 });
      } else if (pendingAction === 'delete' && selectedCategory) {
        await BmiService.deleteCategory(selectedCategory.category_id);
        messageApi.success('Category deleted successfully!');
        setConfirmModalVisible(false);
        setSelectedCategory(null);
        await fetchCategories({ limit: 50, offset: 0 });
      }
    } catch (error) {
      const { message: errorMessage } = parseError(error);
      messageApi.error(errorMessage);
    } finally {
      setPendingAction(null);
      setPendingPayload(null);
    }
  }, [pendingAction, pendingPayload, selectedCategory, messageApi, createForm, editForm, fetchCategories]);

  const columns = useMemo(() => [
    {
      title: 'Category Name',
      dataIndex: 'category_name',
      key: 'category_name',
      sorter: (a: BmiCategory, b: BmiCategory) => a.category_name.localeCompare(b.category_name),
    },
    {
      title: 'Min BMI',
      dataIndex: 'min_bmi',
      key: 'min_bmi',
      sorter: (a: BmiCategory, b: BmiCategory) => a.min_bmi - b.min_bmi,
    },
    {
      title: 'Max BMI',
      dataIndex: 'max_bmi',
      key: 'max_bmi',
      render: (value: number | null) => value !== null ? value : '∞',
    },
    {
      title: 'Color',
      dataIndex: 'color_code',
      key: 'color_code',
      render: (color: string | null) => color ? (
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <div style={{ width: '24px', height: '24px', backgroundColor: color, border: '1px solid #d9d9d9', borderRadius: '4px' }} />
          <span>{color}</span>
        </div>
      ) : null,
    },
    {
      title: 'Health Risk',
      dataIndex: 'health_risk',
      key: 'health_risk',
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: BmiCategory) => (
        <Space size="small">
          <Button type="link" size="small" onClick={() => openEditModal(record)}>
            Edit
          </Button>
          <Button type="link" danger size="small" onClick={() => deleteCategory(record)}>
            Delete
          </Button>
        </Space>
      ),
    },
  ], [openEditModal, deleteCategory]);

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

  return (
    <div style={rootStyle}>
      {contextHolder}
      
      <div style={{ padding: '24px 24px 0 24px' }}>
        <Breadcrumb
          style={{ marginBottom: '16px' }}
          items={[
            { title: 'Admin' },
            { title: 'BMI Categories' },
          ]}
        />
        
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
          <Typography.Title level={2} style={{ margin: 0 }}>
            BMI Categories
          </Typography.Title>
          
          <Space>
            <Button type="text" onClick={navigateToDashboard}>
              Dashboard
            </Button>
            <Button type="text" onClick={navigateToUsers}>
              Users
            </Button>
            <Button type="text" onClick={navigateToAuditLogs}>
              Audit Logs
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
              Add Category
            </Button>
          </Space>
        </div>
      </div>

      <Card style={{ margin: '0 24px 24px 24px' }}>
        {categoriesError && (
          <Alert
            message="Error"
            description={parseError(categoriesError).message}
            type="error"
            showIcon
            style={{ marginBottom: '16px' }}
          />
        )}
        <Table
          rowKey="category_id"
          dataSource={categories}
          columns={columns}
          loading={loading}
          pagination={{ pageSize: 10 }}
        />
      </Card>

      <Modal
        title="Add BMI Category"
        open={createModalVisible}
        onCancel={closeCreateModal}
        footer={null}
        width={600}
      >
        <Form form={createForm} layout="vertical" onFinish={submitCreateCategory}>
          <Form.Item
            name="category_name"
            label="Category Name"
            rules={[{ required: true, message: 'Please enter category name' }]}
          >
            <Input placeholder="e.g. Normal Weight" />
          </Form.Item>

          <div style={{ display: 'flex', gap: '16px' }}>
            <Form.Item
              name="min_bmi"
              label="Min BMI"
              rules={[{ required: true, message: 'Please enter minimum BMI' }]}
              style={{ flex: 1 }}
            >
              <InputNumber
                min={0}
                max={100}
                step={0.1}
                placeholder="e.g. 18.5"
                style={{ width: '100%' }}
              />
            </Form.Item>

            <Form.Item
              name="max_bmi"
              label="Max BMI"
              style={{ flex: 1 }}
            >
              <InputNumber
                min={0}
                max={100}
                step={0.1}
                placeholder="e.g. 24.9 (leave empty for no upper limit)"
                style={{ width: '100%' }}
              />
            </Form.Item>
          </div>

          <Form.Item name="color_code" label="Color Code">
            <Input placeholder="#4CAF50" />
          </Form.Item>

          <Form.Item name="health_risk" label="Health Risk">
            <Input placeholder="e.g. Low risk" />
          </Form.Item>

          <Form.Item name="description" label="Description">
            <Input.TextArea rows={3} placeholder="Category description" />
          </Form.Item>

          <Form.Item name="recommendations" label="Recommendations">
            <Input.TextArea rows={3} placeholder="Health recommendations for this category" />
          </Form.Item>

          <Button type="primary" htmlType="submit" block>
            Create Category
          </Button>
        </Form>
      </Modal>

      <Modal
        title="Edit BMI Category"
        open={editModalVisible}
        onCancel={closeEditModal}
        footer={null}
        width={600}
      >
        <Form form={editForm} layout="vertical" onFinish={submitEditCategory}>
          <Form.Item
            name="category_name"
            label="Category Name"
            rules={[{ required: true, message: 'Please enter category name' }]}
          >
            <Input placeholder="e.g. Normal Weight" />
          </Form.Item>

          <div style={{ display: 'flex', gap: '16px' }}>
            <Form.Item
              name="min_bmi"
              label="Min BMI"
              rules={[{ required: true, message: 'Please enter minimum BMI' }]}
              style={{ flex: 1 }}
            >
              <InputNumber
                min={0}
                max={100}
                step={0.1}
                style={{ width: '100%' }}
              />
            </Form.Item>

            <Form.Item
              name="max_bmi"
              label="Max BMI"
              style={{ flex: 1 }}
            >
              <InputNumber
                min={0}
                max={100}
                step={0.1}
                style={{ width: '100%' }}
              />
            </Form.Item>
          </div>

          <Form.Item name="color_code" label="Color Code">
            <Input placeholder="#4CAF50" />
          </Form.Item>

          <Form.Item name="health_risk" label="Health Risk">
            <Input placeholder="e.g. Low risk" />
          </Form.Item>

          <Form.Item name="description" label="Description">
            <Input.TextArea rows={3} />
          </Form.Item>

          <Form.Item name="recommendations" label="Recommendations">
            <Input.TextArea rows={3} />
          </Form.Item>

          <Button type="primary" htmlType="submit" block>
            Update Category
          </Button>
        </Form>
      </Modal>

      <Modal
        title="Confirm Changes"
        open={confirmModalVisible}
        onCancel={closeConfirmModal}
        width={420}
        footer={[
          <Button key="cancel" onClick={closeConfirmModal} style={{ marginRight: '8px' }}>
            Cancel
          </Button>,
          <Button key="confirm" type="primary" onClick={confirmAndExecute}>
            Confirm
          </Button>,
        ]}
      >
        <Typography.Text>
          Are you sure you want to save these changes? Please verify that BMI ranges do not overlap with existing categories.
        </Typography.Text>
      </Modal>
    </div>
  );
};

export default AdminCategoriesPage;