import Link from "next/link";

// /settings is a hub page that links to the actual working settings screens.
// An earlier version of this page rendered uncontrolled <input> elements with
// a Save button that POSTed `{}` — every change was silently discarded. The
// real edit forms live under /manage/profile/account-information,
// /settings/security, etc., so we redirect users there instead of duplicating
// the UI.
export const metadata = {
  title: "Settings",
  robots: { index: false, follow: false },
};

const sections: { title: string; description: string; href: string; icon: string }[] = [
  {
    title: "Account & Profile",
    description: "Email, username, gender, date of birth, bio.",
    href: "/manage/profile/account-information",
    icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
  },
  {
    title: "Notifications",
    description: "Push, email digests, message alerts.",
    href: "/settings/notifications",
    icon: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9",
  },
  {
    title: "Privacy & Data",
    description: "Cookie preferences, data export, profile visibility.",
    href: "/settings/privacy",
    icon: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z",
  },
  {
    title: "Security & 2FA",
    description: "Password, two-factor authentication, login history.",
    href: "/settings/security",
    icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
  },
  {
    title: "Auto-Reply",
    description: "Automatic replies for messages while you're away.",
    href: "/settings/auto-reply",
    icon: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
  },
  {
    title: "Safety & Panic",
    description: "Panic button, trusted contacts, safety tools.",
    href: "/settings/safety",
    icon: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z",
  },
  {
    title: "Location Alerts",
    description: "Notifications when escorts arrive in your area.",
    href: "/settings/alerts",
    icon: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z",
  },
  {
    title: "Home Screen Widget",
    description: "Customize the widget shown on your installed PWA.",
    href: "/settings/widgets",
    icon: "M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z",
  },
];

export default function SettingsPage() {
  return (
    <div className="max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold text-text mb-2">Settings</h1>
      <p className="text-text-muted mb-6">
        Manage your account, security, and preferences.
      </p>

      <div className="grid sm:grid-cols-2 gap-3">
        {sections.map((s) => (
          <Link
            key={s.href}
            href={s.href}
            className="group bg-surface hover:bg-surface-light rounded-lg p-5 border border-surface-light hover:border-primary transition-colors flex gap-4 items-start"
          >
            <span className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-5 w-5 text-primary"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
                aria-hidden="true"
              >
                <path strokeLinecap="round" strokeLinejoin="round" d={s.icon} />
              </svg>
            </span>
            <span className="flex-1 min-w-0">
              <span className="block text-text font-semibold group-hover:text-primary transition-colors">
                {s.title}
              </span>
              <span className="block text-sm text-text-muted mt-0.5">{s.description}</span>
            </span>
          </Link>
        ))}
      </div>
    </div>
  );
}