import React, { useState, useRef, useEffect } from "react";
import { RotateCcw, Plus, Minus, Clock, Compass, Settings, Hand, ChevronLeft, ChevronRight, Bell, Moon, Globe, Info, CheckCircle2, Circle, Users, User, BookOpen } from "lucide-react";

const DHIKR_LIST = [
  { id: "subhanallah", ar: "سُبْحَانَ اللَّه", label: "Subhanallah" },
  { id: "alhamdulillah", ar: "الْحَمْدُ لِلَّه", label: "Alhamdulillah" },
  { id: "allahuakbar", ar: "اللَّهُ أَكْبَر", label: "Allahu Akbar" },
  { id: "astaghfirullah", ar: "أَسْتَغْفِرُ اللَّه", label: "Astaghfirullah" },
];

const PRAYER_TIMES = [
  { name: "Fajr", time: "04:32" },
  { name: "Dhuhr", time: "12:14" },
  { name: "Asr", time: "15:47" },
  { name: "Maghrib", time: "18:21" },
  { name: "Isha", time: "19:45" },
];

const PRAYER_CONFIG = [
  { id: "fajr", label: "ফজর", defaultRakat: 2 },
  { id: "dhuhr", label: "যোহর", defaultRakat: 4 },
  { id: "asr", label: "আসর", defaultRakat: 4 },
  { id: "maghrib", label: "মাগরিব", defaultRakat: 3 },
  { id: "isha", label: "এশা", defaultRakat: 4 },
];

function StarPattern({ className }) {
  return (
    <svg className={className} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="starTile" width="42" height="42" patternUnits="userSpaceOnUse">
          <g stroke="#C9A15A" strokeWidth="0.6" fill="none" opacity="0.5">
            <path d="M21 2 L27 12 L38 14 L30 22 L32 33 L21 28 L10 33 L12 22 L4 14 L15 12 Z" />
          </g>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#starTile)" />
    </svg>
  );
}

