'use client';

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { useLanguage } from "@/lib/language-context";
import { getTranslation } from "@/lib/translations";
import { useState } from 'react';
import { motion, AnimatePresence } from "framer-motion";
import { User, Lock, MapPin, LogIn, Phone, MessageCircle } from "lucide-react";

/**
 * =============================================================================
 * STAFF LOGIN / AUTHENTICATION PAGE
 * =============================================================================
 * 
 * Beautiful, theme-matched placeholder login experience.
 * - Fully language compatible (sv default + en/hi/ur)
 * - No real backend yet — always shows friendly "under construction" message
 * - Mobile-first: large tap targets, excellent spacing, easy form on phones
 * - Desktop: elegant split layout with dark luxury graphic panel + form
 * - Uses existing design tokens (gold accents, cream bg, rounded cards, serif titles)
 * 
 * Future: when real auth is added, this will become the entry to a protected staff area
 * (per-site menus, orders, inventory etc. for Askim vs Backaplan).
 */

export default function LoginPage() {
  const { language } = useLanguage();
  const t = getTranslation(language);

  const [formData, setFormData] = useState({
    username: '',
    password: '',
    site: '',
  });
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // Placeholder behaviour: always show the construction notice.
    // No validation beyond native required fields — real auth coming later.
    setIsSubmitted(true);
  };

  const resetForm = () => {
    setFormData({ username: '', password: '', site: '' });
    setIsSubmitted(false);
  };

  return (
    <div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
      <Navbar />

      <main className="pt-16 pb-20">
        {/* Elegant header */}
        <div className="max-w-5xl mx-auto px-6 pt-8 text-center">
          <div className="inline-flex items-center gap-2 rounded-full bg-[#B38B4D]/10 px-4 py-1 text-[#B38B4D] text-[10px] tracking-[3.5px] font-medium mb-4">
            STAFF PORTAL
          </div>
          <h1 className="font-serif text-5xl md:text-6xl tracking-[-2.2px] leading-none mb-4">
            {t.auth.title}
          </h1>
          <p className="mx-auto max-w-md text-lg text-[#6B665F]">
            {t.auth.subtitle}
          </p>
        </div>

        {/* Content area — beautiful split layout on desktop, clean single column on mobile */}
        <div className="mx-auto max-w-5xl px-6 mt-10">
          <div className="grid items-start gap-8 md:grid-cols-5">
            {/* LEFT: Premium dark graphic panel (desktop only). Matches Shahi theme with gold details. */}
            <div className="hidden md:col-span-2 md:block">
              <div className="sticky top-24 flex h-[520px] flex-col justify-between overflow-hidden rounded-3xl border border-[#c99a2e]/20 bg-gradient-to-br from-[#101724] via-[#1a1816] to-[#2C2A26] p-10 text-white shadow-2xl">
                {/* Subtle gold frame lines */}
                <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#c99a2e] to-transparent" />
                <div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-[#c99a2e]/50 to-transparent" />

                <div>
                  <div className="mb-8 inline-flex h-16 w-16 items-center justify-center rounded-2xl border border-[#c99a2e]/30 bg-white/5 p-3 backdrop-blur">
                    <img
                      src="/images/logo/logo1.png"
                      alt="Shahi Kitchen"
                      className="h-full w-full object-contain"
                    />
                  </div>

                  <div className="font-serif text-[42px] leading-[0.95] tracking-[-1.8px]">
                    Shahi<br />Kitchen
                  </div>
                  <div className="mt-1 text-sm font-medium tracking-[2.5px] text-[#c99a2e]">
                    STAFF ACCESS
                  </div>
                </div>

                <div>
                  <div className="my-6 h-px w-10 bg-[#c99a2e]/40" />
                  <p className="max-w-[220px] text-sm leading-relaxed text-white/70">
                    Two locations serving Shahi Indian &amp; Pakistani hospitality in Gothenburg since 2016.
                  </p>
                  <div className="mt-5 text-[10px] uppercase tracking-[2.5px] text-[#c99a2e]/60">
                    ASKIM • BACKAPLAN
                  </div>
                </div>
              </div>
            </div>

            {/* RIGHT / MOBILE: The actual elegant login card */}
            <div className="md:col-span-3">
              <div className="rounded-3xl border border-[#EDE6D9] bg-white p-8 shadow-xl md:p-10">
                {/* Mobile-only logo accent for visual continuity */}
                <div className="mb-6 flex justify-center md:hidden">
                  <div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-[#c99a2e]/30 bg-[#F8F5F0] p-2.5">
                    <img src="/images/logo/logo1.png" alt="Shahi Kitchen" className="h-full w-full object-contain" />
                  </div>
                </div>

                <AnimatePresence mode="wait">
                  {!isSubmitted ? (
                    <motion.div
                      key="login-form"
                      initial={{ opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -8 }}
                      transition={{ duration: 0.2 }}
                    >
                      <form onSubmit={handleSubmit} className="space-y-6">
                        {/* Username */}
                        <div>
                          <label htmlFor="username" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
                            {t.auth.usernameLabel}
                          </label>
                          <div className="relative">
                            <User className="absolute left-4 top-4 h-5 w-5 text-[#B38B4D]" />
                            <input
                              id="username"
                              name="username"
                              type="text"
                              value={formData.username}
                              onChange={handleChange}
                              placeholder={t.auth.usernamePlaceholder}
                              required
                              className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 pl-12 pr-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                            />
                          </div>
                        </div>

                        {/* Password */}
                        <div>
                          <label htmlFor="password" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
                            {t.auth.passwordLabel}
                          </label>
                          <div className="relative">
                            <Lock className="absolute left-4 top-4 h-5 w-5 text-[#B38B4D]" />
                            <input
                              id="password"
                              name="password"
                              type="password"
                              value={formData.password}
                              onChange={handleChange}
                              placeholder={t.auth.passwordPlaceholder}
                              required
                              className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 pl-12 pr-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                            />
                          </div>
                        </div>

                        {/* Site / Location dropdown — Askim or Backaplan */}
                        <div>
                          <label htmlFor="site" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
                            {t.auth.siteLabel}
                          </label>
                          <div className="relative">
                            <MapPin className="pointer-events-none absolute left-4 top-4 z-10 h-5 w-5 text-[#B38B4D]" />
                            <select
                              id="site"
                              name="site"
                              value={formData.site}
                              onChange={handleChange}
                              required
                              className="w-full cursor-pointer appearance-none rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 pl-12 pr-10 text-[17px] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                            >
                              <option value="">{t.auth.sitePlaceholder}</option>
                              <option value="askim">{t.auth.askim}</option>
                              <option value="backaplan">{t.auth.backaplan}</option>
                            </select>
                            {/* Custom dropdown arrow for polish */}
                            <div className="pointer-events-none absolute right-4 top-4 text-[#B38B4D]">▾</div>
                          </div>
                          <p className="mt-1.5 text-[11px] text-[#8A8478]">Select the location you are working at today.</p>
                        </div>

                        {/* Primary gold action button — large & mobile friendly */}
                        <button
                          type="submit"
                          className="btn-primary mt-2 flex w-full items-center justify-center gap-3 rounded-2xl py-4 text-base font-semibold tracking-[0.5px] active:scale-[0.985] transition"
                        >
                          <LogIn className="h-5 w-5" />
                          {t.auth.submit}
                        </button>
                      </form>

                      <p className="mt-8 text-center text-[11px] tracking-wide text-[#8A8478]">
                        {t.auth.footerNote}
                      </p>
                    </motion.div>
                  ) : (
                    /* Beautiful result state — always shows the construction notice */
                    <motion.div
                      key="construction-result"
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="text-center"
                    >
                      <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-[#B38B4D]/10">
                        <LogIn className="h-8 w-8 text-[#B38B4D]" />
                      </div>

                      <h2 className="mb-3 font-serif text-3xl tracking-[-1px]">
                        {t.auth.construction.title}
                      </h2>

                      <p className="mx-auto max-w-md text-[15px] leading-relaxed text-[#6B665F]">
                        {t.auth.construction.message}
                      </p>

                      {/* Helpful contact actions (real numbers from the site) */}
                      <div className="mt-8 space-y-3">
                        <a
                          href="tel:031288910"
                          className="flex w-full items-center justify-center gap-2 rounded-2xl border border-[#EDE6D9] py-3.5 text-sm font-medium transition active:bg-[#F8F5F0] hover:bg-[#F8F5F0]"
                        >
                          <Phone className="h-4 w-4" />
                          {t.auth.construction.contact} — 031-28 89 10
                        </a>

                        <a
                          href="https://wa.me/46739381089"
                          target="_blank"
                          rel="noopener noreferrer"
                          className="flex w-full items-center justify-center gap-2 rounded-2xl border border-[#EDE6D9] py-3.5 text-sm font-medium transition active:bg-[#F8F5F0] hover:bg-[#F8F5F0]"
                        >
                          <MessageCircle className="h-4 w-4" />
                          WhatsApp +46 73 938 10 89
                        </a>

                        <button
                          onClick={resetForm}
                          className="mt-2 w-full rounded-2xl bg-[#101724] py-3.5 text-sm font-semibold text-white active:bg-black transition"
                        >
                          {t.auth.construction.tryAgain}
                        </button>
                      </div>

                      <p className="mt-6 text-[10px] text-[#8A8478]">
                        We appreciate your patience while we build a seamless experience.
                      </p>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>

              {/* Small trust line */}
              <p className="mt-5 text-center text-[10px] text-[#8A8478] tracking-[1px]">
                SHAHI KITCHEN • GOTHENBURG • EST 2016
              </p>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  );
}