'use client';

import { useState, useEffect, useRef, useMemo } from 'react';
import Image from 'next/image';
import { useMediaQuery } from '@react-hook/media-query';
import { ChevronDown, Phone, Mail } from 'lucide-react';
import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { PhoneField } from '@/components/forms/PhoneField';

const formSchema = z.object({
  firstName: z.string().min(1, 'First name is required'),
  lastName: z.string().min(1, 'Last name is required'),
  email: z.string().email('Invalid email address'),
  phone: z.string().min(10, 'Please enter a valid phone number'),
  message: z.string().optional(),
});

export default function ContactPage() {
  const [mounted, setMounted] = useState(false);
  const [contactTop, setContactTop] = useState(0);
  const [windowHeight, setWindowHeight] = useState(0);

  // Animation values as refs to avoid re-renders
  const logoPositionRef = useRef('center');
  const buttonRef = useRef<HTMLButtonElement>(null);
  const chevronRef = useRef<HTMLDivElement>(null);

  const contactSectionRef = useRef<HTMLDivElement>(null);
  const logoRef = useRef<HTMLDivElement>(null);
  const animationFrameRef = useRef<number | null>(null);
  const lastScrollY = useRef(0);
  const lastFrameTime = useRef(0);
  const ticking = useRef(false);
  
  const isMobile = useMediaQuery("(max-width: 768px)");
  const isDesktop = useMediaQuery("(min-width: 1280px)");

  // Manage form state
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      message: "",
    },
  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values);
  }

  // Memoized logo dimensions based on screen size
  const logoWidth = useMemo(() =>
    isMobile ? 240 : isDesktop ? 316 : 280,
    [isMobile, isDesktop]
  );

  const logoHeight = useMemo(() =>
    isMobile ? 115 : isDesktop ? 151 : 134,
    [isMobile, isDesktop]
  );

  // Memoized animation constants
  const animationConstants = useMemo(() => ({
    mobile: {
      targetTopPosition: 10,
      startYFactor: 0.30,  // Moved up from 0.35 to account for single-line button
      finalScale: 0.5,
      fadeThreshold: 5
    },
    desktop: {
      targetTopPosition: 20,
      logoSpeed: 0.4,
      maxScroll: 500,
      scaleReduction: 0.6,
      fadeThreshold: 10
    }
  }), []);

  useEffect(() => {
    setMounted(true);
    // Set initial dimensions on mount
    setWindowHeight(window.innerHeight);
    if (contactSectionRef.current) {
      setContactTop(contactSectionRef.current.offsetTop);
    }
  }, []);

  // Helper function to update element styles directly
  const updateElementStyle = (element: HTMLElement | null, styles: Partial<CSSStyleDeclaration>) => {
    if (!element) return;
    Object.assign(element.style, styles);
  };

  // Separated mobile animation logic
  const calculateMobileLogoStyles = (
    scrollY: number,
    windowHeight: number,
    contactTop: number,
    logoHeight: number
  ): Partial<CSSStyleDeclaration> => {
    const { targetTopPosition, startYFactor, finalScale } = animationConstants.mobile;
    const startY = windowHeight * startYFactor;
    const endY = targetTopPosition + (logoHeight * finalScale) / 2;
    const totalDistance = startY - endY;
    const animationEndScroll = contactTop;

    if (scrollY >= animationEndScroll) {
      logoPositionRef.current = 'top';
      const scrollPastEnd = scrollY - animationEndScroll;
      const fixedY = endY - scrollPastEnd;
      const mobileScale = finalScale;

      return {
        position: 'fixed',
        top: `${fixedY}px`,
        left: '50%',
        transform: `translate3d(-50%, 0, 0) scale3d(${mobileScale}, ${mobileScale}, 1) translateZ(0)`,
        transformOrigin: 'center',
        willChange: scrollY > 0 ? 'transform' : 'auto',
        backfaceVisibility: 'hidden',
        transition: 'none',
        zIndex: '50'
      };
    } else if (scrollY > 0) {
      logoPositionRef.current = 'animating';
      const progress = scrollY / animationEndScroll;
      const currentY = startY - (totalDistance * progress);
      const mobileScale = 1 - ((1 - finalScale) * progress);

      return {
        position: 'fixed',
        top: `${currentY}px`,
        left: '50%',
        transform: `translate3d(-50%, 0, 0) scale3d(${mobileScale}, ${mobileScale}, 1) translateZ(0)`,
        transformOrigin: 'center',
        willChange: 'transform',
        backfaceVisibility: 'hidden',
        transition: 'none',
        zIndex: '50'
      };
    } else {
      logoPositionRef.current = 'center';
      return {
        position: 'fixed',
        top: `${startY}px`,
        left: '50%',
        transform: 'translate3d(-50%, 0, 0) scale3d(1, 1, 1) translateZ(0)',
        transformOrigin: 'center',
        willChange: 'auto',
        backfaceVisibility: 'hidden',
        transition: 'none',
        zIndex: '50'
      };
    }
  };

  // Separated desktop animation logic
  const calculateDesktopLogoStyles = (
    scrollY: number,
    windowHeight: number,
    logoHeight: number
  ): Partial<CSSStyleDeclaration> => {
    const { targetTopPosition, logoSpeed, maxScroll, scaleReduction } = animationConstants.desktop;
    const centerY = windowHeight / 2;
    const totalDistance = centerY - targetTopPosition - logoHeight / 2;
    const logoYPosition = -(scrollY * logoSpeed);
    const maxUpwardMovement = -totalDistance;
    const animatedY = Math.max(logoYPosition, maxUpwardMovement);

    const scrollProgress = Math.min(scrollY / maxScroll, 1);
    const scale = 1 - (scaleReduction * scrollProgress);

    logoPositionRef.current = scrollY > 10 ? 'animating' : 'center';

    return {
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: `translate3d(-50%, calc(-50% + ${animatedY}px), 0) scale3d(${scale}, ${scale}, 1) translateZ(0)`,
      transformOrigin: 'center',
      willChange: scrollY > 0 ? 'transform' : 'auto',
      backfaceVisibility: 'hidden',
      transition: 'none',
      zIndex: '50'
    };
  };

  // Update button and chevron opacity
  const updateControlsOpacity = (scrollY: number, isMobile: boolean) => {
    const fadeThreshold = isMobile ? animationConstants.mobile.fadeThreshold : animationConstants.desktop.fadeThreshold;
    const opacity = scrollY > fadeThreshold ? 0 : 1;

    if (buttonRef.current) {
      buttonRef.current.style.opacity = String(opacity);
      buttonRef.current.style.pointerEvents = opacity > 0 ? 'auto' : 'none';
    }

    if (chevronRef.current) {
      chevronRef.current.style.opacity = String(opacity);
    }
  };

  const updateLogoPosition = (timestamp: number = performance.now()) => {
    // Throttle to 60fps (16ms minimum between frames)
    if (timestamp - lastFrameTime.current < 16) {
      return;
    }
    lastFrameTime.current = timestamp;

    if (!contactSectionRef.current) return;

    const scrollY = window.scrollY;
    const currentWindowHeight = window.innerHeight;
    const currentContactTop = contactSectionRef.current.offsetTop;

    // Update cached values if needed
    if (currentContactTop !== contactTop) {
      setContactTop(currentContactTop);
    }
    if (currentWindowHeight !== windowHeight) {
      setWindowHeight(currentWindowHeight);
    }

    // Calculate and apply logo styles based on device type
    const logoStyles = isMobile
      ? calculateMobileLogoStyles(scrollY, currentWindowHeight, currentContactTop, logoHeight)
      : calculateDesktopLogoStyles(scrollY, currentWindowHeight, logoHeight);

    updateElementStyle(logoRef.current, logoStyles);

    // Update controls opacity
    updateControlsOpacity(scrollY, isMobile);
  };

  // Animated scroll to form
  const scrollToForm = () => {
    if (!contactSectionRef.current) {
      console.error('Contact section ref not found');
      return;
    }

    console.log('Starting scroll animation to:', contactSectionRef.current.offsetTop);

    // Use native smooth scrolling
    window.scrollTo({
      top: contactSectionRef.current.offsetTop,
      behavior: 'smooth'
    });
  };

  // Add scroll listener for bidirectional animation with RAF
  useEffect(() => {
    const handleScroll = () => {
      lastScrollY.current = window.scrollY;

      if (!ticking.current) {
        ticking.current = true;
        animationFrameRef.current = requestAnimationFrame((timestamp) => {
          updateLogoPosition(timestamp);
          ticking.current = false;
        });
      }
    };

    const handleResize = () => {
      setWindowHeight(window.innerHeight);
      if (contactSectionRef.current) {
        setContactTop(contactSectionRef.current.offsetTop);
      }
      updateLogoPosition();
    };

    // Initial position update
    updateLogoPosition();

    window.addEventListener('scroll', handleScroll, { passive: true });
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', handleResize);
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, [isMobile, isDesktop, logoHeight, windowHeight]);

  // Store if initial position has been set
  const initialPositionSet = useRef(false);

  // Calculate initial logo position to prevent teleport and flicker
  const initialLogoStyle = useMemo(() => {
    // Only set initial styles once and before JS takes over
    if (!mounted || initialPositionSet.current) return {};

    // For mobile, position at the calculated start position
    if (isMobile && windowHeight > 0) {
      const initialTop = windowHeight * animationConstants.mobile.startYFactor;
      initialPositionSet.current = true;

      return {
        position: 'fixed' as const,
        top: `${initialTop}px`,
        left: '50%',
        transform: 'translate3d(-50%, 0, 0) translateZ(0)',
        willChange: 'auto',
        backfaceVisibility: 'hidden' as const,
        zIndex: 50
      };
    }

    // For desktop, center the logo properly
    if (!isMobile && mounted) {
      initialPositionSet.current = true;

      return {
        position: 'fixed' as const,
        top: '50%',
        left: '50%',
        transform: 'translate3d(-50%, -50%, 0) translateZ(0)',
        willChange: 'auto',
        backfaceVisibility: 'hidden' as const,
        zIndex: 50
      };
    }

    return {};
  }, [isMobile, mounted, windowHeight, animationConstants.mobile.startYFactor]);

  // Don't render until mounted to avoid hydration mismatch
  if (!mounted) {
    return null;
  }

  return (
    <div className="w-full bg-[#1b233b]">
      {/* Hero Section - Full Viewport Height */}
      <section className="relative h-screen flex flex-col items-center justify-center">
        {/* Single Port Amador Logo with dynamic positioning - Always rendered */}
        <div
          ref={logoRef}
          className="z-50"
          style={initialLogoStyle}
        >
          <Image
            src="/logo.png"
            alt="Port Amador"
            width={logoWidth}
            height={logoHeight}
            priority
            style={{
              width: `${logoWidth}px`,
              height: `${logoHeight}px`,
              objectFit: 'contain'
            }}
          />
        </div>

        {/* Button with fade out on scroll */}
        <button
          ref={buttonRef}
          onClick={scrollToForm}
          className={`fixed z-30 px-6 py-3 bg-[#C6AE97] text-[#1B233B] font-['bill_corporate_medium'] font-normal text-sm md:text-base uppercase tracking-wider rounded-md hover:bg-[#D4C1AC] transition-colors whitespace-nowrap`}
          style={{
            bottom: '120px',
            left: '50%',
            transform: 'translateX(-50%)',
            transition: 'opacity 0.3s ease-out'
          }}
        >
          CONNECT WITH US
        </button>

        {/* Chevron Down - with fade out on scroll */}
        <div
          ref={chevronRef}
          className="fixed z-20"
          style={{
            bottom: '40px',
            left: '50%',
            transform: 'translateX(-50%)',
            transition: 'opacity 0.3s ease-out'
          }}
        >
          <ChevronDown 
            className="text-[#C6AE97] animate-bounce"
            size={32}
          />
        </div>
      </section>

      {/* Contact Section - Desktop Layout with Marina Image */}
      <section
        ref={contactSectionRef}
        className="w-full relative"
      >
        {isMobile ? (
          // Mobile Layout - Stacked with Image
          <div className="flex flex-col min-h-screen pt-[150px]">
            {/* Form Section */}
            <div className="px-8 pb-12">
              <h2 className="font-['Palatino',_serif] text-[#C6AE97] text-[40px] mb-8 font-normal text-center">
                Connect with us
              </h2>
              <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                  <FormField
                    control={form.control}
                    name="firstName"
                    render={({ field }) => (
                      <FormItem>
                        <FormControl>
                          <Input
                            placeholder="First Name*"
                            {...field}
                            className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 py-2 font-['bill_corporate_medium'] font-light text-[16px]"
                          />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="lastName"
                    render={({ field }) => (
                      <FormItem>
                        <FormControl>
                          <Input
                            placeholder="Last Name*"
                            {...field}
                            className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 py-2 font-['bill_corporate_medium'] font-light text-[16px]"
                          />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="email"
                    render={({ field }) => (
                      <FormItem>
                        <FormControl>
                          <Input
                            placeholder="Email*"
                            type="email"
                            {...field}
                            className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 py-2 font-['bill_corporate_medium'] font-light text-[16px]"
                          />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="phone"
                    render={({ field, fieldState }) => (
                      <FormItem>
                        <FormControl>
                          <PhoneField
                            value={field.value}
                            onChange={(value) => field.onChange(value)}
                            onBlur={field.onBlur}
                            error={fieldState.error?.message}
                            required
                            placeholder="Phone number"
                          />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="message"
                    render={({ field }) => (
                      <FormItem>
                        <FormControl>
                          <Textarea
                            placeholder="Message"
                            {...field}
                            className="min-h-[80px] bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 py-2 font-['bill_corporate_medium'] font-light text-[16px] resize-none"
                          />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                  <div className="pt-6">
                    <Button
                      type="submit"
                      className="w-full bg-[#C6AE97] text-[#1B233B] hover:bg-[#D4C1AC] font-['bill_corporate_medium'] font-medium text-[16px] uppercase tracking-wider py-3 rounded-[5px]"
                    >
                      SUBMIT
                    </Button>
                  </div>
                </form>
              </Form>
            </div>

            {/* Marina Image Section */}
            <div className="relative w-full h-[300px] mt-2 px-4">
              <div className="relative w-full h-full">
                <Image
                  src="/marina.png"
                  alt="Port Amador Marina"
                  fill
                  className="object-cover object-center"
                  sizes="(max-width: 768px) 90vw, 100vw"
                  priority
                />
              </div>
            </div>

            {/* Footer Section */}
            <div className="px-8 py-8">
              <div className="flex justify-between items-end">
                <div className="flex flex-col space-y-0">
                  <a href="tel:+13109132597" className="font-['bill_corporate_medium'] font-light text-[14px] text-[#C6AE97] hover:text-[#D4C1AC] transition-colors">
                    +1 310 913 2597
                  </a>
                  <a href="mailto:am@portamador.com" className="font-['bill_corporate_medium'] font-light text-[14px] text-[#C6AE97] hover:text-[#D4C1AC] transition-colors">
                    am@portamador.com
                  </a>
                </div>
                <div className="text-[#C6AE97] text-[14px] font-['bill_corporate_medium'] font-light">
                  © Port Amador 2025
                </div>
              </div>
            </div>
          </div>
        ) : (
          // Desktop Layout - Matching Figma exactly
          <div className="min-h-screen flex flex-col relative pt-[200px]">
            <div className="w-full max-w-[1600px] mx-auto flex items-stretch flex-1">
              {/* Left Side - Marina Image - Aligned with form content */}
              <div className="w-[45%] relative">
                <div className="absolute top-0 bottom-0 left-[80px] right-[40px]">
                  <Image
                    src="/marina.png"
                    alt="Port Amador Marina"
                    fill
                    className="object-cover object-center"
                    sizes="45vw"
                    priority
                  />
                </div>
              </div>

              {/* Right Side - Form Section */}
              <div className="w-[55%] flex flex-col justify-center py-[40px] pl-[40px] pr-[80px]">
                {/* Heading */}
                <h2 className="font-['Palatino',_serif] text-[#C6AE97] text-[72px] leading-none mb-12 font-normal">
                  Connect with us
                </h2>

                <Form {...form}>
                  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                    {/* First Row - First Name and Last Name */}
                    <div className="grid grid-cols-2 gap-6">
                      <FormField
                        control={form.control}
                        name="firstName"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                placeholder="First Name*"
                                className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="lastName"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                {...field}
                                placeholder="Last Name*"
                                className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>

                    {/* Second Row - Email and Phone */}
                    <div className="grid grid-cols-2 gap-6">
                      <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                          <FormItem>
                            <FormControl>
                              <Input
                                type="email"
                                {...field}
                                placeholder="Email*"
                                className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="phone"
                        render={({ field, fieldState }) => (
                          <FormItem>
                            <FormControl>
                              <PhoneField
                                value={field.value}
                                onChange={(value) => field.onChange(value)}
                                onBlur={field.onBlur}
                                error={fieldState.error?.message}
                                required
                                placeholder="Phone number"
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>

                    {/* Message Field */}
                    <FormField
                      control={form.control}
                      name="message"
                      render={({ field }) => (
                        <FormItem>
                          <FormControl>
                            <Textarea
                              {...field}
                              placeholder="Message"
                              className="min-h-[60px] bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] resize-none focus:outline-none focus:ring-0"
                            />
                          </FormControl>
                        </FormItem>
                      )}
                    />

                    {/* Submit Button */}
                    <div className="pt-4">
                      <Button
                        type="submit"
                        className="w-full bg-[#C6AE97] text-[#1B233B] hover:bg-[#D4C1AC] font-['bill_corporate_medium'] font-medium text-[18px] uppercase tracking-[0.05em] h-[50px] rounded-[3px]"
                      >
                        SUBMIT
                      </Button>
                    </div>
                  </form>
                </Form>
              </div>
            </div>

            {/* Footer - at bottom of page */}
            <div className="w-full max-w-[1600px] mx-auto px-[80px] pb-8 pt-12">
              <div className="flex justify-between items-end">
                <div className="flex flex-col space-y-0 text-[#C6AE97]">
                  <a href="tel:+13109132597" className="font-['bill_corporate_medium'] font-light text-[14px] hover:text-[#D4C1AC] transition-colors">
                    +1 310 913 2597
                  </a>
                  <a href="mailto:am@portamador.com" className="font-['bill_corporate_medium'] font-light text-[14px] hover:text-[#D4C1AC] transition-colors">
                    am@portamador.com
                  </a>
                </div>
                <div className="text-[#C6AE97] text-[14px] font-['bill_corporate_medium'] font-light">
                  © Port Amador 2025
                </div>
              </div>
            </div>
          </div>
        )}
      </section>
    </div>
  );
}