// Composant Avatar Patient — Alexandre Bouchard
// Représentation SVG illustrée style flat moderne

const PatientAvatar = ({ state = 'idle', mouthShape = 0 }) => {
  // state: 'idle' | 'listening' | 'speaking' | 'coughing' | 'exam'
  
  // Couleurs du personnage
  const skinTone = "#D4956A";
  const skinShadow = "#C07A50";
  const hairColor = "#3D2B1F";
  const beardColor = "#4A3328";
  const shirtColors = ["#8B9E7A", "#A8876A", "#7A8B9E"]; // carreaux
  const eyeWhite = "#FDFBF7";
  const pupilColor = "#2C1810";
  const irisColor = "#5C4033";

  // Formes de bouche pour le lipsync (0=fermé, 1=petit, 2=moyen, 3=grand)
  const mouthPaths = [
    "M 200 298 Q 220 302 240 298", // fermé
    "M 198 298 Q 220 308 242 298 Q 220 310 198 298 Z", // petit
    "M 196 296 Q 220 312 244 296 Q 220 316 196 296 Z", // moyen
    "M 194 294 Q 220 318 246 294 Q 220 322 194 294 Z", // grand
  ];

  const isBlinking = state === 'idle'; // géré par le parent via prop

  return (
    <svg
      viewBox="0 0 440 560"
      xmlns="http://www.w3.org/2000/svg"
      style={{ width: '100%', height: '100%', overflow: 'visible' }}
    >
      <defs>
        {/* Ombres douces */}
        <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="4" stdDeviation="6" floodColor="#3A4A52" floodOpacity="0.15"/>
        </filter>
        <filter id="skinFilter">
          <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
          <feComposite in="SourceGraphic" in2="blur" operator="over"/>
        </filter>
        {/* Dégradé peau */}
        <radialGradient id="faceGrad" cx="50%" cy="40%" r="55%">
          <stop offset="0%" stopColor="#E0A880"/>
          <stop offset="100%" stopColor={skinShadow}/>
        </radialGradient>
        <radialGradient id="cheekFlush" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#D4856A" stopOpacity="0.4"/>
          <stop offset="100%" stopColor="#D4856A" stopOpacity="0"/>
        </radialGradient>
        {/* Dégradé corps */}
        <linearGradient id="shirtGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#8B9E7A"/>
          <stop offset="50%" stopColor="#7A8B6A"/>
          <stop offset="100%" stopColor="#8B9E7A"/>
        </linearGradient>
        {/* Lignes de la chemise à carreaux */}
        <pattern id="plaidPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
          <rect width="20" height="20" fill="#8B9E7A"/>
          <rect x="0" y="0" width="10" height="10" fill="#7A8E6A" opacity="0.4"/>
          <rect x="10" y="10" width="10" height="10" fill="#7A8E6A" opacity="0.4"/>
          <line x1="0" y1="10" x2="20" y2="10" stroke="#6A7E5A" strokeWidth="0.5" opacity="0.5"/>
          <line x1="10" y1="0" x2="10" y2="20" stroke="#6A7E5A" strokeWidth="0.5" opacity="0.5"/>
        </pattern>
      </defs>

      {/* === CORPS / TORSE === */}
      {/* Épaules et torse */}
      <ellipse cx="220" cy="530" rx="140" ry="60" fill="#6A7E5A" opacity="0.3"/>
      
      {/* Chemise à carreaux */}
      <path
        d="M 80 460 Q 80 390 120 370 L 160 355 L 220 365 L 280 355 L 320 370 Q 360 390 360 460 L 360 580 L 80 580 Z"
        fill="url(#plaidPattern)"
        filter="url(#softShadow)"
      />
      {/* Ombre chemise côtés */}
      <path d="M 80 460 Q 80 390 120 370 L 160 355 L 160 400 Q 110 420 108 480 Z" fill="#6A7E5A" opacity="0.3"/>
      <path d="M 360 460 Q 360 390 320 370 L 280 355 L 280 400 Q 330 420 332 480 Z" fill="#6A7E5A" opacity="0.3"/>
      
      {/* Col de la chemise */}
      <path d="M 195 358 L 220 390 L 245 358 L 220 370 Z" fill={skinTone}/>
      <path d="M 195 358 L 220 375 L 195 360 Z" fill="#FDFBF7" opacity="0.6"/>
      <path d="M 245 358 L 220 375 L 245 360 Z" fill="#FDFBF7" opacity="0.6"/>

      {/* === COU === */}
      <rect x="200" y="320" width="40" height="50" rx="8" fill={skinTone}/>
      <rect x="205" y="325" width="6" height="40" rx="3" fill={skinShadow} opacity="0.3"/>
      <rect x="229" y="325" width="6" height="40" rx="3" fill={skinShadow} opacity="0.3"/>

      {/* === OREILLES === */}
      <ellipse cx="148" cy="240" rx="14" ry="18" fill={skinTone}/>
      <ellipse cx="150" cy="240" rx="8" ry="12" fill={skinShadow} opacity="0.3"/>
      <ellipse cx="292" cy="240" rx="14" ry="18" fill={skinTone}/>
      <ellipse cx="290" cy="240" rx="8" ry="12" fill={skinShadow} opacity="0.3"/>

      {/* === TÊTE / VISAGE === */}
      {/* Forme de la tête */}
      <ellipse cx="220" cy="230" rx="78" ry="88" fill="url(#faceGrad)" filter="url(#softShadow)"/>
      
      {/* Mâchoire légèrement angulaire */}
      <path d="M 148 250 Q 145 310 180 340 Q 200 355 220 356 Q 240 355 260 340 Q 295 310 292 250" fill="url(#faceGrad)"/>

      {/* Rougeur des joues (fatigué/légèrement fébrile) */}
      <ellipse cx="175" cy="272" rx="22" ry="14" fill="url(#cheekFlush)"/>
      <ellipse cx="265" cy="272" rx="22" ry="14" fill="url(#cheekFlush)"/>

      {/* === CHEVEUX === */}
      {/* Masse principale des cheveux */}
      <path
        d="M 148 195 Q 145 145 165 125 Q 185 105 220 102 Q 255 105 275 125 Q 295 145 292 195"
        fill={hairColor}
      />
      {/* Détail cheveux — coupe courte texturée */}
      <path d="M 150 185 Q 155 155 170 138 Q 188 120 220 118" stroke={hairColor} strokeWidth="6" fill="none" strokeLinecap="round"/>
      <path d="M 148 200 Q 150 165 168 145 Q 185 128 210 120" stroke="#2A1A0F" strokeWidth="3" fill="none" strokeLinecap="round" opacity="0.5"/>
      <path d="M 290 195 Q 288 160 272 138 Q 255 120 230 118" stroke={hairColor} strokeWidth="4" fill="none" strokeLinecap="round"/>
      {/* Naissance des cheveux */}
      <ellipse cx="220" cy="118" rx="56" ry="18" fill={hairColor}/>
      <path d="M 164 115 Q 185 108 220 106 Q 255 108 276 115" fill={hairColor}/>

      {/* Cernes sous les yeux (fatigué) */}
      <ellipse cx="188" cy="250" rx="18" ry="7" fill="#B8856A" opacity="0.25"/>
      <ellipse cx="252" cy="250" rx="18" ry="7" fill="#B8856A" opacity="0.25"/>

      {/* === YEUX === */}
      {/* Sourcils légèrement froncés (préoccupé) */}
      <path d="M 168 208 Q 180 203 196 206" stroke={hairColor} strokeWidth="3.5" fill="none" strokeLinecap="round"/>
      <path d="M 244 206 Q 260 203 272 208" stroke={hairColor} strokeWidth="3.5" fill="none" strokeLinecap="round"/>
      
      {/* Orbites */}
      <ellipse cx="188" cy="232" rx="22" ry="16" fill={eyeWhite}/>
      <ellipse cx="252" cy="232" rx="22" ry="16" fill={eyeWhite}/>
      
      {/* Iris */}
      <circle cx="188" cy="232" r="10" fill={irisColor}/>
      <circle cx="252" cy="232" r="10" fill={irisColor}/>
      
      {/* Pupilles */}
      <circle cx="188" cy="232" r="5.5" fill={pupilColor}/>
      <circle cx="252" cy="232" r="5.5" fill={pupilColor}/>
      
      {/* Reflets */}
      <circle cx="192" cy="228" r="2.5" fill="white" opacity="0.8"/>
      <circle cx="256" cy="228" r="2.5" fill="white" opacity="0.8"/>
      
      {/* Paupières (clignement contrôlé par CSS/parent) */}
      <ellipse
        id="eyelid-left"
        cx="188" cy="224"
        rx="22" ry="0"
        fill={skinTone}
        style={{ transformOrigin: '188px 232px' }}
      />
      <ellipse
        id="eyelid-right"
        cx="252" cy="224"
        rx="22" ry="0"
        fill={skinTone}
        style={{ transformOrigin: '252px 232px' }}
      />

      {/* Paupières inférieures */}
      <path d="M 166 238 Q 188 248 210 238" stroke={skinShadow} strokeWidth="1.5" fill="none" opacity="0.4"/>
      <path d="M 230 238 Q 252 248 274 238" stroke={skinShadow} strokeWidth="1.5" fill="none" opacity="0.4"/>

      {/* === NEZ === */}
      <path d="M 215 240 Q 208 268 205 278 Q 212 285 220 285 Q 228 285 235 278 Q 232 268 225 240" fill={skinShadow} opacity="0.2"/>
      <ellipse cx="210" cy="278" rx="7" ry="5" fill={skinShadow} opacity="0.35"/>
      <ellipse cx="230" cy="278" rx="7" ry="5" fill={skinShadow} opacity="0.35"/>
      <ellipse cx="220" cy="282" rx="5" ry="4" fill={skinShadow} opacity="0.2"/>

      {/* === BARBE / MOUSTACHE === */}
      {/* Barbe de quelques jours — pointillés/hachures */}
      <path d="M 162 270 Q 165 310 180 338 Q 200 355 220 356 Q 240 355 260 338 Q 275 310 278 270"
        fill={beardColor} opacity="0.12" filter="url(#softShadow)"/>
      {/* Texture barbe */}
      {[...Array(18)].map((_, i) => {
        const angle = (i / 18) * Math.PI;
        const r = 68 + Math.sin(i * 2.3) * 10;
        const x = 220 + Math.cos(angle + Math.PI * 0.9) * r * 1.1;
        const y = 310 + Math.sin(angle + 0.5) * 35 + i * 0.5;
        return (
          <circle key={i} cx={x} cy={y} r="1.2" fill={beardColor} opacity={0.25 + Math.random() * 0.2}/>
        );
      })}
      {/* Moustache */}
      <path d="M 200 290 Q 210 296 220 293 Q 230 296 240 290" stroke={beardColor} strokeWidth="2.5" fill="none" strokeLinecap="round" opacity="0.6"/>

      {/* === BOUCHE === */}
      {/* Lèvres */}
      <path
        d={mouthPaths[mouthShape]}
        fill={mouthShape > 0 ? "#8B4A3A" : "none"}
        stroke="#8B4A3A"
        strokeWidth={mouthShape === 0 ? "2" : "0"}
        strokeLinecap="round"
      />
      {/* Lèvre supérieure */}
      {mouthShape > 0 && (
        <>
          <path d="M 196 296 Q 208 290 220 292 Q 232 290 244 296" fill="#A05A4A" opacity="0.8"/>
          <path d="M 196 296 Q 220 308 244 296 Q 232 302 220 304 Q 208 302 196 296" fill="#B06A5A" opacity="0.9"/>
          {/* Dents légèrement visibles */}
          {mouthShape >= 2 && (
            <path d="M 200 298 Q 220 305 240 298 Q 230 300 220 301 Q 210 300 200 298" fill="#FDFBF7" opacity="0.9"/>
          )}
        </>
      )}

      {/* === MAIN DROITE (visible légèrement) === */}
      {state !== 'coughing' && (
        <path
          d="M 295 420 Q 310 415 325 425 Q 335 435 330 445 Q 320 455 305 448 Q 290 440 295 420 Z"
          fill={skinTone}
          opacity="0.6"
        />
      )}
      
      {/* Main vers bouche (état toux) */}
      {state === 'coughing' && (
        <path
          d="M 220 310 Q 235 280 248 260 Q 255 250 260 248 Q 270 246 272 255 Q 265 268 258 280 Q 245 300 238 320 Z"
          fill={skinTone}
          opacity="0.8"
        />
      )}
    </svg>
  );
};

// Exporter globalement
window.PatientAvatar = PatientAvatar;