"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Check } from "lucide-react";
import { playClickTick } from "@/lib/click-tick";

// ── Grid geometry ──────────────────────────────────────────────────────────────
const C = 9; // SVG units per cell
const COLS = 7;
const ROWS = 9; // grid rows (rows 7-8 are clipped by the square viewBox)

type Row = (string | null)[];

// ── Face grid builder ──────────────────────────────────────────────────────────
// h=hair  s=skin  e=eye  l=lip
function makeGrid(
  h: string,
  s: string,
  e: string,
  l: string,
  style: "standard" | "long" | "short" | "flow" = "standard",
): Row[] {
  const _ = null;
  switch (style) {
    case "long":
      // hair flows down both sides through eye row
      return [
        [_, h, h, h, h, h, _],
        [h, h, h, h, h, h, h],
        [h, s, s, s, s, s, h],
        [h, s, e, s, s, e, h],
        [h, s, s, s, s, s, h],
        [s, s, s, l, s, s, s],
        [s, s, l, l, l, s, s],
        [_, s, s, s, s, s, _],
        [_, _, s, s, s, _, _],
      ];
    case "short":
      // flat top, hair fills first two rows edge-to-edge
      return [
        [h, h, h, h, h, h, h],
        [h, h, h, h, h, h, h],
        [h, s, s, s, s, s, h],
        [s, s, e, s, s, e, s],
        [s, s, s, s, s, s, s],
        [s, s, s, l, s, s, s],
        [s, s, l, l, l, s, s],
        [_, s, s, s, s, s, _],
        [_, _, s, s, s, _, _],
      ];
    case "flow":
      // hair flows all the way down — most feminine silhouette
      return [
        [_, h, h, h, h, h, _],
        [h, h, h, h, h, h, h],
        [h, s, s, s, s, s, h],
        [h, s, e, s, s, e, h],
        [h, s, s, s, s, s, h],
        [h, s, s, l, s, s, h],
        [h, s, l, l, l, s, h],
      ];
    default:
      // standard: slight arch at top
      return [
        [_, h, h, h, h, h, _],
        [h, h, h, h, h, h, h],
        [h, s, s, s, s, s, h],
        [s, s, e, s, s, e, s],
        [s, s, s, s, s, s, s],
        [s, s, s, l, s, s, s],
        [s, s, l, l, l, s, s],
        [_, s, s, s, s, s, _],
        [_, _, s, s, s, _, _],
      ];
  }
}

// ── Face definitions ───────────────────────────────────────────────────────────
export interface PixelFaceDef {
  id: string;
  label: string;
  bg: string;
  grid: Row[];
}

export const PIXEL_FACES: PixelFaceDef[] = [
  {
    id: "azar",
    label: "Azar",
    bg: "#f5ede4",
    grid: makeGrid("#1c0e06", "#d4906a", "#1c0e06", "#c07858"),
  },
  {
    id: "cyrus",
    label: "Cyrus",
    bg: "#ede8e0",
    grid: makeGrid("#0e0e0e", "#c09060", "#0e0e0e", "#a06840", "long"),
  },
  {
    id: "layla",
    label: "Layla",
    bg: "#f5ece4",
    grid: makeGrid("#782810", "#f0c8a0", "#2c1808", "#d08868", "long"),
  },
  {
    id: "soren",
    label: "Soren",
    bg: "#edeae6",
    grid: makeGrid("#484040", "#ecc8a8", "#1c1818", "#c09888", "short"),
  },
  {
    id: "roya",
    label: "Roya",
    bg: "#f0e8df",
    grid: makeGrid("#4c1e0c", "#dc9c68", "#1c0808", "#c07050"),
  },
  {
    id: "dara",
    label: "Dara",
    bg: "#e8e2d8",
    grid: makeGrid("#706868", "#d4a878", "#281818", "#b08060", "short"),
  },
  {
    id: "noor",
    label: "Noor",
    bg: "#ddd0c4",
    grid: makeGrid("#0a0808", "#603a1e", "#0a0808", "#7c4025"),
  },
  {
    id: "aria",
    label: "Aria",
    bg: "#f5eee4",
    grid: makeGrid("#c8901a", "#f4d4b0", "#1c1c28", "#d4988a"),
  },
  // ── Female-coded faces ────────────────────────────────────────────────────────
  {
    id: "mina",
    label: "Mina",
    bg: "#f5e8e0",
    grid: makeGrid("#0e0808", "#e4a080", "#0e0808", "#c85a6a", "flow"),
  },
  {
    id: "sara",
    label: "Sara",
    bg: "#f5ede0",
    grid: makeGrid("#b88010", "#fce4c0", "#3a280c", "#d09490", "flow"),
  },
  {
    id: "neda",
    label: "Neda",
    bg: "#f5ece4",
    grid: makeGrid("#6c0808", "#f2c8a0", "#280808", "#b83030", "long"),
  },
  {
    id: "zara",
    label: "Zara",
    bg: "#ede0d4",
    grid: makeGrid("#3a1008", "#c27850", "#1c0808", "#a05058", "long"),
  },
];

