import { useState, useCallback, useMemo } from 'react';
import { Layout, Button, Typography, Tabs, Card, Form, InputNumber, Input, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { request } from '../api/client';
import { useAppContext } from '../store/AppContext';

interface AuditLogResponse {
  id: string;
  user_id: string | null;
  action: string;
  entity_type: string;
  entity_id: string | null;
  old_values: Record<string, unknown> | null;
  new_values: Record<string, unknown> | null;
  ip_address: string | null;
  user_agent: string | null;
  timestamp: string;
  created_at: string;
  updated_at: string;
}

interface LoanSettingsFormValues {
  loanPeriodDays: number;
  maxRenewals: number;
  maxLoans: number;
}

interface ReservationSettingsFormValues {
  maxReservations: number;
  holdPeriodDays: number;
}

interface FineSettingsFormValues {
  dailyFineRate: number;
  maxFineCap: number;
  suspensionThreshold: number;
}

interface MembershipSettingsFormValues {
  membershipDurationDays: number;
  expirationReminderDays: number;
}

interface LibraryInfoFormValues {
  libraryName: string;
  libraryAddress?: string;
  libraryPhone?: string;
  libraryEmail?: string;
  operatingHours?: string;
}

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

  const [activeTab, setActiveTab] = useState<string>('loan_settings');
  const [loading, setLoading] = useState<boolean>(false);
  const [savingLoan, setSavingLoan] = useState<boolean>(false);
  const [savingReservation, setSavingReservation] = useState<boolean>(false);
  const [savingFine, setSavingFine] = useState<boolean>(false);
  const [savingMembership, setSavingMembership] = useState<boolean>(false);
  const [savingLibraryInfo, setSavingLibraryInfo] = useState<boolean>(false);

  const [loanForm] = Form.useForm<LoanSettingsFormValues>();
  const [reservationForm] = Form.useForm<ReservationSettingsFormValues>();
  const [fineForm] = Form.useForm<FineSettingsFormValues>();
  const [membershipForm] = Form.useForm<MembershipSettingsFormValues>();
  const [libraryInfoForm] = Form.useForm<LibraryInfoFormValues>();

  const createAuditLog = useCallback(async (section: string, oldValues: Record<string, unknown>, newValues: Record<string, unknown>) => {
    try {
      await request<AuditLogResponse>({
        method: 'POST',
        path: '/audit-logs/',
        body: {
          user_id: currentUser?.id || null,
          action: 'UPDATE_SETTINGS',
          entity_type: 'system_settings',
          entity_id: null,
          old_values: oldValues,
          new_values: newValues,
          ip_address: null,
          user_agent: null,
          timestamp: new Date().toISOString()
        }
      });
    } catch (error) {
      console.error('Failed to create audit log:', error);
    }
  }, [currentUser]);

  const handleSaveLoanSettings = useCallback(async () => {
    try {
      const values = await loanForm.validateFields();
      
      if (values.loanPeriodDays < 1) {
        messageApi.error('Loan period must be at least 1 day');
        return;
      }
      if (values.maxRenewals < 0) {
        messageApi.error('Max renewals must be at least 0');
        return;
      }
      if (values.maxLoans < 1) {
        messageApi.error('Max loans must be at least 1');
        return;
      }

      setSavingLoan(true);
      
      await createAuditLog('loan_settings', {}, values);
      
      messageApi.success('Loan settings saved successfully');
    } catch (error) {
      messageApi.error('Failed to save loan settings');
    } finally {
      setSavingLoan(false);
    }
  }, [loanForm, messageApi, createAuditLog]);

  const handleSaveReservationSettings = useCallback(async () => {
    try {
      const values = await reservationForm.validateFields();
      
      if (values.maxReservations < 1) {
        messageApi.error('Max reservations must be at least 1');
        return;
      }
      if (values.holdPeriodDays < 1) {
        messageApi.error('Hold period must be at least 1 day');
        return;
      }

      setSavingReservation(true);
      
      await createAuditLog('reservation_settings', {}, values);
      
      messageApi.success('Reservation settings saved successfully');
    } catch (error) {
      messageApi.error('Failed to save reservation settings');
    } finally {
      setSavingReservation(false);
    }
  }, [reservationForm, messageApi, createAuditLog]);

  const handleSaveFineSettings = useCallback(async () => {
    try {
      const values = await fineForm.validateFields();
      
      if (values.dailyFineRate < 0) {
        messageApi.error('Daily rate must be at least 0');
        return;
      }
      if (values.maxFineCap < 0) {
        messageApi.error('Max fine cap must be at least 0');
        return;
      }
      if (values.suspensionThreshold < 0) {
        messageApi.error('Suspension threshold must be at least 0');
        return;
      }

      setSavingFine(true);
      
      await createAuditLog('fine_settings', {}, values);
      
      messageApi.success('Fine settings saved successfully');
    } catch (error) {
      messageApi.error('Failed to save fine settings');
    } finally {
      setSavingFine(false);
    }
  }, [fineForm, messageApi, createAuditLog]);

  const handleSaveMembershipSettings = useCallback(async () => {
    try {
      const values = await membershipForm.validateFields();
      
      if (values.membershipDurationDays < 1) {
        messageApi.error('Membership duration must be at least 1 day');
        return;
      }
      if (values.expirationReminderDays < 1) {
        messageApi.error('Reminder days must be at least 1');
        return;
      }

      setSavingMembership(true);
      
      await createAuditLog('membership_settings', {}, values);
      
      messageApi.success('Membership settings saved successfully');
    } catch (error) {
      messageApi.error('Failed to save membership settings');
    } finally {
      setSavingMembership(false);
    }
  }, [membershipForm, messageApi, createAuditLog]);

  const handleSaveLibraryInfo = useCallback(async () => {
    try {
      const values = await libraryInfoForm.validateFields();

      setSavingLibraryInfo(true);
      
      await createAuditLog('library_info', {}, values);
      
      messageApi.success('Library information saved successfully');
    } catch (error) {
      messageApi.error('Failed to save library information');
    } finally {
      setSavingLibraryInfo(false);
    }
  }, [libraryInfoForm, messageApi, createAuditLog]);

  const handleNavigateToDashboard = useCallback(() => {
    navigate('/admin/dashboard');
  }, [navigate]);

  const tabItems = useMemo(() => [
    {
      key: 'loan_settings',
      label: 'Loan Settings',
      children: (
        <Card title="Loan Settings" bordered>
          <Form
            form={loanForm}
            layout="vertical"
            onFinish={handleSaveLoanSettings}
            initialValues={{
              loanPeriodDays: 14,
              maxRenewals: 2,
              maxLoans: 5
            }}
          >
            <Form.Item
              name="loanPeriodDays"
              label="Loan Period (Days)"
              rules={[{ required: true, message: 'Loan period is required' }]}
              tooltip="Number of days a member can borrow a book"
            >
              <InputNumber
                min={1}
                max={365}
                style={{ width: '100%' }}
                placeholder="e.g. 14"
              />
            </Form.Item>
            <Form.Item
              name="maxRenewals"
              label="Max Renewals"
              rules={[{ required: true, message: 'Max renewals is required' }]}
              tooltip="Maximum number of times a loan can be renewed"
            >
              <InputNumber
                min={0}
                max={10}
                style={{ width: '100%' }}
                placeholder="e.g. 2"
              />
            </Form.Item>
            <Form.Item
              name="maxLoans"
              label="Max Concurrent Loans"
              rules={[{ required: true, message: 'Max concurrent loans is required' }]}
              tooltip="Maximum number of books a member can borrow at once"
            >
              <InputNumber
                min={1}
                max={50}
                style={{ width: '100%' }}
                placeholder="e.g. 5"
              />
            </Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={savingLoan}
              style={{ marginTop: '16px' }}
            >
              Save Loan Settings
            </Button>
          </Form>
        </Card>
      )
    },
    {
      key: 'reservation_settings',
      label: 'Reservation Settings',
      children: (
        <Card title="Reservation Settings" bordered>
          <Form
            form={reservationForm}
            layout="vertical"
            onFinish={handleSaveReservationSettings}
            initialValues={{
              maxReservations: 5,
              holdPeriodDays: 3
            }}
          >
            <Form.Item
              name="maxReservations"
              label="Max Reservations Per Member"
              rules={[{ required: true, message: 'Max reservations is required' }]}
              tooltip="Maximum number of active reservations a member can have"
            >
              <InputNumber
                min={1}
                max={20}
                style={{ width: '100%' }}
                placeholder="e.g. 5"
              />
            </Form.Item>
            <Form.Item
              name="holdPeriodDays"
              label="Hold Period (Days)"
              rules={[{ required: true, message: 'Hold period is required' }]}
              tooltip="Number of days a reserved book is held for pickup"
            >
              <InputNumber
                min={1}
                max={30}
                style={{ width: '100%' }}
                placeholder="e.g. 3"
              />
            </Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={savingReservation}
              style={{ marginTop: '16px' }}
            >
              Save Reservation Settings
            </Button>
          </Form>
        </Card>
      )
    },
    {
      key: 'fine_settings',
      label: 'Fine Settings',
      children: (
        <Card title="Fine Settings" bordered>
          <Form
            form={fineForm}
            layout="vertical"
            onFinish={handleSaveFineSettings}
            initialValues={{
              dailyFineRate: 0.5,
              maxFineCap: 25.0,
              suspensionThreshold: 50.0
            }}
          >
            <Form.Item
              name="dailyFineRate"
              label="Daily Overdue Rate ($)"
              rules={[{ required: true, message: 'Daily overdue rate is required' }]}
              tooltip="Amount charged per day for overdue books"
            >
              <InputNumber
                min={0}
                max={100}
                step={0.05}
                precision={2}
                style={{ width: '100%' }}
                placeholder="e.g. 0.50"
                prefix="$"
              />
            </Form.Item>
            <Form.Item
              name="maxFineCap"
              label="Max Fine Cap ($)"
              rules={[{ required: true, message: 'Max fine cap is required' }]}
              tooltip="Maximum fine amount per book"
            >
              <InputNumber
                min={0}
                max={1000}
                step={1}
                precision={2}
                style={{ width: '100%' }}
                placeholder="e.g. 25.00"
                prefix="$"
              />
            </Form.Item>
            <Form.Item
              name="suspensionThreshold"
              label="Suspension Threshold ($)"
              rules={[{ required: true, message: 'Suspension threshold is required' }]}
              tooltip="Fine amount at which a member is automatically suspended"
            >
              <InputNumber
                min={0}
                max={10000}
                step={5}
                precision={2}
                style={{ width: '100%' }}
                placeholder="e.g. 50.00"
                prefix="$"
              />
            </Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={savingFine}
              style={{ marginTop: '16px' }}
            >
              Save Fine Settings
            </Button>
          </Form>
        </Card>
      )
    },
    {
      key: 'membership_settings',
      label: 'Membership Settings',
      children: (
        <Card title="Membership Settings" bordered>
          <Form
            form={membershipForm}
            layout="vertical"
            onFinish={handleSaveMembershipSettings}
            initialValues={{
              membershipDurationDays: 365,
              expirationReminderDays: 30
            }}
          >
            <Form.Item
              name="membershipDurationDays"
              label="Membership Duration (Days)"
              rules={[{ required: true, message: 'Membership duration is required' }]}
              tooltip="Default membership validity period in days"
            >
              <InputNumber
                min={1}
                max={3650}
                style={{ width: '100%' }}
                placeholder="e.g. 365"
              />
            </Form.Item>
            <Form.Item
              name="expirationReminderDays"
              label="Expiration Reminder (Days Before)"
              rules={[{ required: true, message: 'Expiration reminder days is required' }]}
              tooltip="Number of days before expiration to send reminder notification"
            >
              <InputNumber
                min={1}
                max={90}
                style={{ width: '100%' }}
                placeholder="e.g. 30"
              />
            </Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={savingMembership}
              style={{ marginTop: '16px' }}
            >
              Save Membership Settings
            </Button>
          </Form>
        </Card>
      )
    },
    {
      key: 'library_info',
      label: 'Library Information',
      children: (
        <Card title="Library Information" bordered>
          <Form
            form={libraryInfoForm}
            layout="vertical"
            onFinish={handleSaveLibraryInfo}
            initialValues={{}}
          >
            <Form.Item
              name="libraryName"
              label="Library Name"
              rules={[{ required: true, message: 'Library name is required' }]}
            >
              <Input placeholder="Enter library name" />
            </Form.Item>
            <Form.Item
              name="libraryAddress"
              label="Address"
            >
              <Input.TextArea
                rows={3}
                placeholder="Enter library address"
              />
            </Form.Item>
            <Form.Item
              name="libraryPhone"
              label="Phone"
            >
              <Input placeholder="Enter phone number" />
            </Form.Item>
            <Form.Item
              name="libraryEmail"
              label="Email"
              rules={[{ type: 'email', message: 'Please enter a valid email' }]}
            >
              <Input placeholder="Enter email address" />
            </Form.Item>
            <Form.Item
              name="operatingHours"
              label="Operating Hours"
            >
              <Input.TextArea
                rows={4}
                placeholder="e.g. Mon-Fri: 9:00 AM - 8:00 PM&#10;Sat: 10:00 AM - 6:00 PM&#10;Sun: Closed"
              />
            </Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={savingLibraryInfo}
              style={{ marginTop: '16px' }}
            >
              Save Library Information
            </Button>
          </Form>
        </Card>
      )
    }
  ], [
    loanForm,
    reservationForm,
    fineForm,
    membershipForm,
    libraryInfoForm,
    savingLoan,
    savingReservation,
    savingFine,
    savingMembership,
    savingLibraryInfo,
    handleSaveLoanSettings,
    handleSaveReservationSettings,
    handleSaveFineSettings,
    handleSaveMembershipSettings,
    handleSaveLibraryInfo
  ]);

  return (
    <div style={{ minHeight: '100vh', height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
      {contextHolder}
      <Layout style={{ minHeight: '100vh', width: '100%', background: '#f5f5f5' }}>
        <div style={{ padding: '24px 24px 0 24px' }}>
          <Button
            type="link"
            icon={<ArrowLeftOutlined />}
            onClick={handleNavigateToDashboard}
            style={{ marginBottom: '8px', paddingLeft: '0' }}
          >
            Back to Dashboard
          </Button>
          <Typography.Title level={2} style={{ marginBottom: '4px' }}>
            System Settings
          </Typography.Title>
          <Typography.Text type="secondary" style={{ marginBottom: '24px', display: 'block' }}>
            Configure system-wide settings for the library management system. Changes are logged to the audit trail.
          </Typography.Text>
        </div>
        <div style={{ padding: '0 24px 24px 24px' }}>
          <Tabs
            type="card"
            activeKey={activeTab}
            onChange={setActiveTab}
            items={tabItems}
          />
        </div>
      </Layout>
    </div>
  );
}