// Face SVG components & shared sub-pieces

const FacePortrait = ({ view = "frontal", warp = {} }) => {
  const hump = warp.hump || 0;
  const tipLift = warp.tipLift || 0;
  const tipRot = warp.tipRot || 0;
  const alar = warp.alar || 0;

  if (view === "profile") {
    // Profile silhouette of a face
    const humpDelta = hump * 12; // mm-ish offset
    const tipDelta = tipRot * 0.6;
    return (
      <svg viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
        <defs>
          <linearGradient id="skin" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#d8cdbe" />
            <stop offset="1" stopColor="#b8a690" />
          </linearGradient>
        </defs>
        <path
          d={`M 80,40
              C 130,30 200,40 220,90
              C 235,130 230,150 225,170
              L ${230 - humpDelta},200
              L ${240 - humpDelta * 0.6},${225 + tipDelta}
              L ${228 - humpDelta * 0.3},${248 + tipDelta * 0.5}
              C 220,260 215,265 210,272
              L 220,290
              C 225,310 220,330 200,345
              C 180,360 150,365 130,360
              C 110,355 95,340 88,320
              C 80,290 78,250 78,200
              C 76,150 70,90 80,40 Z`}
          fill="url(#skin)"
          stroke="#5a4f42"
          strokeWidth="1.2"
        />
        {/* Eye */}
        <ellipse cx="160" cy="155" rx="8" ry="3" fill="#3d3833" />
        {/* Brow */}
        <path d="M 145,140 L 175,138" stroke="#3d3833" strokeWidth="2" fill="none" />
        {/* Lip */}
        <path d="M 200,275 L 215,277" stroke="#5a4f42" strokeWidth="1" fill="none" />
        {/* Ear */}
        <path d="M 90,170 C 80,175 80,200 92,210 L 100,200 Z" fill="#c4b29c" stroke="#5a4f42" strokeWidth="1" />
        {/* hair */}
        <path d="M 80,40 C 75,20 110,15 160,18 C 200,22 215,30 220,55 C 200,38 130,30 80,40 Z" fill="#3d3833" />
      </svg>
    );
  }

  // Frontal / three-quarter
  const alarShift = alar * 4;
  return (
    <svg viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="skinF" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#dcd0c0" />
          <stop offset="1" stopColor="#b8a690" />
        </linearGradient>
      </defs>
      {/* head shape */}
      <ellipse cx="150" cy="210" rx="92" ry="125" fill="url(#skinF)" stroke="#5a4f42" strokeWidth="1.2" />
      {/* hair */}
      <path d="M 60,150 C 55,80 100,55 150,55 C 200,55 245,80 240,150 C 235,110 200,90 150,90 C 100,90 65,110 60,150 Z" fill="#3d3833" />
      {/* brows */}
      <path d="M 105,175 Q 120,170 135,176" stroke="#3d3833" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      <path d="M 165,176 Q 180,170 195,175" stroke="#3d3833" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      {/* eyes */}
      <ellipse cx="120" cy="195" rx="9" ry="4" fill="#fff" stroke="#5a4f42" strokeWidth="0.8" />
      <ellipse cx="180" cy="195" rx="9" ry="4" fill="#fff" stroke="#5a4f42" strokeWidth="0.8" />
      <circle cx="120" cy="195" r="3" fill="#3d3833" />
      <circle cx="180" cy="195" r="3" fill="#3d3833" />
      {/* nose bridge */}
      <path
        d={`M 150,200 L ${148},${245} L ${146 - alarShift / 2},${265} Q 150,${272 - tipLift * 8} ${154 + alarShift / 2},${265} L ${152},${245} Z`}
        fill="none"
        stroke="#8a7a68"
        strokeWidth="1"
      />
      {/* nostrils */}
      <ellipse cx={142 - alarShift} cy="268" rx="3" ry="2" fill="#5a4f42" />
      <ellipse cx={158 + alarShift} cy="268" rx="3" ry="2" fill="#5a4f42" />
      {/* mouth */}
      <path d="M 130,300 Q 150,308 170,300" stroke="#7a4a3a" strokeWidth="2" fill="none" strokeLinecap="round" />
      <path d="M 130,300 Q 150,295 170,300" stroke="#7a4a3a" strokeWidth="1" fill="none" />
      {/* chin shading */}
      <path d="M 130,325 Q 150,335 170,325" stroke="#a89684" strokeWidth="0.8" fill="none" />
    </svg>
  );
};

