import { useState, useMemo, useEffect, useCallback } from 'react';
import { Card, Avatar, Typography, Tag, Space, Button, Descriptions, Row, Col, Statistic, Tabs, Table, Select, Modal, Form, Input, message } from 'antd';
import { UserOutlined, EditOutlined, StopOutlined, KeyOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate, useParams } from 'react-router-dom';
import { useAppContext } from '../store/AppContext';

interface MemberDetailResponse {
  id: string;
  user_id: string;
  membership_number: string;
  membership_date: string;
  membership_expiry: string | null;
  borrowing_limit: number;
  account_standing: string;
  created_at: string;
  updated_at: string;
  user?: MemberUserResponse;
}

interface MemberUserResponse {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
  phone: string | null;
  address: string | null;
  role: string;
  status: string;
  created_at: string;
  updated_at: string;
}

interface LoanResponse {
  id: string;
  book_id: string;
  member_id: string;
  librarian_id: string | null;
  checkout_date: string;
  due_date: string;
  return_date: string | null;
  renewal_count: number;
  status: string;
  notes: string | null;
  created_at: string;
  updated_at: string;
}

interface ReservationResponse {
  id: string;
  book_id: string;
  member_id: string;
  reservation_date: string;
  expiry_date: string | null;
  queue_position: number;
  status: string;
  notified_date: string | null;
  created_at: string;
  updated_at: string;
}

interface FineResponse {
  id: string;
  member_id: string;
  loan_id: string | null;
  amount: number;
  amount_paid: number;
  reason: string;
  description: string | null;
  status: string;
  assessed_date: string;
  due_date: string | null;
  waived_by: string | null;
  waived_date: string | null;
  waived_reason: string | null;
  created_at: string;
  updated_at: string;
}

interface ReviewResponse {
  id: string;
  book_id: string;
  member_id: string;
  rating: number;
  review_text: string | null;
  status: string;
  review_date: string;
  created_at: string;
  updated_at: string;
}

