"use client";

/**
 * MobileWaterSuccessScreen — confirmation after a successful submit.
 *
 * Visual structure:
 *   - Centered success illustration: a green ring that draws on,
 *     with a checkmark that draws on ~280ms later (the same staggered
 *     reveal UIKit's success feedback uses).
 *   - Headline: "Reading logged."
 *   - Recap card: headgate name + measurement + unit + timestamp.
 *   - Two large primary actions, stacked:
 *       - "Log Another Entry" (green primary, refresh icon)
 *       - "Back to Headgates" (white secondary with thin border)
 *   - Subtle thank-you micro-copy at the bottom.
 *
 * The animations use the global `water-ring` + `water-draw` keyframes
 * from `src/app/globals.css`.
 */
import { useEffect, useState } from "react";
import { Grid, Refresh } from "./icons";
import { formatClockTime, formatLongTimestamp, formatMeasurement } from "./format";

type Props = {
  headgateName: string;
  measurement: number;
  unit: string;
  timestamp: Date;
  /** Name of the irrigator who logged the entry — shown in the recap
   *  so the operator can confirm the reading is attributed to them. */
  irrigatorName?: string;
  onLogAnother: () => void;
  onBackToHeadgates: () => void;
};

export function MobileWaterSuccessScreen({
  headgateName,
  measurement,
  unit,
  timestamp,
  irrigatorName,
  onLogAnother,
  onBackToHeadgates,
}: Props) {
  // Reveal animation — staggered for ring → checkmark → content.
  const [ringDone, setRingDone] = useState(false);
  const [contentShown, setContentShown] = useState(false);

  useEffect(() => {
    const ringTimer = window.setTimeout(() => setRingDone(true), 380);
    const contentTimer = window.setTimeout(() => setContentShown(true), 480);
    return () => {
      window.clearTimeout(ringTimer);
      window.clearTimeout(contentTimer);
    };
  }, []);

  return (
    <div
      className="flex h-full flex-col bg-[#F2F2F7]"
      style={{
        paddingTop: "env(safe-area-inset-top)",
        paddingBottom: "env(safe-area-inset-bottom)",
      }}
    >
      {/* Brand strip — same as PIN screen for visual continuity. */}
      <header
        className="px-5 pb-3 pt-[max(env(safe-area-inset-top),1rem)]"
        style={{
          background:
            "linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(242,242,247,0) 100%)",
          backdropFilter: "blur(10px)",
          WebkitBackdropFilter: "blur(10px)",
        }}
      >
        <div className="mx-auto flex max-w-md items-center justify-center gap-2">
          <span
            className="text-[12px] font-bold tracking-[0.22em] text-[#14532d]"
            style={{
              fontFamily:
                "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
            }}
          >
            TUXEDO WATER LOG
          </span>
        </div>
      </header>

      <main className="flex flex-1 flex-col items-center justify-center px-6">
        <div className="w-full max-w-sm text-center">
          {/* Success ring + checkmark */}
          <div className="relative mx-auto mb-8 h-24 w-24">
            <svg
              width="96"
              height="96"
              viewBox="0 0 96 96"
              fill="none"
              aria-hidden
              focusable={false}
            >
              {/* Ring — circumference ~264px for r=42 */}
              <circle
                cx="48"
                cy="48"
                r="42"
                stroke="#34C759"
                strokeWidth="6"
                strokeLinecap="round"
                fill="none"
                strokeDasharray="264"
                strokeDashoffset="264"
                style={{
                  animation:
                    "water-ring 420ms cubic-bezier(0.32, 0.72, 0, 1) forwards",
                  ["--ring-from" as string]: "264",
                }}
              />
              {/* Checkmark — ~62px long */}
              <path
                d="M30 50 L43 63 L66 38"
                stroke="#34C759"
                strokeWidth="6"
                strokeLinecap="round"
                strokeLinejoin="round"
                fill="none"
                strokeDasharray="62"
                strokeDashoffset="62"
                style={{
                  animation:
                    "water-draw 320ms cubic-bezier(0.32, 0.72, 0, 1) 280ms forwards",
                  ["--draw-from" as string]: "62",
                }}
              />
            </svg>
            {/* Soft glow behind the ring — sells the celebration. */}
            <div
              aria-hidden
              className="absolute inset-0 rounded-full"
              style={{
                background:
                  "radial-gradient(circle, rgba(52,199,89,0.18) 0%, rgba(52,199,89,0) 70%)",
                opacity: ringDone ? 1 : 0,
                transition: "opacity 280ms ease-out",
              }}
            />
          </div>

          {/* Headline */}
          <h1
            className={[
              "mb-2 text-[28px] font-bold leading-[1.15] tracking-tight text-[#1d1d1f]",
              "transition-[opacity,transform] duration-300",
              contentShown
                ? "translate-y-0 opacity-100"
                : "translate-y-2 opacity-0",
            ].join(" ")}
            style={{
              fontFamily:
                "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
            }}
          >
            Reading logged
          </h1>

          {/* Recap card */}
          <div
            className={[
              "mx-auto mt-3 mb-8 max-w-xs rounded-[14px] bg-white px-5 py-4 text-left",
              "shadow-[0_1px_2px_rgba(0,0,0,0.04),0_1px_0_rgba(0,0,0,0.02)]",
              "transition-[opacity,transform] duration-300",
              contentShown
                ? "translate-y-0 opacity-100"
                : "translate-y-2 opacity-0",
            ].join(" ")}
            style={{
              transitionDelay: contentShown ? "80ms" : "0ms",
            }}
          >
            <div className="flex items-baseline justify-between gap-2">
              <span className="truncate text-[15px] font-medium text-[rgba(60,60,67,0.55)]">
                {headgateName}
              </span>
              <span className="shrink-0 text-[13px] font-medium text-[rgba(60,60,67,0.45)]">
                {formatClockTime(timestamp)}
              </span>
            </div>
            <div className="mt-1 flex items-baseline gap-1.5">
              <span
                className="text-[36px] font-bold leading-[1.05] tracking-tight text-[#1d1d1f]"
                style={{
                  fontFamily:
                    "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
                }}
              >
                {formatMeasurement(measurement)}
              </span>
              <span className="pb-1 text-[16px] font-semibold text-[rgba(60,60,67,0.55)]">
                {unit}
              </span>
            </div>
            <div className="mt-2 border-t border-[rgba(60,60,67,0.10)] pt-2 text-[12px] text-[rgba(60,60,67,0.45)]">
              {formatLongTimestamp(timestamp)}
            </div>
            {irrigatorName ? (
              <div className="mt-1.5 flex items-center gap-1.5 text-[12px] text-[rgba(60,60,67,0.55)]">
                <span
                  aria-hidden
                  className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#14532d] text-[9px] font-bold uppercase text-white"
                >
                  {initials(irrigatorName)}
                </span>
                <span>Logged by {irrigatorName}</span>
              </div>
            ) : null}
          </div>

          {/* Action buttons */}
          <div
            className={[
              "flex flex-col gap-3",
              "transition-[opacity,transform] duration-300",
              contentShown
                ? "translate-y-0 opacity-100"
                : "translate-y-3 opacity-0",
            ].join(" ")}
            style={{
              transitionDelay: contentShown ? "160ms" : "0ms",
            }}
          >
            <button
              type="button"
              onClick={onLogAnother}
              className="flex h-[56px] w-full items-center justify-center gap-2 rounded-[14px] bg-[#34C759] text-[17px] font-semibold text-white active:scale-[0.985] active:opacity-90"
              style={{
                boxShadow:
                  "0 6px 18px rgba(52,199,89,0.32), inset 0 1px 0 rgba(255,255,255,0.18)",
              }}
            >
              <Refresh size={20} />
              Log Another Entry
            </button>

            <button
              type="button"
              onClick={onBackToHeadgates}
              className="flex h-[56px] w-full items-center justify-center gap-2 rounded-[14px] border border-[rgba(60,60,67,0.18)] bg-white text-[17px] font-semibold text-[#14532d] active:scale-[0.985] active:bg-[rgba(120,120,128,0.08)]"
              style={{
                boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
              }}
            >
              <Grid size={20} />
              Back to Headgates
            </button>
          </div>

          <p className="mt-7 text-[13px] text-[rgba(60,60,67,0.45)]">
            Thanks for keeping the records flowing.
          </p>
        </div>
      </main>
    </div>
  );
}

export default MobileWaterSuccessScreen;

/**
 * Two-letter initials for the avatar chip in the recap.
 * Mirrors the same helper used in the log form header so the avatar
 * stays consistent across the two screens.
 */
function initials(name: string): string {
  const parts = name.trim().split(/\s+/).filter(Boolean);
  if (parts.length === 0) return "?";
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}