import { useEffect, useState } from 'react';
import { Card, Typography, Switch, Button, Table, Modal, message, Space, Divider } from 'antd';
import { useNavigate } from 'react-router-dom';
import { fetchMyOrders, OrderHistoryItem, updateConsent, exportMyData, deleteMyAccount } from './customerApi';
import { setFavoriteAlerts } from './favoritesApi';
import { useCustomerAuth } from './CustomerAuthContext';

const { Title, Text } = Typography;

export default function Account() {
  const { customer, loading, refresh, logout } = useCustomerAuth();
  const [orders, setOrders] = useState<OrderHistoryItem[]>([]);
  const navigate = useNavigate();

  useEffect(() => {
    if (customer) fetchMyOrders().then(setOrders);
  }, [customer]);

  useEffect(() => {
    if (!loading && !customer) navigate('/login');
  }, [loading, customer, navigate]);

  if (!customer) return null;

  async function handleFavoriteAlertsToggle(checked: boolean) {
    try {
      await setFavoriteAlerts(checked);
    } catch (err) {
      message.error((err as Error).message);
      return;
    }
    refresh();
    message.success(checked ? 'We will email you when a favorite sells' : 'Turned off');
  }

  async function handleConsentToggle(checked: boolean) {
    await updateConsent(checked);
    message.success(checked ? 'Subscribed to emails' : 'Unsubscribed from emails');
    refresh();
  }

  async function handleLogout() {
    try {
      await logout();
    } catch (err) {
      message.error(`Couldn't log out — ${(err as Error).message}`);
      return;
    }
    // replace, so Back doesn't return to the account page — which would only
    // bounce to /login now that the session is gone.
    navigate('/', { replace: true });
  }

  function handleDelete() {
    Modal.confirm({
      title: 'Delete your account?',
      content: 'This permanently removes your account and personal data. Your past orders are kept for accounting purposes but disconnected from your identity. This cannot be undone.',
      okText: 'Delete my account',
      okButtonProps: { danger: true },
      onOk: async () => {
        await deleteMyAccount();
        message.success('Account deleted');
        navigate('/');
      }
    });
  }

  return (
    <div style={{ maxWidth: 700, margin: '48px auto', padding: '0 16px' }}>
      <Card>
        <Title level={3}>My Account</Title>
        <Text>{customer.email}</Text>
        {!customer.email_verified && (
          <div style={{ marginTop: 8 }}>
            <Text type="warning">Email not verified — check your inbox for a verification link.</Text>
          </div>
        )}

        <Divider />
        <Space align="center">
          <Switch checked={customer.marketing_consent} onChange={handleConsentToggle} />
          <Text>Receive emails about new items</Text>
        </Space>

        {/* A separate consent from marketing above, and shown separately so a
            customer can hold one without the other. */}
        <div style={{ marginTop: 12 }}>
          <Space align="center">
            <Switch checked={customer.favorite_alerts} onChange={handleFavoriteAlertsToggle} />
            <Text>Email me when an item I favorited is sold</Text>
          </Space>
        </div>

        <Divider />
        <Title level={5}>Order History</Title>
        <Table
          rowKey="id"
          size="small"
          dataSource={orders}
          pagination={false}
          columns={[
            { title: 'Item', dataIndex: 'item_name' },
            { title: 'Amount', dataIndex: 'amount_cents', render: (v: number) => `$${(v / 100).toFixed(2)}` },
            { title: 'Processor', dataIndex: 'processor' },
            { title: 'Date', dataIndex: 'created_at', render: (v: string) => new Date(v).toLocaleDateString() }
          ]}
        />

        <Divider />
        <Space wrap>
          <Button onClick={exportMyData}>Download my data</Button>
          <Button onClick={handleLogout}>Log out</Button>
          <Button danger onClick={handleDelete}>Delete my account</Button>
        </Space>
      </Card>
    </div>
  );
}