export default function MemberDetailPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { memberId } = useParams<{ memberId: string }>();
  const { currentUser } = useAppContext();

  const [memberDetail, setMemberDetail] = useState<MemberDetailResponse | null>(null);
  const [memberUser, setMemberUser] = useState<MemberUserResponse | null>(null);
  const [memberLoans, setMemberLoans] = useState<LoanResponse[]>([]);
  const [loanHistory, setLoanHistory] = useState<LoanResponse[]>([]);
  const [memberReservations, setMemberReservations] = useState<ReservationResponse[]>([]);
  const [memberFines, setMemberFines] = useState<FineResponse[]>([]);
  const [memberReviews, setMemberReviews] = useState<ReviewResponse[]>([]);
  const [activeTab, setActiveTab] = useState<string>('current_loans');
  const [loading, setLoading] = useState<boolean>(true);
  const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
  const [loanHistoryStatusFilter, setLoanHistoryStatusFilter] = useState<string>('');
  const [selectedLoanId, setSelectedLoanId] = useState<string>('');
  const [selectedReservationId, setSelectedReservationId] = useState<string>('');
  const [selectedFineId, setSelectedFineId] = useState<string>('');

  const [form] = Form.useForm();

  const totalBooksBorrowed = useMemo(() => loanHistory.length, [loanHistory]);
  const currentLoansCount = useMemo(() => memberLoans.filter(l => l.status === 'ACTIVE' || l.status === 'OVERDUE').length, [memberLoans]);
  const activeReservationsCount = useMemo(() => memberReservations.filter(r => r.status === 'PENDING' || r.status === 'READY').length, [memberReservations]);
  const outstandingFinesTotal = useMemo(() => memberFines.filter(f => f.status === 'UNPAID' || f.status === 'PARTIAL').reduce((sum, f) => sum + (f.amount - f.amount_paid), 0), [memberFines]);
  const memberFullName = useMemo(() => memberUser ? `${memberUser.first_name} ${memberUser.last_name}` : '', [memberUser]);

  const filteredLoanHistory = useMemo(() => {
    if (!loanHistoryStatusFilter) return loanHistory;
    return loanHistory.filter(loan => loan.status === loanHistoryStatusFilter);
  }, [loanHistory, loanHistoryStatusFilter]);

  const fetchMemberDetail = useCallback(async () => {
    if (!memberId) return;
    try {
      const result = await request<MemberDetailResponse>({
        method: 'GET',
        path: '/users/members/{member_id}/details',
        pathParams: { member_id: memberId }
      });
      setMemberDetail(result.data);
    } catch (error) {
      messageApi.error('Failed to load member details');
    }
  }, [memberId, messageApi]);

  const fetchMemberUser = useCallback(async (userId: string) => {
    try {
      const result = await request<MemberUserResponse>({
        method: 'GET',
        path: '/users/{user_id}',
        pathParams: { user_id: userId }
      });
      setMemberUser(result.data);
    } catch (error) {
      messageApi.error('Failed to load user details');
    }
  }, [messageApi]);

  const fetchMemberLoans = useCallback(async () => {
    if (!memberId) return;
    try {
      const result = await request<LoanResponse[]>({
        method: 'GET',
        path: '/circulation/loans',
        query: { member_id: memberId, loan_status: 'ACTIVE', limit: 50 }
      });
      setMemberLoans(result.data);
    } catch (error) {
      messageApi.error('Failed to load current loans');
    }
  }, [memberId, messageApi]);

  const fetchLoanHistory = useCallback(async () => {
    if (!memberId) return;
    try {
      const result = await request<LoanResponse[]>({
        method: 'GET',
        path: '/circulation/loans',
        query: { member_id: memberId, limit: 100 }
      });
      setLoanHistory(result.data);
    } catch (error) {
      messageApi.error('Failed to load loan history');
    }
  }, [memberId, messageApi]);

  const fetchMemberReservations = useCallback(async () => {
    if (!memberId) return;
    try {
      const result = await request<ReservationResponse[]>({
        method: 'GET',
        path: '/circulation/reservations',
        query: { member_id: memberId, limit: 50 }
      });
      setMemberReservations(result.data);
    } catch (error) {
      messageApi.error('Failed to load reservations');
    }
  }, [memberId, messageApi]);

  const fetchMemberFines = useCallback(async () => {
    if (!memberId) return;
    try {
      const result = await request<FineResponse[]>({
        method: 'GET',
        path: '/fines/',
        query: { member_id: memberId, limit: 50 }
      });
      setMemberFines(result.data);
    } catch (error) {
      messageApi.error('Failed to load fines');
    }
  }, [memberId, messageApi]);

  const fetchMemberReviews = useCallback(async () => {
    if (!memberId) return;
    try {
      const result = await request<ReviewResponse[]>({
        method: 'GET',
        path: '/engagement/reviews',
        query: { member_id: memberId, limit: 50 }
      });
      setMemberReviews(result.data);
    } catch (error) {
      messageApi.error('Failed to load reviews');
    }
  }, [memberId, messageApi]);

  useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      await fetchMemberDetail();
      await fetchMemberLoans();
      await fetchLoanHistory();
      await fetchMemberReservations();
      await fetchMemberFines();
      await fetchMemberReviews();
      setLoading(false);
    };
    loadData();
  }, [fetchMemberDetail, fetchMemberLoans, fetchLoanHistory, fetchMemberReservations, fetchMemberFines, fetchMemberReviews]);

  useEffect(() => {
    if (memberDetail?.user_id) {
      fetchMemberUser(memberDetail.user_id);
    }
  }, [memberDetail, fetchMemberUser]);

  const editMember = useCallback(() => {
    if (memberUser) {
      form.setFieldsValue({
        first_name: memberUser.first_name,
        last_name: memberUser.last_name,
        email: memberUser.email,
        phone: memberUser.phone,
        address: memberUser.address
      });
    }
    setEditModalVisible(true);
  }, [memberUser, form]);

  const handleEditSubmit = useCallback(async () => {
    try {
      const values = await form.validateFields();
      if (!memberDetail?.user_id) return;

      await request<MemberUserResponse>({
        method: 'PUT',
        path: '/users/{user_id}',
        pathParams: { user_id: memberDetail.user_id },
        body: {
          first_name: values.first_name,
          last_name: values.last_name,
          email: values.email,
          phone: values.phone,
          address: values.address
        }
      });

      messageApi.success('Member updated successfully');
      setEditModalVisible(false);
      form.resetFields();
      await fetchMemberUser(memberDetail.user_id);
    } catch (error) {
      messageApi.error('Failed to update member');
    }
  }, [form, memberDetail, messageApi, fetchMemberUser]);

  const suspendMember = useCallback(() => {
    if (!memberId || !memberDetail) return;

    const isSuspended = memberDetail.account_standing === 'SUSPENDED';
    const newStanding = isSuspended ? 'GOOD' : 'SUSPENDED';
    const confirmMessage = isSuspended ? 'Are you sure you want to reactivate this member?' : 'Are you sure you want to suspend this member?';

    Modal.confirm({
      title: 'Confirm',
      content: confirmMessage,
      onOk: async () => {
        try {
          await request<MemberDetailResponse>({
            method: 'PUT',
            path: '/users/members/{member_id}',
            pathParams: { member_id: memberId },
            body: { account_standing: newStanding }
          });

          messageApi.success(isSuspended ? 'Member reactivated' : 'Member suspended');
          await fetchMemberDetail();
        } catch (error) {
          messageApi.error(isSuspended ? 'Failed to reactivate member' : 'Failed to suspend member');
        }
      }
    });
  }, [memberId, memberDetail, messageApi, fetchMemberDetail]);

  const resetPassword = useCallback(() => {
    if (!memberDetail?.user_id) return;

    Modal.confirm({
      title: 'Confirm',
      content: 'Are you sure you want to reset this member\'s password?',
      onOk: async () => {
        try {
          await request<MemberUserResponse>({
            method: 'PUT',
            path: '/users/{user_id}',
            pathParams: { user_id: memberDetail.user_id },
            body: { password: 'TempPass123!' }
          });

          messageApi.success('Password has been reset. Member will receive notification.');
        } catch (error) {
          messageApi.error('Failed to reset password');
        }
      }
    });
  }, [memberDetail, messageApi]);

  const renewLoan = useCallback((loanId: string) => {
    Modal.confirm({
      title: 'Confirm',
      content: 'Are you sure you want to renew this loan?',
      onOk: async () => {
        try {
          await request<LoanResponse>({
            method: 'POST',
            path: '/circulation/loans/{loan_id}/renew',
            pathParams: { loan_id: loanId }
          });

          messageApi.success('Loan renewed successfully');
          await fetchMemberLoans();
          await fetchLoanHistory();
        } catch (error) {
          messageApi.error('Failed to renew loan');
        }
      }
    });
  }, [messageApi, fetchMemberLoans, fetchLoanHistory]);

  const cancelReservation = useCallback((reservationId: string) => {
    Modal.confirm({
      title: 'Confirm',
      content: 'Are you sure you want to cancel this reservation?',
      onOk: async () => {
        try {
          await request<ReservationResponse>({
            method: 'POST',
            path: '/circulation/reservations/{reservation_id}/cancel',
            pathParams: { reservation_id: reservationId }
          });

          messageApi.success('Reservation cancelled');
          await fetchMemberReservations();
        } catch (error) {
          messageApi.error('Failed to cancel reservation');
        }
      }
    });
  }, [messageApi, fetchMemberReservations]);

  const waiveFine = useCallback((fineId: string) => {
    if (!currentUser?.id) return;

    Modal.confirm({
      title: 'Confirm',
      content: 'Are you sure you want to waive this fine?',
      onOk: async () => {
        try {
          await request<FineResponse>({
            method: 'POST',
            path: '/fines/{fine_id}/waive',
            pathParams: { fine_id: fineId },
            query: { waived_by: currentUser.id, waived_reason: 'Staff waiver' }
          });

          messageApi.success('Fine waived successfully');
          await fetchMemberFines();
        } catch (error) {
          messageApi.error('Failed to waive fine');
        }
      }
    });
  }, [currentUser, messageApi, fetchMemberFines]);

  const loansColumns = useMemo(() => [
    { title: 'Book ID', dataIndex: 'book_id', key: 'book_id' },
    { title: 'Checkout Date', dataIndex: 'checkout_date', key: 'checkout_date', render: (date: string) => new Date(date).toLocaleDateString() },
    { title: 'Due Date', dataIndex: 'due_date', key: 'due_date', render: (date: string) => new Date(date).toLocaleDateString() },
    { title: 'Renewals', dataIndex: 'renewal_count', key: 'renewal_count' },
    { title: 'Status', dataIndex: 'status', key: 'status', render: (status: string) => <Tag color={status === 'ACTIVE' ? 'green' : status === 'OVERDUE' ? 'red' : 'default'}>{status}</Tag> },
    {
      title: 'Actions',
      key: 'actions',
      render: (record: LoanResponse) => (
        <Button type="link" size="small" onClick={() => renewLoan(record.id)}>Renew</Button>
      )
    }
  ], [renewLoan]);

  const loanHistoryColumns = useMemo(() => [
    { title: 'Book ID', dataIndex: 'book_id', key: 'book_id' },
    { title: 'Checkout Date', dataIndex: 'checkout_date', key: 'checkout_date', render: (date: string) => new Date(date).toLocaleDateString() },
    { title: 'Due Date', dataIndex: 'due_date', key: 'due_date', render: (date: string) => new Date(date).toLocaleDateString() },
    { title: 'Return Date', dataIndex: 'return_date', key: 'return_date', render: (date: string | null) => date ? new Date(date).toLocaleDateString() : '-' },
    { title: 'Renewals', dataIndex: 'renewal_count', key: 'renewal_count' },
    { title: 'Status', dataIndex: 'status', key: 'status', render: (status: string) => <Tag color={status === 'RETURNED' ? 'green' : status === 'OVERDUE' ? 'red' : 'default'}>{status}</Tag> }
  ], []);

  const reservationsColumns = useMemo(() => [
    { title: 'Book ID', dataIndex: 'book_id', key: 'book_id' },
    { title: 'Reservation Date', dataIndex: 'reservation_date', key: 'reservation_date', render: (date: string) => new Date(date).toLocaleDateString() },
    { title: 'Queue Position', dataIndex: 'queue_position', key: 'queue_position' },
    { title: 'Status', dataIndex: 'status', key: 'status', render: (status: string) => <Tag color={status === 'READY' ? 'green' : status === 'PENDING' ? 'blue' : 'default'}>{status}</Tag> },
    {
      title: 'Actions',
      key: 'actions',
      render: (record: ReservationResponse) => (
        <Button type="link" size="small" danger onClick={() => cancelReservation(record.id)}>Cancel</Button>
      )
    }
  ], [cancelReservation]);

  const finesColumns = useMemo(() => [
    { title: 'Reason', dataIndex: 'reason', key: 'reason' },
    { title: 'Amount', dataIndex: 'amount', key: 'amount', render: (amount: number) => `$${amount.toFixed(2)}` },
    { title: 'Paid', dataIndex: 'amount_paid', key: 'amount_paid', render: (amount: number) => `$${amount.toFixed(2)}` },
    { title: 'Status', dataIndex: 'status', key: 'status', render: (status: string) => <Tag color={status === 'PAID' ? 'green' : status === 'UNPAID' ? 'red' : 'orange'}>{status}</Tag> },
    { title: 'Assessed Date', dataIndex: 'assessed_date', key: 'assessed_date', render: (date: string) => new Date(date).toLocaleDateString() },
    {
      title: 'Actions',
      key: 'actions',
      render: (record: FineResponse) => (
        record.status !== 'PAID' && record.status !== 'WAIVED' ? (
          <Button type="link" size="small" onClick={() => waiveFine(record.id)}>Waive</Button>
        ) : null
      )
    }
  ], [waiveFine]);

  const reviewsColumns = useMemo(() => [
    { title: 'Book ID', dataIndex: 'book_id', key: 'book_id' },
    { title: 'Rating', dataIndex: 'rating', key: 'rating', render: (rating: number) => `${rating}/5` },
    { title: 'Review', dataIndex: 'review_text', key: 'review_text', ellipsis: true },
    { title: 'Status', dataIndex: 'status', key: 'status', render: (status: string) => <Tag>{status}</Tag> },
    { title: 'Date', dataIndex: 'review_date', key: 'review_date', render: (date: string) => new Date(date).toLocaleDateString() }
  ], []);

  const getStatusColor = (standing: string) => {
    switch (standing) {
      case 'GOOD': return 'green';
      case 'WARNING': return 'orange';
      case 'SUSPENDED': return 'red';
      case 'BLOCKED': return 'red';
      default: return 'default';
    }
  };

  const tabItems = [
    {
      key: 'current_loans',
      label: 'Current Loans',
      children: (
        <div>
          <Table
            dataSource={memberLoans}
            columns={loansColumns}
            rowKey="id"
            pagination={{ pageSize: 10 }}
            size="middle"
            loading={loading}
          />
        </div>
      )
    },
    {
      key: 'borrowing_history',
      label: 'Borrowing History',
      children: (
        <div>
          <Select
            value={loanHistoryStatusFilter}
            onChange={setLoanHistoryStatusFilter}
            allowClear
            placeholder="All Statuses"
            style={{ width: 200, marginBottom: 16 }}
            options={[
              { label: 'Active', value: 'ACTIVE' },
              { label: 'Returned', value: 'RETURNED' },
              { label: 'Overdue', value: 'OVERDUE' },
              { label: 'Lost', value: 'LOST' }
            ]}
          />
          <Table
            dataSource={filteredLoanHistory}
            columns={loanHistoryColumns}
            rowKey="id"
            pagination={{ pageSize: 10 }}
            size="middle"
            loading={loading}
          />
        </div>
      )
    },
    {
      key: 'reservations',
      label: 'Active Reservations',
      children: (
        <Table
          dataSource={memberReservations}
          columns={reservationsColumns}
          rowKey="id"
          pagination={{ pageSize: 10 }}
          size="middle"
          loading={loading}
        />
      )
    },
    {
      key: 'fines',
      label: 'Fines',
      children: (
        <Table
          dataSource={memberFines}
          columns={finesColumns}
          rowKey="id"
          pagination={{ pageSize: 10 }}
          size="middle"
          loading={loading}
        />
      )
    },
    {
      key: 'reviews',
      label: 'Reviews',
      children: (
        <Table
          dataSource={memberReviews}
          columns={reviewsColumns}
          rowKey="id"
          pagination={{ pageSize: 10 }}
          size="middle"
          loading={loading}
        />
      )
    }
  ];

  return (
    <div style={{ minHeight: '100vh', height: '100%', width: '100%', display: 'flex', flexDirection: 'column', padding: '24px', background: '#f5f5f5' }}>
      {contextHolder}
      
      <div style={{ marginBottom: '24px' }}>
        <Button type="link" size="small" style={{ marginBottom: '16px', paddingLeft: '0' }} onClick={() => navigate('/admin/members')}>
          ← Back to Members
        </Button>
        
        <Card bordered={false} style={{ borderRadius: '8px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '16px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
              <Avatar size={72} icon={<UserOutlined />} />
              <div>
                <Typography.Title level={3} style={{ marginBottom: '4px' }}>{memberFullName}</Typography.Title>
                <Typography.Text type="secondary" style={{ display: 'block' }}>
                  {memberDetail?.membership_number}
                </Typography.Text>
                {memberDetail && (
                  <Tag color={getStatusColor(memberDetail.account_standing)} style={{ marginTop: '8px' }}>
                    {memberDetail.account_standing}
                  </Tag>
                )}
              </div>
            </div>
            
            <Space wrap>
              <Button type="primary" icon={<EditOutlined />} onClick={editMember}>Edit</Button>
              <Button type="default" danger icon={<StopOutlined />} onClick={suspendMember}>
                {memberDetail?.account_standing === 'SUSPENDED' ? 'Reactivate' : 'Suspend'}
              </Button>
              <Button type="default" icon={<KeyOutlined />} onClick={resetPassword}>Reset Password</Button>
            </Space>
          </div>
        </Card>
      </div>

      <Card title="Profile Information" bordered={false} style={{ borderRadius: '8px', marginBottom: '24px' }}>
        <Descriptions column={3} bordered size="middle">
          <Descriptions.Item label="Email">{memberUser?.email}</Descriptions.Item>
          <Descriptions.Item label="Phone">{memberUser?.phone || '-'}</Descriptions.Item>
          <Descriptions.Item label="Address">{memberUser?.address || '-'}</Descriptions.Item>
          <Descriptions.Item label="Join Date">
            {memberDetail?.membership_date ? new Date(memberDetail.membership_date).toLocaleDateString() : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="Membership Expiry">
            {memberDetail?.membership_expiry ? new Date(memberDetail.membership_expiry).toLocaleDateString() : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="Borrowing Limit">{memberDetail?.borrowing_limit}</Descriptions.Item>
        </Descriptions>
      </Card>

      <div style={{ marginBottom: '24px' }}>
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} md={6}>
            <Card bordered={false} style={{ borderRadius: '8px', textAlign: 'center' }}>
              <Statistic title="Total Books Borrowed" value={totalBooksBorrowed} valueStyle={{ color: '#1677ff' }} />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card bordered={false} style={{ borderRadius: '8px', textAlign: 'center' }}>
              <Statistic title="Current Loans" value={currentLoansCount} valueStyle={{ color: '#52c41a' }} />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card bordered={false} style={{ borderRadius: '8px', textAlign: 'center' }}>
              <Statistic title="Active Reservations" value={activeReservationsCount} valueStyle={{ color: '#faad14' }} />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card bordered={false} style={{ borderRadius: '8px', textAlign: 'center' }}>
              <Statistic title="Outstanding Fines" value={outstandingFinesTotal} prefix="$" precision={2} valueStyle={{ color: '#ff4d4f' }} />
            </Card>
          </Col>
        </Row>
      </div>

      <Card bordered={false} style={{ borderRadius: '8px' }}>
        <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} />
      </Card>

      <Modal
        title="Edit Member"
        open={editModalVisible}
        onOk={handleEditSubmit}
        onCancel={() => {
          setEditModalVisible(false);
          form.resetFields();
        }}
        width={640}
        okText="Save"
        cancelText="Cancel"
      >
        <Form form={form} layout="vertical">
          <Form.Item label="First Name" name="first_name" rules={[{ required: true, message: 'First name is required' }]}>
            <Input placeholder="Enter first name" />
          </Form.Item>
          <Form.Item label="Last Name" name="last_name" rules={[{ required: true, message: 'Last name is required' }]}>
            <Input placeholder="Enter last name" />
          </Form.Item>
          <Form.Item label="Email" name="email" rules={[{ required: true, type: 'email', message: 'Valid email is required' }]}>
            <Input placeholder="Enter email" />
          </Form.Item>
          <Form.Item label="Phone" name="phone">
            <Input placeholder="Enter phone" />
          </Form.Item>
          <Form.Item label="Address" name="address">
            <Input.TextArea placeholder="Enter address" rows={3} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}