'use client';

import React, { useEffect } from 'react';
import { useSize } from '@/context/SizeContext';

const SIZE_ROWS = [
  { eu: '39', length: '24.5 cm', uk: '6' },
  { eu: '40', length: '25.0 cm', uk: '6.5' },
  { eu: '41', length: '25.5 cm', uk: '7.5' },
  { eu: '42', length: '26.5 cm', uk: '8.5' },
  { eu: '43', length: '27.0 cm', uk: '9' },
  { eu: '44', length: '28.0 cm', uk: '10' },
  { eu: '45', length: '28.5 cm', uk: '11' },
];

export default function SizeGuideModal() {
  const { isSizeGuideOpen, closeSizeGuide } = useSize();

  // Close on Escape key
  useEffect(() => {
    if (!isSizeGuideOpen) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') closeSizeGuide();
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isSizeGuideOpen, closeSizeGuide]);

  // Lock body scroll when modal is open
  useEffect(() => {
    if (isSizeGuideOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [isSizeGuideOpen]);

  if (!isSizeGuideOpen) return null;

  return (
    <div
      className="sg-modal-backdrop"
      onClick={closeSizeGuide}
      role="dialog"
      aria-modal="true"
      aria-labelledby="sg-title"
    >
      <div
        className="sg-modal-card"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Close Button */}
        <button
          type="button"
          className="sg-modal-close"
          onClick={closeSizeGuide}
          aria-label="Close size guide"
        >
          <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>

        {/* Centered Main Title */}
        <div className="sg-header">
          <h2 id="sg-title" className="sg-title">Size guide</h2>
        </div>

        {/* Instructions */}
        <p className="sg-intro">
          Stand on a sheet of paper with your heel against a wall. Mark the tip of your longest toe, measure from the wall to the mark in centimetres, and match it below. Measure in the evening — feet swell through the day.
        </p>

        {/* Responsive Size Chart Table */}
        <div className="sg-table-wrap">
          <table className="sg-table">
            <thead>
              <tr>
                <th>EU size</th>
                <th>Foot length</th>
                <th>UK</th>
              </tr>
            </thead>
            <tbody>
              {SIZE_ROWS.map((row) => (
                <tr key={row.eu}>
                  <td className="sg-eu">{row.eu}</td>
                  <td>{row.length}</td>
                  <td className="sg-uk">{row.uk}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Between Two Sizes */}
        <div className="sg-section">
          <h3>Between two sizes?</h3>
          <p>
            Go up. Every product page carries a fit note telling you whether that specific style runs narrow, roomy or true — read it before you order; it is the single biggest reason our exchange rate is low.
          </p>
        </div>

        {/* Still Unsure */}
        <div className="sg-section">
          <h3>Still unsure</h3>
          <p>
            Send us your measurement on WhatsApp at{' '}
            <a
              href="https://wa.me/8801325202214"
              target="_blank"
              rel="noopener noreferrer"
              className="sg-wa-link"
            >
              +880 1325-202214
            </a>{' '}
            and we will tell you which size to take.
          </p>
        </div>
      </div>
    </div>
  );
}