"use client";

import { useState } from "react";

import LeadForm from "./LeadForm";

/**
 * The floating contact rail and its interest drawer.
 *
 * The SVGs are the approved design's own, verbatim. The stylesheet draws these
 * as line icons (`fill: none; stroke: currentColor`) and only switches to
 * `fill: currentColor` for `.icon-whatsapp` and `.icon-phone`. Substituting
 * solid glyphs — as an earlier pass did — renders them as thin outlines of a
 * filled shape, which is what the "broken icons" report was.
 *
 * `aria-hidden` and `inert` ship on the closed drawer rather than being applied
 * by script, so it is out of the tab order from the first paint.
 */
export default function FloatingContact({
  telUrl,
  whatsappUrl,
  labels,
  formLabels,
  locale,
}: {
  telUrl: string | null;
  whatsappUrl: string | null;
  labels: { hide: string; interest: string; whatsapp: string; phone: string; close: string };
  formLabels: Record<string, string>;
  locale: string;
}) {
  const [expanded, setExpanded] = useState(true);
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div id="floating-contact">
      <div className="floating-contact">
        <button
          type="button"
          className="floating-contact__toggle js-toggle-floating"
          aria-label={labels.hide}
          aria-expanded={expanded}
          onClick={() => setExpanded((value) => !value)}
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M19 12H5m6-6-6 6 6 6" />
          </svg>
        </button>

        <div className="floating-contact__actions">
          <button
            type="button"
            className="floating-contact__action js-open-drawer"
            data-source-component="floating-contact"
            aria-label={labels.interest}
            onClick={() => setDrawerOpen(true)}
          >
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect x="3" y="5" width="18" height="14" rx="2" />
              <path d="m4 7 8 6 8-6" />
            </svg>
          </button>

          {whatsappUrl ? (
            <a
              className="floating-contact__action"
              href={whatsappUrl}
              target="_blank"
              rel="noopener"
              aria-label={labels.whatsapp}
            >
              <svg className="icon-whatsapp" viewBox="0 0 16 16" aria-hidden="true">
                <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93a7.898 7.898 0 0 0-2.327-5.607M7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.25a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.591-6.592 6.591m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.514.645-.627.775-.116.133-.232.148-.43.05-.197-.1-.836-.308-1.59-.984-.59-.525-.986-1.173-1.1-1.371-.116-.198-.012-.304.087-.4.08-.098.197-.232.296-.346.1-.116.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.078-.61-1.47-.161-.389-.325-.335-.445-.34-.116-.006-.247-.006-.38-.006a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.132 1.394 2.132 3.38 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.462.164-.86.114-.943-.049-.084-.182-.133-.38-.232" />
              </svg>
            </a>
          ) : null}

          {telUrl ? (
            <a className="floating-contact__action" href={telUrl} aria-label={labels.phone}>
              <svg className="icon-phone" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M2.25 4.5A2.25 2.25 0 0 1 4.5 2.25h1.372c.516 0 .966.351 1.091.852l1.013 4.052a1.125 1.125 0 0 1-.417 1.173l-1.293.97a12.035 12.035 0 0 0 5.438 5.438l.97-1.293a1.125 1.125 0 0 1 1.173-.417l4.052 1.013c.501.125.852.575.852 1.091V16.5a2.25 2.25 0 0 1-2.25 2.25h-.75C8.294 18.75 2.25 12.706 2.25 5.25V4.5Z" />
              </svg>
            </a>
          ) : null}
        </div>
      </div>

      <div className="drawer-overlay" onClick={() => setDrawerOpen(false)} />

      <aside
        className="contact-drawer"
        aria-hidden={!drawerOpen}
        /*
         * A real boolean, not the empty-string form.
         *
         * React 19 accepts `inert` as a genuine boolean prop. Passing "" is the
         * pre-19 spelling, and React now reads it as a boolean attribute given
         * an empty string — which resolves to false. The closed drawer was
         * therefore never inert: hidden and aria-hidden, but its close button
         * and every link inside it stayed in the tab order.
         */
        inert={!drawerOpen}
        aria-labelledby="contact-drawer-title"
      >
        <button
          className="drawer-close"
          type="button"
          aria-label={labels.close}
          onClick={() => setDrawerOpen(false)}
        >
          ×
        </button>
        <h2 id="contact-drawer-title">{labels.interest}</h2>

        <LeadForm
          form="project_interest"
          sourceComponent="contact-drawer"
          labels={formLabels}
          locale={locale}
        />
      </aside>
    </div>
  );
}