'use client';

import * as DialogPrimitive from '@radix-ui/react-dialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fass } from '@/lib/fontawesome-kit';
import { cn } from '../../lib/utils';

interface SizeGuideProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  category?: 'apparel' | 'jerseys' | 'equipment' | 'footwear';
  title?: string;
}

const apparelSizes = [
  { size: 'XS', chest: '30-32', waist: '24-26', hips: '33-35' },
  { size: 'S', chest: '34-36', waist: '28-30', hips: '37-39' },
  { size: 'M', chest: '38-40', waist: '32-34', hips: '41-43' },
  { size: 'L', chest: '42-44', waist: '36-38', hips: '45-47' },
  { size: 'XL', chest: '46-48', waist: '40-42', hips: '49-51' },
  { size: '2XL', chest: '50-52', waist: '44-46', hips: '53-55' },
  { size: '3XL', chest: '54-56', waist: '48-50', hips: '57-59' },
];

const jerseySizes = [
  { size: 'Youth S', chest: '26-28', length: '20' },
  { size: 'Youth M', chest: '28-30', length: '22' },
  { size: 'Youth L', chest: '30-32', length: '24' },
  { size: 'Adult S', chest: '34-36', length: '28' },
  { size: 'Adult M', chest: '38-40', length: '29' },
  { size: 'Adult L', chest: '42-44', length: '30' },
  { size: 'Adult XL', chest: '46-48', length: '31' },
  { size: 'Adult 2XL', chest: '50-52', length: '32' },
];

export function SizeGuideModal({ open, onOpenChange, category = 'apparel', title }: SizeGuideProps) {
  const sizeData = category === 'jerseys' ? jerseySizes : apparelSizes;
  const isJersey = category === 'jerseys';

  if (!open) return null;

  return (
    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <DialogPrimitive.Portal>
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <DialogPrimitive.Overlay className="fixed inset-0 bg-black/60 backdrop-blur-xs" />

          <DialogPrimitive.Content className="relative z-50 w-full max-w-3xl mx-4">
            <div className="max-h-[90vh] overflow-y-auto border border-foreground/20 bg-background">
              <DialogPrimitive.Close className="absolute right-4 top-4 z-10 flex items-center justify-center bg-background/90 p-2 opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-foreground/40 focus:ring-offset-2 disabled:pointer-events-none">
                <FontAwesomeIcon icon={fass.faXmark} className="h-5 w-5" />
                <span className="sr-only">Close</span>
              </DialogPrimitive.Close>

              <div className="space-y-6 p-6 md:p-8">
                {/* Header */}
                <div className="flex items-center gap-3">
                  <div className="flex items-center justify-center bg-primary/10 p-3">
                    <FontAwesomeIcon icon={fass.faRuler} className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <DialogPrimitive.Title className="text-2xl font-bold text-foreground">
                      {title || 'Size Guide'}
                    </DialogPrimitive.Title>
                    <DialogPrimitive.Description className="text-sm text-foreground/60">
                      All measurements are in inches
                    </DialogPrimitive.Description>
                  </div>
                </div>

                {/* Size chart */}
                <div className="overflow-x-auto border border-foreground/20">
                  <table className="w-full text-sm">
                    <thead className="bg-foreground/5">
                      <tr>
                        <th className="border-b border-foreground/20 px-4 py-3 text-left font-semibold text-foreground">
                          Size
                        </th>
                        <th className="border-b border-foreground/20 px-4 py-3 text-left font-semibold text-foreground">
                          Chest
                        </th>
                        {!isJersey && (
                          <>
                            <th className="border-b border-foreground/20 px-4 py-3 text-left font-semibold text-foreground">
                              Waist
                            </th>
                            <th className="border-b border-foreground/20 px-4 py-3 text-left font-semibold text-foreground">
                              Hips
                            </th>
                          </>
                        )}
                        {isJersey && (
                          <th className="border-b border-foreground/20 px-4 py-3 text-left font-semibold text-foreground">
                            Length
                          </th>
                        )}
                      </tr>
                    </thead>
                    <tbody>
                      {sizeData.map((row, idx) => (
                        <tr
                          key={row.size}
                          className={cn(
                            'transition hover:bg-foreground/5',
                            idx % 2 === 0 ? 'bg-background' : 'bg-foreground/5/50'
                          )}
                        >
                          <td className="border-b border-foreground/10 px-4 py-3 font-semibold text-foreground">
                            {row.size}
                          </td>
                          <td className="border-b border-foreground/10 px-4 py-3 text-foreground/70">
                            {row.chest}&quot;
                          </td>
                          {'waist' in row && !isJersey && (
                            <>
                              <td className="border-b border-foreground/10 px-4 py-3 text-foreground/70">
                                {row.waist}&quot;
                              </td>
                              <td className="border-b border-foreground/10 px-4 py-3 text-foreground/70">
                                {row.hips}&quot;
                              </td>
                            </>
                          )}
                          {'length' in row && isJersey && (
                            <td className="border-b border-foreground/10 px-4 py-3 text-foreground/70">
                              {row.length}&quot;
                            </td>
                          )}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {/* How to measure */}
                <div className=" bg-primary/5 p-6">
                  <h3 className="mb-3 font-semibold text-foreground">How to Measure</h3>
                  <ul className="space-y-2 text-sm text-foreground/70">
                    <li className="flex items-start gap-2">
                      <span className="font-semibold text-primary">•</span>
                      <span>
                        <strong>Chest:</strong> Measure around the fullest part of your chest, keeping the tape measure horizontal.
                      </span>
                    </li>
                    {!isJersey && (
                      <>
                        <li className="flex items-start gap-2">
                          <span className="font-semibold text-primary">•</span>
                          <span>
                            <strong>Waist:</strong> Measure around your natural waistline, keeping the tape comfortably loose.
                          </span>
                        </li>
                        <li className="flex items-start gap-2">
                          <span className="font-semibold text-primary">•</span>
                          <span>
                            <strong>Hips:</strong> Measure around the fullest part of your hips, about 8 inches below your waist.
                          </span>
                        </li>
                      </>
                    )}
                    {isJersey && (
                      <li className="flex items-start gap-2">
                        <span className="font-semibold text-primary">•</span>
                        <span>
                          <strong>Length:</strong> Measure from the highest point of the shoulder down to the desired length.
                        </span>
                      </li>
                    )}
                  </ul>
                </div>

                {/* Tips */}
                <div className="border-2 border-amber-200 bg-amber-50 p-4">
                  <p className="text-sm font-semibold text-amber-900">
                    Tip: If you&apos;re between sizes, we recommend sizing up for a more comfortable fit.
                  </p>
                </div>
              </div>
            </div>
          </DialogPrimitive.Content>
        </div>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}
Size Guide Modal

Installation

Usage
