'use client'

import Image from 'next/image'
import Link from 'next/link'
import { useState } from 'react'

import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { TextField } from '@/components/Fields'
import { NavLinks } from '@/components/NavLinks'
import github from '@/images/github.svg'
import logomark from '@/images/logomark.svg'

export function Footer() {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [message, setMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setSuccess(false);
    setMessage('');

    try {
      const response = await fetch('/api/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Something went wrong');
      }

      setSuccess(true);
      setMessage('Thanks for subscribing!');
      setEmail('');
    } catch (error: any) {
      setMessage(error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <footer className="border-t border-gray-200">
      <Container>
        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
          <div>
            <div className="flex items-center text-gray-900">
              <Image src={logomark} alt="Mycelium Logomark" width={60} height={60} className="h-20 w-20 flex-none" />
              <div className="ml-4">
                <p className="text-base font-semibold">Mycelium</p>
                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
              </div>
            </div>
            <nav className="mt-11 flex gap-8">
              <NavLinks />
            </nav>
          </div>
          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
            <div className="relative flex h-16 w-16 flex-none items-center justify-center">
              <Image src={github} alt="GitHub" unoptimized />
            </div>
            <div className="ml-4 lg:w-72">
              <p className="text-base font-semibold text-gray-900">
                <Link href="https://github.com/threefoldtech/mycelium/releases/" target='_blank'>
                  <span className="absolute inset-0 sm:rounded-2xl" />
                  Download Mycelium
                </Link>
              </p>
              <p className="mt-1 text-sm text-gray-700">
                Head to the GitHub to access the latest Mycelium builds for your devices.
              </p>
            </div>
          </div>
        </div>
        <div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
          <div>
            <form className="flex w-full justify-center md:w-auto" onSubmit={handleSubmit}>
              <TextField
                type="email"
                aria-label="Email address"
                placeholder="Email address"
                autoComplete="email"
                required
                className="w-60 min-w-0 shrink"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              <Button
                type="submit"
                color={success ? 'green' : 'cyan'}
                className="ml-4 flex-none"
                disabled={loading || success}
              >
                {loading ? 'Joining...' : success ? 'Sent!' : <><span className="hidden lg:inline">Join our newsletter</span><span className="lg:hidden">Join newsletter</span></>}
              </Button>
            </form>
            {message && <p className="mt-2 text-sm text-gray-600">{message}</p>}
          </div>
          <p className="mt-6 text-sm text-gray-500 md:mt-0">
            &copy; Copyright{' '}
            <a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">
              ThreeFold
            </a>{' '}
            {new Date().getFullYear()}. All rights reserved.
          </p>
        </div>
      </Container>
    </footer>
  )
}