import { createFileRoute } from "@tanstack/react-router";
import { useState, useEffect } from "react";
import {
  Volume2,
  Check,
  Sparkles,
  Phone,
  Sliders,
  Type,
  Globe,
  Maximize2,
  Eye,
  Settings,
} from "lucide-react";
import { Card, PageTitle, Pill, Screen, SectionHeading } from "@/components/ui-kit";
import { DEFAULT_PROFILE, getUserProfile, saveUserProfile, UserProfile } from "@/lib/user-profile";
import {
  useUiSettings,
  saveUiSettings,
  FontFamilyOption,
  AppLanguageOption,
  t,
} from "@/lib/ui-settings";

export const Route = createFileRoute("/profile")({
  head: () => ({
    meta: [
      { title: "Settings & Customization · NeuroSaathi" },
      {
        name: "description",
        content:
          "Customize font styling, interface scale slider, app language (Hindi/English), and profile settings.",
      },
      { property: "og:title", content: "Settings & Customization · NeuroSaathi" },
      {
        property: "og:description",
        content:
          "Custom font size slider line, button size, languages (Hindi/English), and settings.",
      },
    ],
  }),
  component: Profile,
});

export function Profile() {
  const [profile, setProfile] = useState<UserProfile>(DEFAULT_PROFILE);
  const [name, setName] = useState(profile.name);
  const [voiceVol, setVoiceVol] = useState(90);
  const [saved, setSaved] = useState(false);

  const uiSettings = useUiSettings();
  const currentScale = uiSettings.scalePercent || 115;

  useEffect(() => {
    const p = getUserProfile();
    setProfile(p);
    setName(p.name);
  }, []);

  const handleProfileSave = (e: React.FormEvent) => {
    e.preventDefault();
    const updated = saveUserProfile({
      name: name.trim() || "Ayush",
      language: uiSettings.language as UserProfile["language"],
    });
    setProfile(updated);
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  const openOnboarding = () => {
    window.dispatchEvent(new CustomEvent("neurosaathi_open_onboarding"));
  };

  return (
    <Screen>
      <PageTitle
        title={t("nav_settings", uiSettings.language)}
        subtitle="फ़ॉन्ट स्टाइल, फ़ॉन्ट साइज़ स्लाइडर, बटन का साइज़ और भाषा (हिंदी / English) बदलें"
      />

      {/* --- 1. CONTINUOUS SLIDER LINE FOR FONT & UI SIZE (छोटा-बड़ा करने वाली स्लाइडर लाइन) --- */}
      <section className="space-y-3">
        <SectionHeading title="🎚️ Interface & Font Scale Slider (छोटा-बड़ा करने वाली लाइन)" />
        <Card className="p-5 sm:p-6 bg-card border-2 border-emerald-500/50 shadow-lg space-y-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Sliders className="h-5 w-5 text-emerald-500" />
              <p className="font-display text-sm sm:text-base font-extrabold text-foreground">
                Website Size Scale
              </p>
            </div>
            <span className="text-base sm:text-lg font-black text-emerald-600 dark:text-emerald-400 font-mono bg-emerald-500/15 px-3 py-1 rounded-full border border-emerald-500/30">
              {currentScale}%
            </span>
          </div>

          <p className="text-xs sm:text-sm font-semibold text-muted-foreground">
            Is slider line ko left ya right drag karke website ka text aur UI buttons chota ya bada
            karein (80% se 160% tak):
          </p>

          {/* Continuous Interactive Slider Line */}
          <div className="space-y-2 pt-2">
            <input
              type="range"
              min="80"
              max="160"
              step="5"
              value={currentScale}
              onChange={(e) => saveUiSettings({ scalePercent: Number(e.target.value) })}
              className="w-full h-3 bg-muted rounded-lg appearance-none cursor-pointer accent-emerald-500 hover:accent-emerald-400"
            />

            {/* Percentage Scale Markers */}
            <div className="flex justify-between text-[11px] font-black text-muted-foreground px-1">
              <span className={currentScale === 80 ? "text-emerald-500 font-extrabold" : ""}>
                80% (Chota)
              </span>
              <span className={currentScale === 100 ? "text-emerald-500 font-extrabold" : ""}>
                100% (Normal)
              </span>
              <span className={currentScale === 120 ? "text-emerald-500 font-extrabold" : ""}>
                120% (Bada)
              </span>
              <span className={currentScale === 140 ? "text-emerald-500 font-extrabold" : ""}>
                140% (Extra)
              </span>
              <span className={currentScale === 160 ? "text-emerald-500 font-extrabold" : ""}>
                160% (Senior)
              </span>
            </div>
          </div>

          {/* Quick Preset Buttons */}
          <div className="grid grid-cols-4 gap-2 pt-2 border-t border-border/60">
            {[
              { val: 90, label: "90% Compact" },
              { val: 100, label: "100% Normal" },
              { val: 120, label: "120% Large" },
              { val: 145, label: "145% Senior" },
            ].map((preset) => (
              <button
                key={preset.val}
                type="button"
                onClick={() => saveUiSettings({ scalePercent: preset.val })}
                className={`press py-2 px-1 rounded-xl text-[11px] font-extrabold border transition-all ${
                  currentScale === preset.val
                    ? "bg-emerald-500 text-white border-emerald-600 shadow-md"
                    : "bg-muted/60 text-muted-foreground border-border hover:text-foreground"
                }`}
              >
                {preset.label}
              </button>
            ))}
          </div>
        </Card>
      </section>

      {/* --- 2. LANGUAGE SELECTOR (HINDI / ENGLISH / HINGLISH) --- */}
      <section className="space-y-3">
        <SectionHeading title="🌐 App Language (भाषा चुनें - हिंदी / English)" />
        <p className="text-xs sm:text-sm font-semibold text-muted-foreground">
          Bhasha chunein. Isse puri website ka text aur AI Voice Assistant ki bhasha badal jayegi:
        </p>

        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
          {[
            { id: "Hindi", name: "हिंदी (Hindi)", sub: "संपूर्ण हिंदी भाषा", flag: "🇮🇳" },
            { id: "English", name: "English", sub: "Pure English Text", flag: "🌐" },
            { id: "Hinglish", name: "Hinglish", sub: "Easy Mix Language", flag: "🗣️" },
            { id: "Marathi", name: "मराठी", sub: "मराठी भाषा", flag: "🚩" },
            { id: "Punjabi", name: "ਪੰਜਾਬੀ", sub: "ਪੰਜਾਬੀ ਭਾਸ਼ਾ", flag: "ੴ" },
            { id: "Tamil", name: "தமிழ்", sub: "தமிழ் மொழி", flag: "🛕" },
          ].map((item) => {
            const isSelected = uiSettings.language === item.id;
            return (
              <button
                key={item.id}
                type="button"
                onClick={() => {
                  saveUiSettings({ language: item.id as AppLanguageOption });
                  saveUserProfile({ language: item.id as UserProfile["language"] });
                }}
                className={`press flex items-center justify-between p-3.5 rounded-2xl border-2 text-left transition-all ${
                  isSelected
                    ? "bg-emerald-500/15 border-emerald-500 shadow-md ring-2 ring-emerald-500/30"
                    : "bg-card border-border hover:border-emerald-500/40"
                }`}
              >
                <div>
                  <p className="text-sm font-black text-foreground flex items-center gap-1.5">
                    <span>{item.flag}</span> {item.name}
                  </p>
                  <p className="text-[11px] font-bold text-muted-foreground mt-0.5">{item.sub}</p>
                </div>
                {isSelected && <Check className="h-4.5 w-4.5 text-emerald-500 shrink-0" />}
              </button>
            );
          })}
        </div>
      </section>

      {/* --- 3. FONT STYLING CUSTOMIZATION --- */}
      <section className="space-y-3">
        <SectionHeading title="🔤 Font Family (फ़ॉन्ट की स्टाइलिंग)" />
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
          {[
            {
              id: "sans",
              name: "Modern Sans",
              desc: "Clean & Modern",
              preview: "Aa - Modern",
            },
            {
              id: "serif",
              name: "Classic Serif",
              desc: "Traditional Look",
              preview: "Aa - Classic",
            },
            {
              id: "dyslexic",
              name: "Easy Read",
              desc: "High Readability",
              preview: "Aa - Clear",
            },
            {
              id: "mono",
              name: "Tech Mono",
              desc: "Monospace",
              preview: "Aa - Tech",
            },
            {
              id: "rounded",
              name: "Soft Rounded",
              desc: "Friendly Style",
              preview: "Aa - Soft",
            },
          ].map((item) => {
            const isSelected = uiSettings.fontFamily === item.id;
            return (
              <button
                key={item.id}
                type="button"
                onClick={() => saveUiSettings({ fontFamily: item.id as FontFamilyOption })}
                className={`press flex flex-col justify-between p-3.5 rounded-2xl border-2 text-left transition-all ${
                  isSelected
                    ? "bg-emerald-500/15 border-emerald-500 shadow-sm"
                    : "bg-card border-border hover:border-emerald-500/40"
                }`}
              >
                <div className="flex items-center justify-between">
                  <span className="text-sm font-extrabold text-foreground">{item.name}</span>
                  {isSelected && <Check className="h-4 w-4 text-emerald-500" />}
                </div>
                <p className="text-[11px] font-bold text-muted-foreground mt-1">{item.desc}</p>
                <div className="mt-2 text-xs font-black text-emerald-600 dark:text-emerald-400">
                  {item.preview}
                </div>
              </button>
            );
          })}
        </div>
      </section>

      {/* --- 4. HIGH CONTRAST & AUDIO ACCESSIBILITY --- */}
      <section className="space-y-3">
        <SectionHeading title="👁️ Display & Audio Accessibility" />
        <Card className="space-y-4 bg-card border-border">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <p className="text-sm font-extrabold text-foreground">High Contrast Display Mode</p>
              <p className="text-xs font-bold text-muted-foreground">
                Senior vision ke liye extra sharp borders aur text contrast
              </p>
            </div>
            <button
              type="button"
              onClick={() => saveUiSettings({ highContrast: !uiSettings.highContrast })}
              className={`press relative inline-flex h-7 w-12 items-center rounded-full transition-colors ${
                uiSettings.highContrast ? "bg-emerald-500" : "bg-muted"
              }`}
            >
              <span
                className={`inline-block h-5 w-5 transform rounded-full bg-white transition-transform ${
                  uiSettings.highContrast ? "translate-x-6" : "translate-x-1"
                }`}
              />
            </button>
          </div>

          <div className="space-y-2 pt-2 border-t border-border/60">
            <div className="flex items-center justify-between">
              <span className="text-sm font-extrabold text-foreground flex items-center gap-2">
                <Volume2 className="h-4 w-4 text-emerald-500" /> AI Voice Speed & Volume
              </span>
              <span className="text-xs font-black text-emerald-600 dark:text-emerald-400 font-mono">
                {voiceVol}%
              </span>
            </div>
            <input
              type="range"
              min="0"
              max="100"
              value={voiceVol}
              onChange={(e) => setVoiceVol(Number(e.target.value))}
              className="w-full accent-emerald-500 cursor-pointer"
            />
          </div>
        </Card>
      </section>

      {/* --- 5. USER PROFILE & EMERGENCY CONTACT --- */}
      <section className="space-y-3">
        <SectionHeading title="👤 User Profile & Emergency Contact" />
        <Card className="space-y-4 bg-card border-border">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-gradient-to-tr from-emerald-500 to-teal-600 text-white text-lg font-black shadow-md">
                {profile.name ? profile.name.slice(0, 2).toUpperCase() : "NS"}
              </div>
              <div>
                <h3 className="font-display text-base font-extrabold text-foreground">
                  {profile.name} ji
                </h3>
                <p className="text-xs font-bold text-emerald-600 dark:text-emerald-400">
                  Active User · {uiSettings.language}
                </p>
              </div>
            </div>

            <button
              type="button"
              onClick={openOnboarding}
              className="press flex items-center gap-1.5 text-xs font-extrabold px-3.5 py-2 rounded-xl border border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-500/25 transition-all"
            >
              <Sparkles className="h-4 w-4" /> Re-run Setup
            </button>
          </div>

          <form onSubmit={handleProfileSave} className="space-y-3 pt-2">
            <div>
              <label className="text-xs font-extrabold uppercase tracking-wider text-muted-foreground">
                Aapka Shubh Naam (Name)
              </label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="mt-1 w-full rounded-xl border border-border bg-background px-3.5 py-2.5 text-sm font-extrabold text-foreground focus:border-emerald-500 focus:outline-none"
              />
            </div>

            <button
              type="submit"
              className="press flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-emerald-500 to-teal-600 py-3 text-sm font-extrabold text-white shadow-lg hover:brightness-110"
            >
              {saved ? (
                <>
                  <Check className="h-4 w-4" /> Saved!
                </>
              ) : (
                "Save Profile Changes"
              )}
            </button>
          </form>

          {/* Emergency Contact */}
          <div className="pt-3 border-t border-border/60">
            <div className="flex items-center justify-between mb-2">
              <div>
                <p className="font-display text-sm font-extrabold text-foreground">
                  Caregiver Emergency Number
                </p>
                <p className="text-xs font-bold text-muted-foreground">+91 98765 43210 (Priya)</p>
              </div>
              <Pill tone="destructive">Emergency 24/7</Pill>
            </div>
            <a
              href="tel:+919876543210"
              className="press flex min-h-[44px] w-full items-center justify-center gap-2 rounded-2xl bg-red-500 text-white text-sm font-extrabold shadow-sm hover:bg-red-600"
            >
              <Phone className="h-4 w-4" /> Call Caregiver Now
            </a>
          </div>
        </Card>
      </section>
    </Screen>
  );
}