import { memo } from "react";

/** Flat top-down furniture pieces. All anchored at their visual centre. */

export const Desk = memo(function Desk({
  x,
  y,
  isDark,
  active,
}: {
  x: number;
  y: number;
  isDark: boolean;
  active: boolean;
}) {
  const top = isDark ? "#54432e" : "#d9b98a";
  const edge = isDark ? "#3d3021" : "#bd9c6c";
  const laptopBody = isDark ? "#2a2a2e" : "#4a4a52";
  const screen = active ? "#d97757" : isDark ? "#3d3d44" : "#6b6b74";
  return (
    <g transform={`translate(${x}, ${y})`}>
      <rect x={-34} y={-16} width={68} height={32} rx={5} fill={top} stroke={edge} strokeWidth={1.2} />
      <rect x={-30} y={-12.5} width={60} height={25} rx={3.5} fill="none" stroke={edge} strokeWidth={0.6} opacity={0.5} />
      {/* laptop facing the seat (north side) */}
      <rect x={-10} y={-11} width={20} height={13} rx={2} fill={laptopBody} />
      <rect x={-8} y={-9} width={16} height={9} rx={1} fill={screen}>
        {active && <animate attributeName="opacity" values="1;0.75;1" dur="1.6s" repeatCount="indefinite" />}
      </rect>
      {/* mug */}
      <circle cx={22} cy={4} r={3.4} fill={isDark ? "#8a4a2e" : "#c0714c"} />
      <circle cx={22} cy={4} r={2} fill={isDark ? "#5c3220" : "#8a4a2e"} />
      {/* notepad */}
      <rect x={-27} y={2} width={12} height={9} rx={1} fill={isDark ? "#8f8672" : "#f6efdd"} transform="rotate(-8 -21 6)" />
    </g>
  );
});

export const Chair = memo(function Chair({ x, y, isDark }: { x: number; y: number; isDark: boolean }) {
  const seat = isDark ? "#4a3a28" : "#a9835b";
  const edge = isDark ? "#32271a" : "#8c6a4a";
  return (
    <g transform={`translate(${x}, ${y})`}>
      <rect x={-9} y={-8} width={18} height={16} rx={5} fill={seat} stroke={edge} strokeWidth={1} />
      <rect x={-10} y={-11} width={20} height={5} rx={2.5} fill={edge} />
    </g>
  );
});

export const MeetingTable = memo(function MeetingTable({
  x,
  y,
  radius,
  isDark,
}: {
  x: number;
  y: number;
  radius: number;
  isDark: boolean;
}) {
  const top = isDark ? "#54432e" : "#d9b98a";
  const edge = isDark ? "#3d3021" : "#bd9c6c";
  return (
    <g transform={`translate(${x}, ${y})`}>
      <circle r={radius} fill={top} stroke={edge} strokeWidth={2} />
      <circle r={radius - 7} fill="none" stroke={edge} strokeWidth={0.8} opacity={0.5} />
      {/* Claude mark inlaid in the table */}
      <text
        textAnchor="middle"
        dy={radius * 0.16}
        fontSize={radius * 0.62}
        fill={isDark ? "#8a6a45" : "#c9a06c"}
        opacity={0.55}
      >
        ✳
      </text>
    </g>
  );
});

export const Sofa = memo(function Sofa({
  x,
  y,
  rotation = 0,
  isDark,
}: {
  x: number;
  y: number;
  rotation?: number;
  isDark: boolean;
}) {
  const body = isDark ? "#5c4434" : "#cd8d66";
  const cushion = isDark ? "#6e5442" : "#dda67f";
  const edge = isDark ? "#3d2c20" : "#b0714a";
  return (
    <g transform={`translate(${x}, ${y}) rotate(${rotation})`}>
      <rect x={-46} y={-18} width={92} height={36} rx={10} fill={body} stroke={edge} strokeWidth={1.2} />
      <rect x={-40} y={-12} width={37} height={24} rx={6} fill={cushion} />
      <rect x={3} y={-12} width={37} height={24} rx={6} fill={cushion} />
      <rect x={-46} y={-18} width={92} height={7} rx={3.5} fill={edge} opacity={0.85} />
    </g>
  );
});

export const Plant = memo(function Plant({ x, y }: { x: number; y: number }) {
  return (
    <g transform={`translate(${x}, ${y})`}>
      <rect x={-7} y={4} width={14} height={10} rx={3} fill="#a0623d" />
      <ellipse cx={-5} cy={-2} rx={6} ry={9} fill="#5f8f52" transform="rotate(-24 -5 -2)" />
      <ellipse cx={5} cy={-2} rx={6} ry={9} fill="#6f9f5e" transform="rotate(24 5 -2)" />
      <ellipse cx={0} cy={-6} rx={5.5} ry={10} fill="#7fae6b" />
    </g>
  );
});

export const CoffeeTable = memo(function CoffeeTable({ x, y, isDark }: { x: number; y: number; isDark: boolean }) {
  const top = isDark ? "#4a3a28" : "#c9a97e";
  const edge = isDark ? "#32271a" : "#a9835b";
  return (
    <g transform={`translate(${x}, ${y})`}>
      <ellipse rx={26} ry={16} fill={top} stroke={edge} strokeWidth={1.2} />
      <circle cx={-7} cy={-2} r={3.2} fill={isDark ? "#8a4a2e" : "#c0714c"} />
      <circle cx={-7} cy={-2} r={1.8} fill={isDark ? "#5c3220" : "#8a4a2e"} />
      <rect x={2} y={-5} width={12} height={9} rx={1.5} fill={isDark ? "#8f8672" : "#f6efdd"} transform="rotate(9 8 0)" />
    </g>
  );
});

/** Espresso machine on a small stand — the lounge's centrepiece. */
export const CoffeeMachine = memo(function CoffeeMachine({ x, y, isDark }: { x: number; y: number; isDark: boolean }) {
  const stand = isDark ? "#4a3a28" : "#b08a5e";
  const body = isDark ? "#26262b" : "#3a3a42";
  return (
    <g transform={`translate(${x}, ${y})`}>
      <rect x={-18} y={-10} width={36} height={22} rx={4} fill={stand} stroke={isDark ? "#32271a" : "#93714c"} strokeWidth={1} />
      <rect x={-11} y={-7} width={22} height={13} rx={2.5} fill={body} />
      <circle cx={0} cy={-0.5} r={2.6} fill="#d97757" />
      <rect x={-8} y={8} width={5} height={3} rx={1} fill="#e8e0cd" />
      <rect x={3} y={8} width={5} height={3} rx={1} fill="#e8e0cd" />
      {/* steam */}
      {[0, 1].map((i) => (
        <path
          key={i}
          d={`M ${i * 6 - 3} -10 q 2 -4 0 -8`}
          fill="none"
          stroke={isDark ? "#9a9284" : "#b8b0a0"}
          strokeWidth={1}
          strokeLinecap="round"
          opacity={0.6}
          style={{ animation: `zzz-float 2.6s ease-out ${i * 1.1}s infinite` }}
        />
      ))}
    </g>
  );
});