export function getPixelFace(id: string | null | undefined): PixelFaceDef | undefined {
  return PIXEL_FACES.find((f) => f.id === id);
}

// ── PixelFace renderer ─────────────────────────────────────────────────────────
export function PixelFace({ def, size = 56 }: { def: PixelFaceDef; size?: number }) {
  const vw = COLS * C; // 63
  const vh = COLS * C; // 63 — square; rows 7-8 are clipped naturally
  return (
    <svg
      viewBox={`0 0 ${vw} ${vh}`}
      width={size}
      height={size}
      xmlns="http://www.w3.org/2000/svg"
      style={{ display: "block", imageRendering: "pixelated" }}
    >
      <rect width={vw} height={vh} fill={def.bg} />
      {def.grid.map((row, r) =>
        row.map((color, c) =>
          color ? (
            <rect
              key={`${r}-${c}`}
              x={c * C}
              y={r * C}
              width={C}
              height={C}
              fill={color}
            />
          ) : null,
        ),
      )}
    </svg>
  );
}

// ── AvatarPicker ───────────────────────────────────────────────────────────────
interface AvatarPickerProps {
  currentId?: string | null;
  onSelect: (id: string) => Promise<void>;
  onClose: () => void;
}

export function AvatarPicker({ currentId, onSelect, onClose }: AvatarPickerProps) {
  const [visible, setVisible] = useState(false);
  const [saving, setSaving] = useState<string | null>(null);

  // mount → enter
  useEffect(() => {
    const id = requestAnimationFrame(() => setVisible(true));
    return () => cancelAnimationFrame(id);
  }, []);

  const handleClose = () => {
    setVisible(false);
    setTimeout(onClose, 220);
  };

  const handleSelect = async (id: string) => {
    if (saving || id === currentId) return;
    playClickTick();
    setSaving(id);
    await onSelect(id);
    setSaving(null);
    handleClose();
  };

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          key="picker-root"
          className="fixed inset-0 z-[200]"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.18 }}
        >
          {/* Backdrop */}
          <div
            className="absolute inset-0 bg-black/30"
            onClick={handleClose}
          />

          {/* Panel */}
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <motion.div
              className="pointer-events-auto bg-white dark:bg-[#111111] border border-black/[0.10] dark:border-white/[0.10] p-5"
              style={{
                borderRadius: "var(--radius-lg)",
                boxShadow: "0 16px 48px rgba(0,0,0,0.18)",
                minWidth: 320,
              }}
              initial={{ scale: 0.96, y: 8 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.96, y: 8 }}
              transition={{ type: "spring", damping: 30, stiffness: 380 }}
            >
              {/* Header */}
              <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-black/40 dark:text-white/40 mb-4">
                Choose Avatar
              </p>

              {/* Grid 4×2 */}
              <div className="grid grid-cols-4 gap-2">
                {PIXEL_FACES.map((face) => {
                  const isSelected = face.id === currentId;
                  const isSaving = saving === face.id;
                  return (
                    <button
                      key={face.id}
                      onClick={() => handleSelect(face.id)}
                      disabled={!!saving}
                      className="relative flex flex-col items-center gap-1.5 overflow-hidden p-2 transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.05] disabled:cursor-not-allowed"
                      style={{
                        borderRadius: "var(--radius-sm)",
                        border: isSelected
                          ? "2px solid #FF6520"
                          : "2px solid transparent",
                      }}
                    >
                      {/* Pixel face */}
                      <div style={{ lineHeight: 0 }}>
                        <PixelFace def={face} size={60} />
                      </div>

                      {/* Label */}
                      <span className="text-[9px] font-bold uppercase tracking-[0.12em] text-black/40 dark:text-white/40">
                        {face.label}
                      </span>

                      {/* Selected checkmark */}
                      {isSelected && !isSaving && (
                        <div className="absolute top-1.5 right-1.5 w-4 h-4 bg-[#FF6520] flex items-center justify-center" style={{ borderRadius: "var(--radius-sm)" }}>
                          <Check className="w-2.5 h-2.5 text-white" />
                        </div>
                      )}

                      {/* Saving spinner */}
                      {isSaving && (
                        <div className="absolute inset-0 flex items-center justify-center bg-black/10 dark:bg-white/10">
                          <div
                            className="w-5 h-5 border-2 border-black/30 dark:border-white/30 animate-spin"
                            style={{ borderRadius: "50%", borderTopColor: "transparent" }}
                          />
                        </div>
                      )}
                    </button>
                  );
                })}
              </div>

              {/* Footer */}
              <div className="mt-4 pt-3 border-t border-black/[0.06] dark:border-white/[0.08] flex justify-end">
                <button
                  onClick={handleClose}
                  className="px-4 py-1.5 text-[11px] font-bold uppercase tracking-[0.1em] border border-black/[0.10] dark:border-white/[0.10] text-black/60 dark:text-white/60 hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors"
                  style={{ borderRadius: "var(--radius-sm)" }}
                >
                  Cancel
                </button>
              </div>
            </motion.div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}