import { useState, useEffect, useMemo, CSSProperties } from 'react';
import { Card, Form, Input, Button, List, Typography, message, Grid } from 'antd';
import { useApi } from '@/hooks/useApi';
import { SubmissionsService } from '@/services/submissions';
import { parseError } from '@/utils/errorHandler';
import { useAppContext } from '@/store/AppStore';

interface Submission {
  id: string;
  name: string;
  email: string;
  created_at: string;
  updated_at: string;
}

interface SubmissionListResponse {
  items: Submission[];
  total: number;
  limit: number;
  offset: number;
}

const HomePage = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [form] = Form.useForm();
  const [submitting, setSubmitting] = useState<boolean>(false);
  const { entries, setEntries } = useAppContext();
  const { useBreakpoint } = Grid;
  const screens = useBreakpoint();

  const {
    data: submissionsData,
    loading: fetchingSubmissions,
    error: fetchError,
    execute: fetchSubmissions,
  } = useApi<SubmissionListResponse>(SubmissionsService.list);

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

  useEffect(() => {
    if (submissionsData?.items) {
      setEntries(submissionsData.items);
    }
  }, [submissionsData, setEntries]);

  useEffect(() => {
    if (fetchError) {
      const { message: errorMsg } = parseError(fetchError);
      messageApi.error(errorMsg);
    }
  }, [fetchError, messageApi]);

  const reversedEntries = useMemo(() => {
    return [...(entries ?? [])].reverse();
  }, [entries]);

  const handleSubmit = async () => {
    try {
      setSubmitting(true);
      const values = await form.validateFields();
      
      await SubmissionsService.create({
        name: values.name,
        email: values.email,
      });

      messageApi.success('Entry submitted successfully!');
      form.resetFields();
      
      await fetchSubmissions({ limit: 100, offset: 0 });
    } catch (e) {
      const { message: errorMsg } = parseError(e);
      messageApi.error(errorMsg ?? 'Failed to submit entry. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  const mainContainerStyle: CSSProperties = {
    minHeight: '100vh',
    width: '100%',
    backgroundColor: '#f5f5f5',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: screens.xs ? '24px 16px' : '40px 16px',
  };

  const contentWrapperStyle: CSSProperties = {
    width: '100%',
    maxWidth: '600px',
  };

  const pageTitleStyle: CSSProperties = {
    textAlign: 'center',
    marginBottom: screens.xs ? '24px' : '32px',
  };

  const formCardStyle: CSSProperties = {
    marginBottom: '24px',
  };

  const submitButtonStyle: CSSProperties = {
    height: '40px',
    fontWeight: 600,
  };

  const listItemNameStyle: CSSProperties = {
    display: 'block',
    fontSize: screens.xs ? '14px' : '15px',
  };

  const listItemEmailStyle: CSSProperties = {
    display: 'block',
    fontSize: screens.xs ? '12px' : '13px',
  };

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <div style={contentWrapperStyle}>
        <Typography.Title level={screens.xs ? 3 : 2} style={pageTitleStyle}>
          Submit & View Entries
        </Typography.Title>

        <Card title="New Submission" style={formCardStyle}>
          <Form
            form={form}
            layout="vertical"
            requiredMark={true}
            onFinish={handleSubmit}
          >
            <Form.Item
              name="name"
              label="Name"
              rules={[
                { required: true, message: 'Please enter your name' },
                { max: 100, message: 'Name cannot exceed 100 characters' },
                { whitespace: true, message: 'Name cannot be empty' },
              ]}
            >
              <Input
                placeholder="Enter your name"
                maxLength={100}
                aria-label="Name"
              />
            </Form.Item>

            <Form.Item
              name="email"
              label="Email"
              rules={[
                { required: true, message: 'Please enter your email' },
                { type: 'email', message: 'Please enter a valid email address' },
                { max: 254, message: 'Email cannot exceed 254 characters' },
              ]}
            >
              <Input
                placeholder="Enter your email"
                maxLength={254}
                type="email"
                aria-label="Email"
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                block
                loading={submitting}
                aria-label="Submit"
                style={submitButtonStyle}
              >
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Card>

        <Card title="Submissions">
          <List
            dataSource={reversedEntries}
            loading={fetchingSubmissions}
            locale={{
              emptyText: 'No submissions yet. Be the first to submit!',
            }}
            renderItem={(item) => (
              <List.Item>
                <div style={{ width: '100%' }}>
                  <Typography.Text strong style={listItemNameStyle}>
                    {item?.name ?? '—'}
                  </Typography.Text>
                  <Typography.Text type="secondary" style={listItemEmailStyle}>
                    {item?.email ?? '—'}
                  </Typography.Text>
                </div>
              </List.Item>
            )}
          />
        </Card>
      </div>
    </div>
  );
};

export default HomePage;