"use client";

import { useRouter } from "next/navigation";
import { Bell, Shield, HelpCircle, LogOut, ChevronLeft } from "lucide-react";
import { Card } from "@/components/ui/Card";
import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";
import { useAuth } from "@/lib/auth-context";

const comingSoonItems = [
  { icon: Bell, label: "اعلان‌ها" },
  { icon: Shield, label: "حریم خصوصی و امنیت" },
  { icon: HelpCircle, label: "راهنما و پشتیبانی" },
];

export default function SettingsPage() {
  const router = useRouter();
  const { user, logout } = useAuth();

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

  return (
    <div className="flex flex-col gap-4 px-5 pt-[calc(env(safe-area-inset-top)+16px)] pb-8">
      <h1 className="font-[var(--font-display)] font-extrabold text-[22px] px-1">
        تنظیمات ⚙️
      </h1>

      <Card className="flex items-center justify-between">
        <div>
          <p className="text-[13px] text-(--color-content-tertiary)">شماره موبایل</p>
          <p dir="ltr" className="text-[15px] font-bold text-(--color-content-primary)">
            {user?.phone}
          </p>
        </div>
      </Card>

      <Card padded={false} className="overflow-hidden">
        {comingSoonItems.map((item, i) => {
          const Icon = item.icon;
          return (
            <button
              key={item.label}
              className={`w-full flex items-center gap-3 px-4 py-3.5 text-right ${
                i !== comingSoonItems.length - 1 ? "border-b border-(--color-border-subtle)" : ""
              }`}
            >
              <Icon size={18} className="text-(--color-content-secondary) shrink-0" />
              <span className="flex-1 text-[14px] text-(--color-content-primary)">
                {item.label}
              </span>
              <Badge tone="neutral" className="text-[10px]">
                به‌زودی
              </Badge>
              <ChevronLeft size={16} className="text-(--color-content-tertiary)" />
            </button>
          );
        })}
      </Card>

      <Button
        variant="tertiary"
        size="lg"
        isBlock
        icon={<LogOut size={17} />}
        onClick={handleLogout}
        className="!text-(--color-status-error) !border-red-200 mt-4"
      >
        خروج از حساب
      </Button>
    </div>
  );
}