function TasbihTab() {
  const [activeDhikr, setActiveDhikr] = useState(0);
  const [counts, setCounts] = useState({ subhanallah: 0, alhamdulillah: 0, allahuakbar: 0, astaghfirullah: 0 });
  const [target, setTarget] = useState(33);
  const [pulse, setPulse] = useState(false);

  const current = DHIKR_LIST[activeDhikr];
  const count = counts[current.id];

  const tap = () => {
    setCounts((c) => ({ ...c, [current.id]: c[current.id] + 1 }));
    setPulse(true);
    setTimeout(() => setPulse(false), 140);
  };

  const reset = () => setCounts((c) => ({ ...c, [current.id]: 0 }));
  const cycleTarget = () => setTarget((t) => (t === 33 ? 99 : t === 99 ? 100 : 33));

  const progress = Math.min(count / target, 1);
  const circumference = 2 * Math.PI * 88;

  return (
    <div className="flex flex-col items-center px-5 pt-4 pb-2 h-full">
      <div className="flex items-center gap-2 w-full justify-center mb-4">
        <button
          onClick={() => setActiveDhikr((i) => (i - 1 + DHIKR_LIST.length) % DHIKR_LIST.length)}
          className="text-[#C9A15A] p-1"
          aria-label="Previous dhikr"
        >
          <ChevronLeft size={20} />
        </button>
        <div className="text-center min-w-[170px]">
          <div className="font-['Amiri'] text-lg text-[#0E3B36]" dir="rtl">{current.ar}</div>
          <div className="text-[11px] tracking-wide text-[#8B6F47] uppercase font-medium">{current.label}</div>
        </div>
        <button
          onClick={() => setActiveDhikr((i) => (i + 1) % DHIKR_LIST.length)}
          className="text-[#C9A15A] p-1"
          aria-label="Next dhikr"
        >
          <ChevronRight size={20} />
        </button>
      </div>

      <div className="relative flex items-center justify-center my-2">
        <svg width="200" height="200" className="-rotate-90">
          <circle cx="100" cy="100" r="88" fill="none" stroke="#E7DEC7" strokeWidth="6" />
          <circle
            cx="100"
            cy="100"
            r="88"
            fill="none"
            stroke="#C9A15A"
            strokeWidth="6"
            strokeLinecap="round"
            strokeDasharray={circumference}
            strokeDashoffset={circumference * (1 - progress)}
            style={{ transition: "stroke-dashoffset 200ms ease" }}
          />
        </svg>
        <div className="absolute flex flex-col items-center">
          <span className="font-['Amiri'] text-6xl text-[#0E3B36] leading-none">{count}</span>
          <span className="text-[11px] text-[#8B6F47] mt-1">of {target}</span>
        </div>
      </div>

      <button
        onClick={tap}
        className="mt-4 w-28 h-28 rounded-full flex flex-col items-center justify-center shadow-lg active:scale-95 transition-transform"
        style={{
          background: "radial-gradient(circle at 35% 30%, #A6543F, #7A3428)",
          transform: pulse ? "scale(0.94)" : "scale(1)",
          transition: "transform 120ms ease",
        }}
      >
        <Plus size={26} color="#F8F2E4" />
        <span className="text-[10px] text-[#F3D9C8] tracking-wide mt-0.5">TAP</span>
      </button>

      <div className="flex items-center gap-3 mt-5">
        <button
          onClick={reset}
          className="flex items-center gap-1.5 px-4 py-2 rounded-full bg-[#F0E7D3] text-[#8B4A3D] text-sm font-medium"
        >
          <RotateCcw size={14} /> Reset
        </button>
        <button
          onClick={cycleTarget}
          className="px-4 py-2 rounded-full bg-[#0E3B36] text-[#F8F2E4] text-sm font-medium"
        >
          Target: {target}
        </button>
      </div>

      <div className="w-full mt-5 space-y-1.5">
        {DHIKR_LIST.map((d, i) => (
          <button
            key={d.id}
            onClick={() => setActiveDhikr(i)}
            className={`w-full flex items-center justify-between px-3.5 py-2 rounded-xl text-left ${
              i === activeDhikr ? "bg-[#0E3B36]" : "bg-[#F0E7D3]"
            }`}
          >
            <span className={`text-sm font-medium ${i === activeDhikr ? "text-[#F8F2E4]" : "text-[#3A362B]"}`}>
              {d.label}
            </span>
            <span className={`text-xs tabular-nums ${i === activeDhikr ? "text-[#C9A15A]" : "text-[#8B6F47]"}`}>
              {counts[d.id]}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

function PrayerTab() {
  const now = "14:02";
  return (
    <div className="px-5 pt-6 pb-2 h-full flex flex-col">
      <div className="text-center mb-5">
        <div className="text-[11px] uppercase tracking-widest text-[#8B6F47]">Next Prayer</div>
        <div className="font-['Amiri'] text-3xl text-[#0E3B36] mt-1">Asr &middot; 15:47</div>
        <div className="text-xs text-[#8B6F47] mt-1">in 1h 45m</div>
      </div>
      <div className="rounded-2xl bg-[#F0E7D3] overflow-hidden">
        {PRAYER_TIMES.map((p, i) => (
          <div
            key={p.name}
            className={`flex items-center justify-between px-4 py-3 ${
              i !== PRAYER_TIMES.length - 1 ? "border-b border-[#E2D6B8]" : ""
            } ${p.name === "Asr" ? "bg-[#0E3B36]" : ""}`}
          >
            <span className={`text-sm font-medium ${p.name === "Asr" ? "text-[#F8F2E4]" : "text-[#3A362B]"}`}>
              {p.name}
            </span>
            <span className={`text-sm tabular-nums ${p.name === "Asr" ? "text-[#C9A15A]" : "text-[#8B6F47]"}`}>
              {p.time}
            </span>
          </div>
        ))}
      </div>
      <div className="mt-4 text-[11px] text-[#8B6F47] text-center leading-relaxed">
        Sample times shown &mdash; connecting real location &amp; calculation method needs a prayer-times API.
      </div>
    </div>
  );
}

function QiblaTab() {
  const [angle] = useState(292);
  return (
    <div className="px-5 pt-6 pb-2 h-full flex flex-col items-center">
      <div className="text-[11px] uppercase tracking-widest text-[#8B6F47] mb-1">Qibla Direction</div>
      <div className="font-['Amiri'] text-2xl text-[#0E3B36] mb-6">{angle}&deg; from North</div>
      <div className="relative w-52 h-52 rounded-full border-2 border-[#C9A15A] flex items-center justify-center"
           style={{ background: "radial-gradient(circle, #F8F2E4 0%, #F0E7D3 100%)" }}>
        {["N", "E", "S", "W"].map((dir, i) => (
          <span
            key={dir}
            className="absolute text-[11px] font-semibold text-[#8B6F47]"
            style={{
              top: i === 0 ? "6px" : i === 2 ? "auto" : "50%",
              bottom: i === 2 ? "6px" : "auto",
              left: i === 3 ? "8px" : i === 1 ? "auto" : "50%",
              right: i === 1 ? "8px" : "auto",
              transform: i === 0 || i === 2 ? "translateX(-50%)" : "translateY(-50%)",
            }}
          >
            {dir}
          </span>
        ))}
        <div
          className="absolute w-1 h-20 rounded-full origin-bottom"
          style={{
            background: "linear-gradient(#7A3428, #C9A15A)",
            bottom: "50%",
            transform: `rotate(${angle}deg)`,
          }}
        />
        <div className="w-3 h-3 rounded-full bg-[#0E3B36]" />
      </div>
      <div className="mt-6 text-[11px] text-[#8B6F47] text-center leading-relaxed px-4">
        A live compass needs device orientation permission, which only works when this runs as an installed app on a phone.
      </div>
    </div>
  );
}

function PrayerCard({ config, data, onChange }) {
  const { done, rakat, mode } = data;
  return (
    <div className="rounded-2xl bg-[#F0E7D3] px-4 py-3 mb-2.5">
      <div className="flex items-center justify-between">
        <button onClick={() => onChange({ ...data, done: !done })} className="flex items-center gap-2.5">
          {done ? (
            <CheckCircle2 size={20} className="text-[#0E3B36]" />
          ) : (
            <Circle size={20} className="text-[#B3A583]" />
          )}
          <span className={`text-sm font-medium ${done ? "text-[#3A362B]" : "text-[#8B6F47]"}`}>{config.label}</span>
        </button>
        {done && (
          <div className="flex items-center gap-1.5">
            <button
              onClick={() => onChange({ ...data, rakat: Math.max(0, rakat - 1) })}
              className="w-6 h-6 rounded-full bg-[#E2D6B8] flex items-center justify-center text-[#0E3B36]"
            >
              <Minus size={12} />
            </button>
            <span className="w-5 text-center text-sm tabular-nums text-[#0E3B36]">{rakat}</span>
            <button
              onClick={() => onChange({ ...data, rakat: rakat + 1 })}
              className="w-6 h-6 rounded-full bg-[#E2D6B8] flex items-center justify-center text-[#0E3B36]"
            >
              <Plus size={12} />
            </button>
          </div>
        )}
      </div>
      {done && (
        <div className="flex gap-1.5 mt-2.5 ml-7">
          <button
            onClick={() => onChange({ ...data, mode: "jamaat" })}
            className={`flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium ${
              mode === "jamaat" ? "bg-[#0E3B36] text-[#F8F2E4]" : "bg-[#E2D6B8] text-[#8B6F47]"
            }`}
          >
            <Users size={11} /> জামায়াতে
          </button>
          <button
            onClick={() => onChange({ ...data, mode: "alone" })}
            className={`flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium ${
              mode === "alone" ? "bg-[#0E3B36] text-[#F8F2E4]" : "bg-[#E2D6B8] text-[#8B6F47]"
            }`}
          >
            <User size={11} /> একা
          </button>
        </div>
      )}
    </div>
  );
}

function AmolTab() {
  const [prayers, setPrayers] = useState({
    fajr: { done: false, rakat: 2, mode: "jamaat" },
    dhuhr: { done: false, rakat: 4, mode: "jamaat" },
    asr: { done: false, rakat: 4, mode: "jamaat" },
    maghrib: { done: false, rakat: 3, mode: "jamaat" },
    isha: { done: false, rakat: 4, mode: "jamaat" },
  });
  const [tahajjud, setTahajjud] = useState({ done: false, rakat: 2 });
  const [quran, setQuran] = useState({ done: false, from: "", to: "" });

  const updatePrayer = (id, data) => setPrayers((p) => ({ ...p, [id]: data }));

  const totalRakat =
    Object.values(prayers).reduce((s, p) => s + (p.done ? p.rakat : 0), 0) + (tahajjud.done ? tahajjud.rakat : 0);
  const jamaatCount = Object.values(prayers).filter((p) => p.done && p.mode === "jamaat").length;
  const ishaDone = prayers.isha.done;

  return (
    <div className="px-5 pt-5 pb-2 h-full overflow-y-auto">
      <div className="text-center mb-4">
        <div className="text-[11px] uppercase tracking-widest text-[#8B6F47]">আজকের আমল</div>
        <div className="font-['Amiri'] text-2xl text-[#0E3B36] mt-1">{totalRakat} রাকাত আদায়</div>
        <div className="text-[11px] text-[#8B6F47] mt-0.5">{jamaatCount} ওয়াক্ত জামায়াতে</div>
      </div>

      {PRAYER_CONFIG.map((cfg) => (
        <PrayerCard key={cfg.id} config={cfg} data={prayers[cfg.id]} onChange={(d) => updatePrayer(cfg.id, d)} />
      ))}

      {ishaDone && (
        <div className="rounded-2xl bg-[#0E3B36] px-4 py-3 mb-2.5 mt-1">
          <div className="flex items-center justify-between">
            <button
              onClick={() => setTahajjud((t) => ({ ...t, done: !t.done }))}
              className="flex items-center gap-2.5"
            >
              {tahajjud.done ? (
                <CheckCircle2 size={20} className="text-[#C9A15A]" />
              ) : (
                <Circle size={20} className="text-[#5A7A74]" />
              )}
              <div className="text-left">
                <div className="text-sm font-medium text-[#F8F2E4]">তাহাজ্জুদ</div>
                <div className="text-[10px] text-[#9DB8B2]">এশার পর, ফজরের আগে</div>
              </div>
            </button>
            {tahajjud.done && (
              <div className="flex items-center gap-1.5">
                <button
                  onClick={() => setTahajjud((t) => ({ ...t, rakat: Math.max(0, t.rakat - 1) }))}
                  className="w-6 h-6 rounded-full bg-[#1B5750] flex items-center justify-center text-[#C9A15A]"
                >
                  <Minus size={12} />
                </button>
                <span className="w-5 text-center text-sm tabular-nums text-[#F8F2E4]">{tahajjud.rakat}</span>
                <button
                  onClick={() => setTahajjud((t) => ({ ...t, rakat: t.rakat + 1 }))}
                  className="w-6 h-6 rounded-full bg-[#1B5750] flex items-center justify-center text-[#C9A15A]"
                >
                  <Plus size={12} />
                </button>
              </div>
            )}
          </div>
        </div>
      )}
      {!ishaDone && (
        <div className="rounded-2xl border border-dashed border-[#D9CCA8] px-4 py-3 mb-2.5 mt-1 text-center">
          <span className="text-[11px] text-[#B3A583]">এশা আদায় করলে তাহাজ্জুদ অপশন চালু হবে</span>
        </div>
      )}

      <div className="rounded-2xl bg-[#F0E7D3] px-4 py-3 mt-2 mb-3">
        <button onClick={() => setQuran((q) => ({ ...q, done: !q.done }))} className="flex items-center gap-2.5">
          {quran.done ? (
            <CheckCircle2 size={20} className="text-[#0E3B36]" />
          ) : (
            <Circle size={20} className="text-[#B3A583]" />
          )}
          <span className={`text-sm font-medium ${quran.done ? "text-[#3A362B]" : "text-[#8B6F47]"}`}>
            আজ কোরআন তিলাওয়াত করেছি
          </span>
        </button>
        {quran.done && (
          <div className="mt-3 ml-7 flex flex-col gap-2">
            <input
              value={quran.from}
              onChange={(e) => setQuran((q) => ({ ...q, from: e.target.value }))}
              placeholder="শুরু — যেমন: সূরা বাকারা, আয়াত ১"
              className="text-xs px-3 py-2 rounded-lg bg-[#F8F2E4] border border-[#E2D6B8] text-[#3A362B] placeholder-[#B3A583] outline-none"
            />
            <input
              value={quran.to}
              onChange={(e) => setQuran((q) => ({ ...q, to: e.target.value }))}
              placeholder="শেষ — যেমন: সূরা বাকারা, আয়াত ২০"
              className="text-xs px-3 py-2 rounded-lg bg-[#F8F2E4] border border-[#E2D6B8] text-[#3A362B] placeholder-[#B3A583] outline-none"
            />
          </div>
        )}
      </div>
    </div>
  );
}

function ToggleRow({ icon: Icon, label, sub, value, onChange }) {
  return (
    <div className="flex items-center justify-between px-4 py-3.5 border-b border-[#E2D6B8] last:border-b-0">
      <div className="flex items-center gap-3">
        <Icon size={18} className="text-[#8B4A3D]" />
        <div>
          <div className="text-sm font-medium text-[#3A362B]">{label}</div>
          {sub && <div className="text-[11px] text-[#8B6F47]">{sub}</div>}
        </div>
      </div>
      <button
        onClick={() => onChange(!value)}
        className={`w-10 h-6 rounded-full flex items-center px-0.5 transition-colors ${
          value ? "bg-[#0E3B36] justify-end" : "bg-[#D9CCA8] justify-start"
        }`}
      >
        <div className="w-5 h-5 rounded-full bg-[#F8F2E4]" />
      </button>
    </div>
  );
}

function SettingsTab() {
  const [notif, setNotif] = useState(true);
  const [dark, setDark] = useState(false);
  const [arabic, setArabic] = useState(true);
  return (
    <div className="px-5 pt-6 pb-2 h-full flex flex-col">
      <div className="text-[11px] uppercase tracking-widest text-[#8B6F47] mb-2 px-1">Preferences</div>
      <div className="rounded-2xl bg-[#F0E7D3] overflow-hidden">
        <ToggleRow icon={Bell} label="Prayer alerts" sub="Notify at each prayer time" value={notif} onChange={setNotif} />
        <ToggleRow icon={Moon} label="Dark theme" sub="Easier on the eyes at night" value={dark} onChange={setDark} />
        <ToggleRow icon={Globe} label="Show Arabic text" sub="Dhikr shown in Arabic script" value={arabic} onChange={setArabic} />
      </div>
      <div className="mt-4 rounded-2xl bg-[#F0E7D3] overflow-hidden">
        <div className="flex items-center gap-3 px-4 py-3.5">
          <Info size={18} className="text-[#8B4A3D]" />
          <div>
            <div className="text-sm font-medium text-[#3A362B]">Noor</div>
            <div className="text-[11px] text-[#8B6F47]">Prototype v0.1 &middot; demo data only</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function NoorApp() {
  const [tab, setTab] = useState("tasbih");

  const tabs = [
    { id: "tasbih", label: "Tasbih", icon: Hand },
    { id: "prayer", label: "Prayer", icon: Clock },
    { id: "amol", label: "Amol", icon: BookOpen },
    { id: "qibla", label: "Qibla", icon: Compass },
    { id: "settings", label: "Settings", icon: Settings },
  ];

  return (
    <div className="min-h-screen w-full flex items-center justify-center py-8" style={{ background: "#0E3B36" }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Inter:wght@400;500;600&display=swap');
        * { font-family: 'Inter', sans-serif; }
      `}</style>

      <div className="relative w-[340px] h-[700px] rounded-[42px] overflow-hidden shadow-2xl" style={{ background: "#F8F2E4" }}>
        <div className="absolute inset-0 opacity-[0.12] pointer-events-none">
          <StarPattern className="w-full h-full" />
        </div>

        {/* Header */}
        <div className="relative flex items-center justify-between px-5 pt-6 pb-3">
          <div className="flex items-center gap-1.5">
            <Moon size={18} className="text-[#0E3B36]" fill="#0E3B36" />
            <span className="font-['Amiri'] text-lg text-[#0E3B36]">Noor</span>
          </div>
          <div className="w-8 h-8 rounded-full bg-[#0E3B36] flex items-center justify-center">
            <span className="text-[#C9A15A] text-xs font-semibold">A</span>
          </div>
        </div>

        {/* Content */}
        <div className="relative" style={{ height: "560px" }}>
          {tab === "tasbih" && <TasbihTab />}
          {tab === "prayer" && <PrayerTab />}
          {tab === "amol" && <AmolTab />}
          {tab === "qibla" && <QiblaTab />}
          {tab === "settings" && <SettingsTab />}
        </div>

        {/* Bottom nav */}
        <div className="absolute bottom-0 left-0 right-0 bg-[#F8F2E4] border-t border-[#E2D6B8] flex justify-around py-2.5">
          {tabs.map((t) => {
            const Icon = t.icon;
            const active = tab === t.id;
            return (
              <button
                key={t.id}
                onClick={() => setTab(t.id)}
                className="flex flex-col items-center gap-1 px-1.5"
              >
                <Icon size={18} color={active ? "#8B4A3D" : "#B3A583"} />
                <span className={`text-[9px] font-medium ${active ? "text-[#8B4A3D]" : "text-[#B3A583]"}`}>
                  {t.label}
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}