'use client';

import React, { useState, useEffect } from 'react';
import { MapPin, Phone, Mail, Clock, Instagram, Facebook, Twitter } from 'lucide-react';
import type { BranchItem } from '@/store/foodmart';

interface FooterProps {
  settings: {
    storeName: string;
    storeDesc: string;
    whatsapp: string;
    address: string;
    phone: string;
    email: string;
    instagram: string;
    facebook: string;
    twitter: string;
    tiktok: string;
    googleMapsEmbed: string;
  } | null;
  selectedBranch: BranchItem | null;
}

export default function Footer({ settings, selectedBranch }: FooterProps) {
  const s = settings;

  return (
    <footer className="mt-auto border-t border-[var(--border-default)]" style={{ backgroundColor: 'var(--bg-primary)' }}>
      {/* Google Maps */}
      {(selectedBranch?.googleMapsEmbed || s?.googleMapsEmbed) && (
        <div className="w-full">
          <iframe
            src={selectedBranch?.googleMapsEmbed || s?.googleMapsEmbed || ''}
            width="100%" height="300" style={{ border: 0 }}
            allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade"
            title="Lokasi FoodMart" className="w-full" />
        </div>
      )}

      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          <div className="sm:col-span-2 lg:col-span-1">
            <div className="flex items-center gap-3 mb-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--accent-500)] to-[var(--accent-400)]">
                <span className="text-lg font-bold text-white">F</span>
              </div>
              <span className="text-lg font-bold text-[var(--text-primary)]">{s?.storeName || 'FoodMart'}</span>
            </div>
            <p className="text-sm text-[var(--text-secondary)] leading-relaxed">
              {s?.storeDesc || 'Makanan enak diantar cepat ke rumahmu. Pesan sekarang dan nikmati kelezatan!'}
            </p>
          </div>

          <div>
            <h3 className="mb-4 text-sm font-semibold text-[var(--text-primary)]">Menu Cepat</h3>
            <ul className="flex flex-col gap-2.5">
              {['Beranda', 'Menu Makanan', 'Minuman', 'Snack & Dessert', 'Paket Hemat'].map((item) => (
                <li key={item}>
                  <a href="#menu" className="text-sm text-[var(--text-secondary)] transition-colors hover:text-[var(--accent-400)]">{item}</a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="mb-4 text-sm font-semibold text-[var(--text-primary)]">Hubungi Kami</h3>
            <ul className="flex flex-col gap-3">
              <li className="flex items-start gap-2.5">
                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-[var(--accent-400)]" />
                <span className="text-sm text-[var(--text-secondary)]">{selectedBranch?.address || s?.address || 'Jl. Contoh No. 123, Jakarta'}</span>
              </li>
              <li className="flex items-center gap-2.5">
                <Phone className="h-4 w-4 shrink-0 text-[var(--accent-400)]" />
                <span className="text-sm text-[var(--text-secondary)]">{selectedBranch?.phone || s?.phone || '+62 812-3456-7890'}</span>
              </li>
              <li className="flex items-center gap-2.5">
                <Mail className="h-4 w-4 shrink-0 text-[var(--accent-400)]" />
                <span className="text-sm text-[var(--text-secondary)]">{s?.email || 'info@foodmart.com'}</span>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="mb-4 text-sm font-semibold text-[var(--text-primary)]">Jam Operasional</h3>
            <ul className="flex flex-col gap-3">
              <li className="flex items-start gap-2.5">
                <Clock className="mt-0.5 h-4 w-4 shrink-0 text-[var(--accent-400)]" />
                <div className="text-sm text-[var(--text-secondary)]">
                  <p>Senin - Jumat</p>
                  <p className="text-[var(--text-primary)]">09:00 - 22:00</p>
                </div>
              </li>
              <li className="flex items-start gap-2.5">
                <Clock className="mt-0.5 h-4 w-4 shrink-0 text-[var(--accent-400)]" />
                <div className="text-sm text-[var(--text-secondary)]">
                  <p>Sabtu - Minggu</p>
                  <p className="text-[var(--text-primary)]">10:00 - 23:00</p>
                </div>
              </li>
              {selectedBranch && (
                <li className="flex items-start gap-2.5">
                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-[var(--accent-400)]" />
                  <div className="text-sm text-[var(--text-secondary)]">
                    <p>Cabang</p>
                    <p className="text-[var(--text-primary)]">{selectedBranch.name} ({selectedBranch.openHour} - {selectedBranch.closeHour})</p>
                  </div>
                </li>
              )}
            </ul>

            {(s?.instagram || s?.facebook || s?.twitter) && (
              <div className="mt-6">
                <h3 className="mb-3 text-sm font-semibold text-[var(--text-primary)]">Ikuti Kami</h3>
                <div className="flex gap-2">
                  {s?.instagram && (
                    <a href={s.instagram} target="_blank" rel="noopener noreferrer"
                      className="flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--border-default)] bg-[var(--bg-input)] text-[var(--text-secondary)] transition-colors hover:border-[var(--accent-200)] hover:bg-[var(--accent-100)] hover:text-[var(--accent-400)]">
                      <Instagram className="h-4 w-4" />
                    </a>
                  )}
                  {s?.facebook && (
                    <a href={s.facebook} target="_blank" rel="noopener noreferrer"
                      className="flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--border-default)] bg-[var(--bg-input)] text-[var(--text-secondary)] transition-colors hover:border-[var(--accent-200)] hover:bg-[var(--accent-100)] hover:text-[var(--accent-400)]">
                      <Facebook className="h-4 w-4" />
                    </a>
                  )}
                  {s?.twitter && (
                    <a href={s.twitter} target="_blank" rel="noopener noreferrer"
                      className="flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--border-default)] bg-[var(--bg-input)] text-[var(--text-secondary)] transition-colors hover:border-[var(--accent-200)] hover:bg-[var(--accent-100)] hover:text-[var(--accent-400)]">
                      <Twitter className="h-4 w-4" />
                    </a>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="border-t border-[var(--border-default)] py-5">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between">
            <p className="text-xs text-[var(--text-quaternary)]">
              © {new Date().getFullYear()} {s?.storeName || 'FoodMart'}. Semua hak dilindungi.
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}