'use client';

import { Clock, Mail, MapPin, Phone } from 'lucide-react';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import WebLayout from '@/components/web/layout/web-layout';
import type { About, Branch } from '@/db/schema';
import { Skeleton } from '@/components/ui/skeleton';

const Contact = () => {
  const [about, setAbout] = useState<About[]>();
  const [loadingAbout, setLoadingAbout] = useState(true);
  const [branches, setBranches] = useState<Branch[]>([]);
  const [loadingBranch, setLoadingBranch] = useState(true);
  const [galleries, setGalleries] = useState<string[]>([]);
  const [bgImage, setBgImage] = useState<string>('');
  const fallbackImage = '/images/logo.png';

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    toast.success(
      'Thank you for contacting us. We will get back to you shortly.'
    );
  };

  const fetchAbout = async () => {
    try {
      const response = await fetch('/api/company-info');
      if (!response.ok) {
        throw new Error('Failed to fetch about information');
      }
      const data = await response.json();
      setAbout(data);
    } catch (error) {
      toast.error('Error loading About');
    } finally {
      setLoadingAbout(false);
    }
  };

  const fetchBranches = async () => {
    try {
      const response = await fetch('/api/branches');
      if (!response.ok) {
        throw new Error('Failed to fetch branches');
      }
      const data = await response.json();
      setBranches(data);
    } catch (error) {
      toast.error('Error loading branches');
    } finally {
      setLoadingBranch(false);
    }
  };

  const fetchGalleries = async () => {
    try {
      const response = await fetch('/api/all-gallery-images');
      const data = await response.json();
      setGalleries(
        data.map((item: any) => item?.image?.trim()).filter(Boolean)
      );
    } catch (error) {
      console.error('Error loading galleries:', error);
    }
  };

  useEffect(() => {
    fetchAbout();
    fetchBranches();
    fetchGalleries();
  }, []);

  useEffect(() => {
    let intervalId: NodeJS.Timeout;

    if (galleries.length > 0) {
      if (galleries.length > 1) {
        setBgImage(galleries[Math.floor(Math.random() * galleries.length)]);
        intervalId = setInterval(() => {
          setBgImage(galleries[Math.floor(Math.random() * galleries.length)]);
        }, 5000);
      } else {
        setBgImage(galleries[0]);
      }
    } else {
      setBgImage(fallbackImage);
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [galleries]);

  const splitParagraphs = (text: string) => {
    return text.split('\r\n').filter((paragraph) => paragraph.trim() !== '');
  };

  return (
    <WebLayout>
      <div>
        {/* Hero Section */}
        <section
          className="w-full bg-center bg-cover py-20 text-white"
          style={{
            backgroundImage: `linear-gradient(to right, rgba(0, 70, 173, 0.85), rgba(0, 160, 233, 0.85)), url(${bgImage})`,
          }}
        >
          <div className="container">
            <div className="max-w-3xl">
              <h1 className="mt-12 mb-6 font-bold text-4xl md:text-5xl">
                Contact Us
              </h1>
              <p className="text-white/90 text-xl">
                Have a project in mind or want to learn more about our services?
                Get in touch with our team.
              </p>
            </div>
          </div>
        </section>

        {/* Contact Form and Info */}
        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
              {/* Contact Form */}
              <div>
                <h2 className="mb-6 font-bold text-2xl text-[hsl(var(--oki-gray-dark))]">
                  Send Us a Message
                </h2>
                <form className="space-y-6" onSubmit={handleSubmit}>
                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                      <label
                        className="mb-1 block font-medium text-[hsl(var(--foreground))] text-sm"
                        htmlFor="name"
                      >
                        Full Name *
                      </label>
                      <Input
                        className="w-full"
                        id="name"
                        placeholder="John Doe"
                        required
                      />
                    </div>
                    <div>
                      <label
                        className="mb-1 block font-medium text-[hsl(var(--foreground))] text-sm"
                        htmlFor="email"
                      >
                        Email Address *
                      </label>
                      <Input
                        className="w-full"
                        id="email"
                        placeholder="john@example.com"
                        required
                        type="email"
                      />
                    </div>
                  </div>

                  <div>
                    <label
                      className="mb-1 block font-medium text-[hsl(var(--foreground))] text-sm"
                      htmlFor="phone"
                    >
                      Phone Number
                    </label>
                    <Input
                      className="w-full"
                      id="phone"
                      placeholder="+234 123 456 7890"
                    />
                  </div>

                  <div>
                    <label
                      className="mb-1 block font-medium text-[hsl(var(--foreground))] text-sm"
                      htmlFor="subject"
                    >
                      Subject *
                    </label>
                    <Input
                      className="w-full"
                      id="subject"
                      placeholder="Project Inquiry"
                      required
                    />
                  </div>

                  <div>
                    <label
                      className="mb-1 block font-medium text-[hsl(var(--foreground))] text-sm"
                      htmlFor="message"
                    >
                      Message *
                    </label>
                    <Textarea
                      className="min-h-[150px] w-full"
                      id="message"
                      placeholder="Please describe your project or inquiry..."
                      required
                    />
                  </div>

                  <Button
                    className="w-full bg-[hsl(var(--oki-blue-dark))] px-8 py-6 text-white hover:bg-[hsl(var(--oki-blue-light))] sm:w-auto"
                    type="submit"
                  >
                    Send Message
                  </Button>
                </form>
              </div>

              {/* Contact Information */}
              <div>
                <h2 className="mb-6 font-bold text-2xl text-[hsl(var(--oki-gray-dark))]">
                  Contact Information
                </h2>

                {/* Head Office */}
                <div className="mb-8 rounded-lg bg-[hsl(var(--oki-gray-light))] p-6">
                  {loadingAbout ? (
                    <div className="space-y-4">
                      <Skeleton className="h-6 w-1/2" />
                      <Skeleton className="h-4 w-full" />
                      <Skeleton className="h-4 w-full" />
                      <Skeleton className="h-4 w-3/4" />
                      <Skeleton className="h-4 w-2/3" />
                    </div>
                  ) : (
                    <>
                      <h3 className="mb-4 font-semibold text-[hsl(var(--oki-gray-dark))] text-xl">
                        Head Office
                      </h3>
                      <ul className="space-y-4">
                        <li className="flex">
                          <MapPin
                            className="mt-1 mr-3 flex-shrink-0 text-[hsl(var(--oki-blue-dark))]"
                            size={20}
                          />
                          <span className="text-[hsl(var(--muted-foreground))]">
                            {about?.address}
                          </span>
                        </li>
                        <li className="flex">
                          <Phone
                            className="mt-1 mr-3 flex-shrink-0 text-[hsl(var(--oki-blue-dark))]"
                            size={20}
                          />
                          {about?.phone &&
                            splitParagraphs(about.phone).map((phone, index) => (
                              <span
                                className="mr-4 text-[hsl(var(--muted-foreground))]"
                                key={`phone-${index}`}
                              >
                                {phone}
                              </span>
                            ))}
                        </li>
                        <li className="flex">
                          <Mail
                            className="mt-1 mr-3 flex-shrink-0 text-[hsl(var(--oki-blue-dark))]"
                            size={20}
                          />
                          {about?.email &&
                            splitParagraphs(about.email).map((email, index) => (
                              <span
                                className="mr-4 text-[hsl(var(--muted-foreground))]"
                                key={`email-${index}`}
                              >
                                {email}
                              </span>
                            ))}
                        </li>
                        <li className="flex">
                          <Clock
                            className="mt-1 mr-3 flex-shrink-0 text-[hsl(var(--oki-blue-dark))]"
                            size={20}
                          />
                          <div className="flex flex-col">
                            <span className="text-[hsl(var(--muted-foreground))]">
                              Monday - Friday: 8:00 AM - 5:00 PM
                            </span>
                            <span className="text-[hsl(var(--muted-foreground))]">
                              Saturday: 8:00 AM - 3:00 PM
                            </span>
                          </div>
                        </li>
                      </ul>
                    </>
                  )}
                </div>

                {/* Branches */}
                {loadingBranch ? (
                  <div className="space-y-4">
                    {[...Array(2)].map((_, i) => (
                      <div key={i} className="mb-5 rounded-lg bg-[hsl(var(--oki-gray-light))] p-6 space-y-4">
                        <Skeleton className="h-6 w-1/2" />
                        <Skeleton className="h-4 w-full" />
                        <Skeleton className="h-4 w-full" />
                        <Skeleton className="h-4 w-3/4" />
                      </div>
                    ))}
                  </div>
                ) : (
                  branches.map((branch) => (
                    <div
                      className="mb-5 rounded-lg bg-[hsl(var(--oki-gray-light))] p-6"
                      key={branch.id}
                    >
                      <h3 className="mb-4 font-semibold text-[hsl(var(--oki-gray-dark))] text-xl">
                        {branch.name}
                      </h3>
                      <ul className="space-y-4">
                        <li className="flex">
                          <MapPin
                            className="mt-1 mr-3 flex-shrink-0 text-[hsl(var(--oki-blue-dark))]"
                            size={20}
                          />
                          <span className="text-[hsl(var(--muted-foreground))]">
                            {branch.address}
                          </span>
                        </li>
                        <li className="flex">
                          <Phone
                            className="mt-1 mr-3 flex-shrink-0 text-[hsl(var(--oki-blue-dark))]"
                            size={20}
                          />
                          <span className="text-[hsl(var(--muted-foreground))]">
                            {branch.phone}
                          </span>
                        </li>
                        <li className="flex">
                          <Mail
                            className="mt-1 mr-3 flex-shrink-0 text-[hsl(var(--oki-blue-dark))]"
                            size={20}
                          />
                          <span className="text-[hsl(var(--muted-foreground))]">
                            {branch.email}
                          </span>
                        </li>
                        <li className="flex">
                          <Clock
                            className="mt-1 mr-3 flex-shrink-0 text-[hsl(var(--oki-blue-dark))]"
                            size={20}
                          />
                          <span className="text-[hsl(var(--muted-foreground))]">
                            Monday - Saturday: 8:00 AM - 5:00 PM
                          </span>
                        </li>
                      </ul>
                    </div>
                  ))
                )}
              </div>
            </div>
          </div>
        </section>
      </div>
    </WebLayout>
  );
};

export default Contact;