"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { useTheme } from "@/components/ThemeProvider";
import { useTranslation, LOCALES } from "@/lib/i18n";
import type { Locale } from "@/lib/i18n";

export default function SettingsPage() {
  const { token, user, logout } = useAuth();
  const { theme, toggleTheme } = useTheme();
  const { t, locale, setLocale } = useTranslation();
  const router = useRouter();
  const [notifications, setNotifications] = useState({
    push: true,
    email: false,
    taskReminders: true,
    dailySummary: false,
  });
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    if (!token) {
      router.replace("/login");
    }
    // Load saved preferences
    if (typeof window !== "undefined") {
      const savedNotifs = localStorage.getItem("taskteam_notifications");
      if (savedNotifs) {
        try {
          setNotifications(JSON.parse(savedNotifs));
        } catch {
          // ignore
        }
      }
    }
  }, [token, router]);

  function handleSave() {
    if (typeof window !== "undefined") {
      localStorage.setItem("taskteam_notifications", JSON.stringify(notifications));
    }
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  }

  function handleLogout() {
    logout();
    router.push("/login");
  }

  if (!token) return null;

  return (
    <div className="max-w-lg mx-auto space-y-6 px-4 pb-24 sm:pb-8">
      <h1 className="text-xl font-bold">{t("settings.title")}</h1>

      {/* Profile section */}
      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
        <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.profile")}</h2>
        <div className="flex items-center gap-4">
          <div className="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-xl font-bold">
            {(user?.name || user?.email || "?").charAt(0).toUpperCase()}
          </div>
          <div className="min-w-0">
            <p className="font-semibold text-lg">{user?.name || t("settings.user")}</p>
            <p className="text-sm text-muted truncate">{user?.email}</p>
          </div>
        </div>
      </div>

      {/* Appearance */}
      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
        <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.appearance")}</h2>

        {/* Theme toggle */}
        <div className="flex items-center justify-between py-3">
          <div className="flex items-center gap-3">
            {theme === "dark" ? (
              <svg className="w-5 h-5 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
              </svg>
            ) : (
              <svg className="w-5 h-5 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
            )}
            <span className="text-sm font-medium">
              {theme === "dark" ? t("settings.dark") : t("settings.light")}
            </span>
          </div>
          <button
            onClick={toggleTheme}
            className={`relative w-12 h-7 rounded-full transition-colors ${
              theme === "dark" ? "bg-blue-600" : "bg-gray-300"
            }`}
            aria-label={t("common.toggleTheme")}
          >
            <div
              className={`absolute top-0.5 w-6 h-6 bg-white rounded-full shadow transition-transform ${
                theme === "dark" ? "translate-x-5" : "translate-x-0.5"
              }`}
            />
          </button>
        </div>
      </div>

      {/* Language */}
      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
        <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.language")}</h2>
        <div className="grid grid-cols-2 gap-2">
          {LOCALES.map((lang) => (
            <button
              key={lang.code}
              onClick={() => setLocale(lang.code as Locale)}
              className={`flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium transition-all ${
                locale === lang.code
                  ? "bg-blue-600 text-white shadow-md"
                  : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
              }`}
            >
              <span className="text-lg">{lang.flag}</span>
              <span>{lang.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Notifications */}
      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
        <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.notifications")}</h2>
        <div className="space-y-1">
          {[
            { key: "push" as const, label: t("settings.push") },
            { key: "email" as const, label: t("settings.email") },
            { key: "taskReminders" as const, label: t("settings.taskReminders") },
            { key: "dailySummary" as const, label: t("settings.dailySummary") },
          ].map((item) => (
            <div key={item.key} className="flex items-center justify-between py-3">
              <span className="text-sm font-medium">{item.label}</span>
              <button
                onClick={() =>
                  setNotifications((prev) => ({
                    ...prev,
                    [item.key]: !prev[item.key],
                  }))
                }
                className={`relative w-12 h-7 rounded-full transition-colors ${
                  notifications[item.key] ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
                }`}
                aria-label={item.label}
              >
                <div
                  className={`absolute top-0.5 w-6 h-6 bg-white rounded-full shadow transition-transform ${
                    notifications[item.key] ? "translate-x-5" : "translate-x-0.5"
                  }`}
                />
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* Save button */}
      <button
        onClick={handleSave}
        className={`w-full py-3 rounded-xl font-medium transition-all ${
          saved
            ? "bg-green-600 text-white"
            : "bg-blue-600 hover:bg-blue-700 text-white"
        }`}
      >
        {saved ? t("settings.saved") : t("settings.save")}
      </button>

      {/* Logout */}
      <button
        onClick={handleLogout}
        className="w-full py-3 rounded-xl font-medium border border-red-300 dark:border-red-800 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
      >
        {t("auth.logout")}
      </button>

      {/* App info */}
      <div className="text-center text-xs text-muted py-4">
        <p>{t("common.appName")} {t("common.appVersion")}</p>
      </div>
    </div>
  );
}