import React, { useEffect, useMemo } from 'react';
import { Container, Typography, Box, Button, Paper, Divider } from '@mui/material';
import { useLocation, Link } from 'react-router-dom';

const BookingConfirmation = () => {
  const location = useLocation();

  const request = location.state?.request || null;

  const WA_NUMBER = useMemo(() => {
    return '963986105010';
  }, []);

  const waText = useMemo(() => {
    if (!request) {
      return encodeURIComponent('Hello, I would like to book a room at Old Vine Hotel.');
    }

    const lines = [
      'New booking request from website:',
      `Name: ${request.fullName || ''}`,
      `Phone: ${request.phone || ''}`,
      request.email ? `Email: ${request.email}` : null,
      request.checkInDate ? `Check-in: ${new Date(request.checkInDate).toLocaleDateString()}` : null,
      request.checkOutDate ? `Check-out: ${new Date(request.checkOutDate).toLocaleDateString()}` : null,
      request.adults != null ? `Adults: ${request.adults}` : null,
      request.children != null ? `Children: ${request.children}` : null,
      request.roomCategory ? `Category: ${request.roomCategory}` : null,
      request.message ? `Message: ${request.message}` : null,
    ].filter(Boolean);

    return encodeURIComponent(lines.join('\n'));
  }, [request]);

  const WA_LINK = useMemo(() => `https://wa.me/${WA_NUMBER}?text=${waText}`, [WA_NUMBER, waText]);

  useEffect(() => {
    // ✅ Auto open WhatsApp (more reliable than window.open): redirect same tab
    if (!request?.autoOpenWhatsApp) return;
    if (!WA_LINK) return;

    // prevent loop on refresh/back
    const key = `wa_opened_${request.bookingNumber || request.phone || 'latest'}`;
    if (sessionStorage.getItem(key)) return;
    sessionStorage.setItem(key, '1');

    const t = setTimeout(() => {
      window.location.href = WA_LINK;
    }, 600);

    return () => clearTimeout(t);
  }, [request, WA_LINK]);

  return (
    <Container maxWidth="lg" sx={{ py: 8 }}>
      <Box sx={{ textAlign: 'center', mb: 4 }}>
        <Typography variant="h3" component="h1" gutterBottom>
          Confirm Your Booking on WhatsApp
        </Typography>
        <Typography variant="h5" color="text.secondary">
          Almost done — please send the WhatsApp message ✅
        </Typography>
      </Box>

      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
        <Paper sx={{ p: 4, width: '100%', maxWidth: 720 }}>
          <Typography variant="body1" sx={{ textAlign: 'center', mb: 3 }}>
            Your request has been recorded. To complete the booking, tap <b>Open WhatsApp</b> below and press <b>Send</b>.
            Our team will reply to confirm availability.
          </Typography>

          {request && (
            <>
              <Divider sx={{ my: 2 }} />
              <Typography variant="h6" sx={{ mb: 2 }}>
                Request Summary
              </Typography>

              <Box sx={{ display: 'grid', gap: 1 }}>
                <Typography><b>Name:</b> {request.fullName || '—'}</Typography>
                <Typography><b>Phone:</b> {request.phone || '—'}</Typography>
                {request.email && <Typography><b>Email:</b> {request.email}</Typography>}
                {request.roomCategory && <Typography><b>Category:</b> {request.roomCategory}</Typography>}
                {request.checkInDate && <Typography><b>Check-in:</b> {new Date(request.checkInDate).toLocaleDateString()}</Typography>}
                {request.checkOutDate && <Typography><b>Check-out:</b> {new Date(request.checkOutDate).toLocaleDateString()}</Typography>}
                {(request.adults != null || request.children != null) && (
                  <Typography><b>Guests:</b> {request.adults ?? 0} adults, {request.children ?? 0} children</Typography>
                )}
                {request.message && <Typography><b>Message:</b> {request.message}</Typography>}
              </Box>
            </>
          )}

          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mt: 4, justifyContent: 'center' }}>
            <Button
              component="a"
              href={WA_LINK}
              target="_blank"
              rel="noopener noreferrer"
              variant="contained"
              color="secondary"
              sx={{ px: 4 }}
            >
              Open WhatsApp
            </Button>

            <Button component={Link} to="/rooms" variant="outlined" sx={{ px: 4 }}>
              Browse Rooms
            </Button>

            <Button component={Link} to="/" variant="text" sx={{ px: 4 }}>
              Back Home
            </Button>
          </Box>

          {!request && (
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center', mt: 2 }}>
              (No request details were passed to this page.)
            </Typography>
          )}
        </Paper>
      </Box>
    </Container>
  );
};

export default BookingConfirmation;