"use client";

import React from "react";
import { Check } from "lucide-react";
import { passwordScoreLabel, scorePassword, MIN_PASSWORD_LENGTH } from "@/lib/auth/validation";

/** Segment fill colours, index = score. Amber for weak, emerald once usable. */
const SEGMENT_COLOR = ["#E2E8F0", "#BA1A1A", "#F59E0B", "#059669", "#047857"] as const;

export function PasswordStrengthMeter({ value, isDe }: { value: string; isDe: boolean }) {
  const { score, checks } = scorePassword(value);

  const criteria = [
    { met: checks.length, label: isDe ? `${MIN_PASSWORD_LENGTH}+ Zeichen` : `${MIN_PASSWORD_LENGTH}+ chars` },
    { met: checks.mixedCase, label: isDe ? "Groß & klein" : "Aa mix" },
    { met: checks.digit, label: isDe ? "Ziffer" : "Number" },
    { met: checks.symbol, label: isDe ? "Sonderzeichen" : "Symbol" },
  ];

  return (
    <div className="mt-2.5" aria-live="polite">
      <div className="flex items-center gap-1.5">
        {[1, 2, 3, 4].map((step) => (
          <span
            key={step}
            className="h-1 flex-1 transition-colors duration-300"
            style={{ backgroundColor: score >= step ? SEGMENT_COLOR[score] : "#E2E8F0" }}
          />
        ))}
        <span className="font-mono text-[10px] uppercase tracking-wider text-[#64748B] w-[74px] text-right shrink-0">
          {value ? passwordScoreLabel(score, isDe) : ""}
        </span>
      </div>

      <ul className="flex flex-wrap gap-x-3 gap-y-1 mt-2">
        {criteria.map((criterion) => (
          <li
            key={criterion.label}
            className={`flex items-center gap-1 font-mono text-[10px] uppercase tracking-wider transition-colors ${
              criterion.met ? "text-[#047857]" : "text-[#94A3B8]"
            }`}
          >
            <Check
              className={`w-3 h-3 ${criterion.met ? "opacity-100" : "opacity-30"}`}
              aria-hidden="true"
            />
            {criterion.label}
          </li>
        ))}
      </ul>
    </div>
  );
}
