/**
 * Support modal body (spec §01B/§01C).
 *
 * User-facing name is **Support**; the internal modal id stays `donate` (its
 * origin, and still its primary accent CTA). The project asks nothing for
 * itself, so this surface offers two ways to give back: feedback to the author,
 * and a donation to Ukraine's defense — where any project donations would go
 * anyway.
 *
 * Rendered inside ModalShell — no backdrop, close button, or focus trap here;
 * the shell owns all of that (docs/architecture/03 → Layer 3).
 */

import { useState } from 'react';
import { Button } from './Button';
import { notify } from '../stores/NotificationStore';
import { FEEDBACK_EMAIL, feedbackMailtoHref } from '../feedback';
import styles from './DonateModal.module.css';

/**
 * Donations go to Ukraine's defense, not the project. savelife.in.ua is the
 * Come Back Alive (Повернись живим) foundation — Ukraine's largest, supporting
 * the people defending the country against Russia's invasion.
 */
const DONATE_URL = 'https://savelife.in.ua/en/donate-en/';

export function DonateModal() {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(FEEDBACK_EMAIL);
      // The clipboard write is invisible, so the success is confirmed inline
      // ("Copied") rather than by a toast (docs/architecture/10 → Toast copy).
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      notify({
        kind: 'error',
        title: "Couldn't copy",
        message: 'Your browser blocked clipboard access. Select and copy the address manually.',
      });
    }
  };

  return (
    <div className={styles.donate}>
      <p className={styles.body}>
        Astrolabe is free, built in spare time — there's nothing to buy and no one to pay.
      </p>

      <section className={styles.section}>
        <p className={styles.body}>
          The most useful thing you can send back is feedback — what's broken, what's missing, what
          you'd want next.
        </p>
        <div className={styles.contact}>
          <a className={styles.email} href={feedbackMailtoHref()}>
            {FEEDBACK_EMAIL}
          </a>
          <Button onClick={() => void handleCopy()}>{copied ? 'Copied' : 'Copy'}</Button>
          {/* A polite live region announces the copy to assistive tech, which the
              button's label swap alone would not reliably do. */}
          <span role="status" className="visually-hidden">
            {copied ? 'Email address copied to clipboard' : ''}
          </span>
        </div>
      </section>

      <section className={styles.section}>
        <p className={styles.body}>
          And if you'd like to give something beyond words, please send it where it matters far more
          than it would to me: Ukraine's defense against Russia's invasion. The Come Back Alive
          foundation supports the people defending the country.
        </p>
        <div className={styles.actions}>
          <a href={DONATE_URL} className={styles.primary} target="_blank" rel="noopener noreferrer">
            Donate to Ukraine's defense
          </a>
        </div>
      </section>
    </div>
  );
}