const SampleFace = ({ tag, view }) => (
  <svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
    {view === "profile" ? (
      <>
        <path d="M 20,8 C 35,5 48,12 48,28 L 50,40 L 46,46 L 48,52 C 40,55 25,53 22,45 C 15,40 14,18 20,8 Z" fill="#aea69a" />
        <circle cx="38" cy="26" r="1.5" fill="#3d3833" />
      </>
    ) : (
      <>
        <ellipse cx="30" cy="32" rx="18" ry="24" fill="#aea69a" />
        <ellipse cx="23" cy="30" rx="2" ry="1" fill="#3d3833" />
        <ellipse cx="37" cy="30" rx="2" ry="1" fill="#3d3833" />
        <path d="M 25,42 Q 30,45 35,42" stroke="#3d3833" strokeWidth="1" fill="none" />
      </>
    )}
  </svg>
);

const LandmarkOverlay = ({ visible, view }) => {
  if (!visible) return null;
  // Approximate mediapipe-like landmarks for the nose region
  const frontalPoints = [
    [50, 50], [50, 55], [50, 60], [50, 65],
    [48, 67], [50, 68], [52, 67],
    [47, 69], [50, 70], [53, 69],
    [46, 65], [54, 65],
    [47, 62], [53, 62],
    [44, 57], [56, 57],
    [42, 50], [58, 50], // eyes
    [50, 75], // upper lip
  ];
  const profilePoints = [
    [55, 42], [60, 46], [65, 50], [70, 54], [73, 58], [70, 63], [65, 66], [60, 68],
    [50, 38], [55, 35],
    [62, 70], [60, 72],
  ];
  const points = view === "profile" ? profilePoints : frontalPoints;
  return (
    <>
      {points.map(([x, y], i) => (
        <div key={i} className="landmark-dot" style={{ left: `${x}%`, top: `${y}%` }} />
      ))}
    </>
  );
};

const WarpVectorOverlay = ({ visible, view }) => {
  if (!visible) return null;
  return (
    <svg
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}
      viewBox="0 0 100 100"
      preserveAspectRatio="none"
    >
      {view === "profile" ? (
        <>
          <line x1="70" y1="50" x2="64" y2="50" className="warp-vector" strokeWidth="0.4" markerEnd="url(#arr)" />
          <line x1="73" y1="58" x2="71" y2="55" className="warp-vector" strokeWidth="0.4" markerEnd="url(#arr)" />
        </>
      ) : (
        <>
          <line x1="46" y1="67" x2="48" y2="67" className="warp-vector" strokeWidth="0.4" markerEnd="url(#arr)" />
          <line x1="54" y1="67" x2="52" y2="67" className="warp-vector" strokeWidth="0.4" markerEnd="url(#arr)" />
          <line x1="50" y1="70" x2="50" y2="68" className="warp-vector" strokeWidth="0.4" markerEnd="url(#arr)" />
        </>
      )}
      <defs>
        <marker id="arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M 0,0 L 10,5 L 0,10 z" fill="#b85a2a" />
        </marker>
      </defs>
    </svg>
  );
};

const MaskOverlay = ({ visible, view }) => {
  if (!visible) return null;
  const style = view === "profile"
    ? { left: "58%", top: "44%", width: "22%", height: "32%", borderRadius: "40%" }
    : { left: "39%", top: "55%", width: "22%", height: "24%", borderRadius: "50%" };
  return <div className="heal-mask" style={style} />;
};

Object.assign(window, { FacePortrait, SampleFace, LandmarkOverlay, WarpVectorOverlay, MaskOverlay });
