"use client";

import { useId, useState } from "react";
import { calculatorCopy, calculatorModes, weightUnits } from "@/lib/calculator";

const FIELD =
  "h-[42px] w-full rounded-[8px] border border-[#e6e9ef] bg-white px-[13px] text-[12px] text-[#141B34] outline-none transition-colors placeholder:text-[#aeb4be] focus:border-brand";

function ClockIcon() {
  return (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7.5V12l3 2" />
    </svg>
  );
}

function ArrowIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}

function Field({ label, ...props }: { label: string } & React.InputHTMLAttributes<HTMLInputElement>) {
  const id = useId();
  return (
    <div className="min-w-0">
      <label htmlFor={id} className="block text-[12px] font-medium text-[#141B34]">
        {label}
      </label>
      <input id={id} {...props} className={`mt-[8px] ${FIELD}`} />
    </div>
  );
}

/**
 * The calculator card. Client component: the ship/only-ship segmented control
 * and the Kg/lb toggle are both local UI state, and every field is
 * uncontrolled beyond that — there's no rate endpoint yet, so "Get shipping
 * rate" has nothing to submit to.
 */
export function CalculatorForm() {
  const [mode, setMode] = useState(calculatorModes[0].id);
  const [unit, setUnit] = useState<"kg" | "lb">("kg");

  return (
    <form
      onSubmit={(e) => e.preventDefault()}
      noValidate
      className="rounded-[16px] border border-[#dbeaf4] bg-white p-[20px] shadow-[0_18px_50px_-30px_rgba(6,82,224,0.25)]"
    >
      <div className="flex items-center justify-between gap-[12px]">
        <div className="flex items-center gap-[10px]">
          <span className="h-[20px] w-[4px] shrink-0 rounded-full bg-[#141B34]" />
          <h2 className="text-[16px] font-bold text-[#141B34]">{calculatorCopy.cardTitle}</h2>
        </div>
        <span className="flex shrink-0 items-center gap-[5px] text-[11px] text-[#9aa0aa]">
          <ClockIcon />
          {calculatorCopy.estimateNote}
        </span>
      </div>

      {/* Buy & ship for me / Only ship for me */}
      <div className="mt-[18px] grid grid-cols-2 gap-[6px] rounded-[10px] bg-[#F4F6F8] p-[5px]">
        {calculatorModes.map((m) => {
          const active = mode === m.id;
          return (
            <button
              key={m.id}
              type="button"
              aria-pressed={active}
              onClick={() => setMode(m.id)}
              className={[
                "h-[38px] rounded-[8px] text-[12px] font-semibold transition-colors",
                // Same #71DBFF -> #EEFC72 gradient used on the perk tile and
                // the emphasised route-leg chip — read off Figma's fill panel,
                // not guessed.
                active
                  ? "bg-[linear-gradient(90deg,#71DBFF_0%,#EEFC72_100%)] text-[#141B34]"
                  : "text-[#7b828e] hover:text-[#141B34]",
              ].join(" ")}
            >
              {m.label}
            </button>
          );
        })}
      </div>

      <div className="mt-[18px] grid gap-[14px] sm:grid-cols-2">
        <Field label={calculatorCopy.from} defaultValue={calculatorCopy.fromPlaceholder} />
        <Field label={calculatorCopy.to} placeholder={calculatorCopy.toPlaceholder} />
      </div>

      <div className="mt-[14px]">
        <Field label={calculatorCopy.category} defaultValue={calculatorCopy.categoryPlaceholder} />
      </div>

      <div className="mt-[18px] border-t border-dashed border-[#cfe0ee] pt-[16px]">
        <div className="flex items-center justify-between">
          <span className="text-[11px] font-semibold tracking-[0.08em] text-[#7b828e] uppercase">
            {calculatorCopy.packageDetails}
          </span>
          <div className="flex gap-[3px] rounded-[7px] bg-[#F4F6F8] p-[3px]">
            {weightUnits.map((u) => {
              const active = unit === u.value;
              return (
                <button
                  key={u.value}
                  type="button"
                  aria-pressed={active}
                  onClick={() => setUnit(u.value as "kg" | "lb")}
                  className={[
                    "h-[22px] rounded-[5px] px-[9px] text-[10px] font-semibold transition-colors",
                    active ? "bg-[#141B34] text-white" : "text-[#7b828e]",
                  ].join(" ")}
                >
                  {u.label}
                </button>
              );
            })}
          </div>
        </div>

        <div className="mt-[12px]">
          <Field label={calculatorCopy.weight} placeholder={calculatorCopy.weightPlaceholder} inputMode="decimal" />
        </div>

        <div className="mt-[14px]">
          <span className="block text-[12px] font-medium text-[#141B34]">
            {calculatorCopy.dimensions}
          </span>
          <div className="mt-[8px] grid grid-cols-3 gap-[9px]">
            <input placeholder="L" className={FIELD} />
            <input placeholder="W" className={FIELD} />
            <input placeholder="H" className={FIELD} />
          </div>
        </div>
      </div>

      <button
        type="submit"
        className="mt-[18px] flex h-[46px] w-full items-center justify-center gap-[8px] rounded-[10px] bg-[#141B34] text-[13px] font-semibold text-white transition-transform duration-300 hover:scale-[1.01]"
      >
        {calculatorCopy.submit}
        <ArrowIcon />
      </button>
    </form>
  );
}