import { useNavigate } from "react-router-dom";
import { ArrowLeft, ShieldCheck } from "lucide-react";
import { motion } from "framer-motion";

/**
 * In-app Privacy Policy.
 *
 * Renders the same canonical policy that's served at
 * https://nadi.kr/PrivacyPolicy/ — kept here so the policy
 * is available offline and on TV/mobile builds that have no browser
 * tab handy. If you ever change the wording, update both.
 */
const LAST_UPDATED = "May 4, 2026";

const sections: Array<{ n: string; title: string; body: React.ReactNode }> = [
  {
    n: "1.",
    title: "Introduction",
    body: (
      <p>
        NadiPlayer (<strong>"we," "our," or "us"</strong>) is a media player
        application developed by <strong>Nadi</strong>. We respect your
        privacy and are committed to protecting any information that may be
        used to identify your device for the sole purpose of providing our
        services.
      </p>
    ),
  },
  {
    n: "2.",
    title: "Information Collection and Usage",
    body: (
      <>
        <p>
          To provide a seamless experience between our web portal and the
          application, we use specific device identifiers:
        </p>
        <ul className="list-disc pl-5 space-y-1.5 mt-2">
          <li>
            <strong>MAC Address and Device ID:</strong> As shown in our
            pairing screen, we display your device's MAC Address and a
            unique Device ID locally.
          </li>
          <li>
            <strong>Manual Pairing:</strong> We do not transmit this data
            automatically. The user must manually enter these identifiers
            and a generated 6-digit PIN on our secure web portal to pair
            their device and manage playlists.
          </li>
          <li>
            <strong>Purpose:</strong> These identifiers are used strictly
            for authentication and to link the user's legally owned
            content/playlists to their specific device.
          </li>
        </ul>
      </>
    ),
  },
  {
    n: "3.",
    title: "Content Responsibility (Disclaimer)",
    body: (
      <ul className="list-disc pl-5 space-y-1.5">
        <li>
          <strong>Clean Player Policy:</strong> NadiPlayer is strictly a
          media player tool. We do not provide, host, sell, or include any
          IPTV subscriptions, media content, or playlists.
        </li>
        <li>
          <strong>User Content:</strong> Users are solely responsible for
          the content they play. NadiPlayer does not have access to, nor
          do we monitor, the specific streams or files you choose to play.
        </li>
        <li>
          <strong>Copyright:</strong> We do not endorse the streaming of
          copyright-protected material without permission from the
          rightful owners.
        </li>
      </ul>
    ),
  },
  {
    n: "4.",
    title: "Data Storage and Security",
    body: (
      <ul className="list-disc pl-5 space-y-1.5">
        <li>
          <strong>Local Storage:</strong> All playlists and server
          credentials provided by the user are stored locally on the
          device or handled via the pairing secure link.
        </li>
        <li>
          <strong>Encryption:</strong> Data transmitted during the
          pairing process is encrypted to prevent unauthorized access.
        </li>
        <li>
          <strong>Third-Party SDKs:</strong> NadiPlayer does not include
          hidden third-party tracking SDKs or intrusive advertising
          networks.
        </li>
      </ul>
    ),
  },
  {
    n: "5.",
    title: "Children's Privacy",
    body: (
      <p>
        NadiPlayer does not collect personal information from any user,
        including children. Our application is a tool for playing
        user-provided content and is safe for all age groups.
      </p>
    ),
  },
  {
    n: "6.",
    title: "Permissions",
    body: (
      <p>
        The app may request access to{" "}
        <strong>"Photos/Media/Files"</strong> or{" "}
        <strong>"Network Access"</strong> solely to play local files or
        stream content from user-provided URLs.
      </p>
    ),
  },
  {
    n: "7.",
    title: "Contact Information",
    body: (
      <>
        <p>For any privacy-related inquiries, please contact:</p>
        <ul className="list-none pl-0 space-y-1 mt-2">
          <li>
            <strong>Developer:</strong> Nadi
          </li>
          <li>
            <strong>Email:</strong>{" "}
            <a
              href="mailto:nadiplayer@nadi.kr"
              className="text-primary underline-offset-2 hover:underline"
            >
              nadiplayer@nadi.kr
            </a>
          </li>
          <li>
            <strong>Website:</strong>{" "}
            <a
              href="https://nadi.kr/"
              target="_blank"
              rel="noreferrer"
              className="text-primary underline-offset-2 hover:underline"
            >
              https://nadi.kr/
            </a>
          </li>
        </ul>
      </>
    ),
  },
];

const Privacy = () => {
  const navigate = useNavigate();

  return (
    <div
      className="h-screen overflow-y-auto w-full bg-background"
      data-testid="privacy-screen"
    >
      <header className="sticky top-0 z-20 flex items-center gap-2 border-b border-border/60 bg-background/90 px-3 py-3 backdrop-blur-xl">
        <button
          onClick={() => navigate(-1)}
          className="flex h-9 w-9 items-center justify-center rounded-full border border-border/70 bg-card/60 text-foreground transition hover:bg-muted"
          data-testid="privacy-back"
          aria-label="Back"
        >
          <ArrowLeft className="h-4 w-4" />
        </button>
        <div className="flex items-center gap-2">
          <ShieldCheck className="h-4 w-4 text-primary" />
          <span className="text-sm font-semibold tracking-wide text-foreground">
            Privacy Policy
          </span>
        </div>
      </header>

      <motion.main
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.35, ease: "easeOut" }}
        className="mx-auto max-w-2xl px-4 py-6 pb-28"
      >
        <div className="rounded-2xl border border-border/70 bg-card/70 p-5 shadow-xl backdrop-blur">
          <div className="flex items-start justify-between gap-3 mb-1">
            <h1 className="text-xl font-bold text-foreground">
              Privacy Policy for NadiPlayer
            </h1>
          </div>
          <p className="text-[11px] text-muted-foreground tracking-wider uppercase mb-5">
            Last Updated: {LAST_UPDATED}
          </p>

          <div
            className="space-y-5 text-sm text-muted-foreground leading-relaxed"
            data-testid="privacy-text"
          >
            {sections.map((s) => (
              <section key={s.n}>
                <h2 className="text-[13px] font-semibold tracking-wider text-primary uppercase mb-1.5 border-b border-border/40 pb-1">
                  <span className="text-muted-foreground mr-2 font-normal">
                    {s.n}
                  </span>
                  {s.title}
                </h2>
                <div className="pt-1 text-foreground/85">{s.body}</div>
              </section>
            ))}
          </div>

          <div className="mt-7 pt-4 border-t border-border/40 text-center text-[11px] text-muted-foreground">
            &copy; 2026 NadiPlayer — All rights reserved.
          </div>
        </div>
      </motion.main>
    </div>
  );
};

export default Privacy;
