"use client";

import React, { useState } from "react";
import { MapPin, Mountain, Clock } from "lucide-react";
import styles from "./ContactComponents.module.css";

interface DestinationPin {
  id: string;
  name: string;
  elevation: string;
  cx: number;
  cy: number;
}

const DESTINATIONS: DestinationPin[] = [
  { id: "kerinci", name: "Gunung Kerinci", elevation: "3.805 mdpl", cx: 120, cy: 110 },
  { id: "prau", name: "Gunung Prau & Merbabu", elevation: "2.565 & 3.145 mdpl", cx: 215, cy: 195 },
  { id: "semeru", name: "Bromo & Semeru", elevation: "2.329 & 3.676 mdpl", cx: 275, cy: 205 },
  { id: "rinjani", name: "Gunung Rinjani", elevation: "3.726 mdpl", cx: 330, cy: 210 },
  { id: "latimojong", name: "Gunung Latimojong", elevation: "3.478 mdpl", cx: 375, cy: 125 },
  { id: "carstensz", name: "Puncak Carstensz", elevation: "4.884 mdpl", cx: 585, cy: 155 },
];

export default function ContactLocationPanel() {
  const [activePin, setActivePin] = useState<DestinationPin | null>(null);

  return (
    <div className={styles.locationCard} id="lokasi">
      {/* Panel Header */}
      <div className={styles.panelHeader}>
        <div className={styles.panelIconWrapper}>
          <MapPin size={24} className={styles.panelIcon} />
        </div>
        <div>
          <h2 className={styles.panelTitle}>Lokasi Kami</h2>
          <p className={styles.panelSubtitle}>
            Beroperasi di berbagai destinasi pendakian di Indonesia
          </p>
        </div>
      </div>

      {/* Main Content: Split into Map (Left) and Quick Info Box (Right) */}
      <div className={styles.locationContentGrid}>
        {/* Left: Vector Map of Indonesia */}
        <div className={styles.mapContainer}>
          <svg
            className={styles.indonesiaMapSvg}
            viewBox="0 0 680 260"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            role="img"
            aria-label="Peta Destinasi Pendakian PPT Adventure di Indonesia"
          >
            <defs>
              <filter id="pinShadow" x="-20%" y="-20%" width="140%" height="140%">
                <feDropShadow dx="0" dy="2" stdDeviation="2" floodColor="#17232F" floodOpacity="0.25" />
              </filter>
            </defs>

            {/* Sumatera Island */}
            <path
              d="M48 30 C58 20 72 26 84 42 C104 68 124 98 140 128 C148 142 160 156 168 170 C162 176 150 178 144 172 C132 158 116 136 102 114 C88 92 70 70 54 50 C46 40 40 36 48 30 Z"
              fill="#CFE6D3"
              stroke="#B4D7BC"
              strokeWidth="1.2"
            />
            {/* Bangka Belitung */}
            <circle cx="172" cy="120" r="7" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <circle cx="188" cy="128" r="5" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />

            {/* Jawa Island */}
            <path
              d="M165 190 C182 188 205 188 226 190 C250 193 274 196 295 198 C302 204 298 212 288 212 C265 210 240 208 216 206 C194 205 174 204 162 198 C160 194 162 191 165 190 Z"
              fill="#CFE6D3"
              stroke="#B4D7BC"
              strokeWidth="1.2"
            />
            {/* Madura */}
            <path d="M280 188 C290 187 298 190 295 194 C290 196 282 194 280 188 Z" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />

            {/* Kalimantan Island */}
            <path
              d="M208 64 C230 52 265 54 286 68 C298 76 308 92 305 106 C302 120 292 134 278 142 C262 150 240 152 225 146 C212 140 200 128 202 114 C204 100 198 88 202 76 C204 70 206 66 208 64 Z"
              fill="#CFE6D3"
              stroke="#B4D7BC"
              strokeWidth="1.2"
            />

            {/* Sulawesi Island (K shape) */}
            <path
              d="M348 76 C354 70 366 74 374 84 C382 95 388 108 384 120 C380 132 368 142 365 156 C362 168 368 178 375 186 C370 190 360 186 356 176 C352 164 354 150 358 138 C354 130 344 126 338 120 C332 112 334 98 342 88 C345 82 346 78 348 76 Z"
              fill="#CFE6D3"
              stroke="#B4D7BC"
              strokeWidth="1.2"
            />
            {/* Sulawesi East Arms */}
            <path d="M374 116 C390 114 402 122 398 128 C388 130 376 124 374 116 Z" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <path d="M372 136 C386 142 396 152 390 158 C380 156 372 146 372 136 Z" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />

            {/* Bali, Lombok, Sumbawa, Flores (Sunda Kecil) */}
            <circle cx="310" cy="208" r="4.5" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <circle cx="330" cy="210" r="5" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <ellipse cx="355" cy="212" rx="12" ry="4" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <ellipse cx="390" cy="214" rx="16" ry="4" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <ellipse cx="430" cy="218" rx="14" ry="4.5" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />

            {/* Maluku Islands */}
            <ellipse cx="430" cy="98" rx="7" ry="16" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <circle cx="448" cy="132" r="6" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <circle cx="438" cy="148" r="7" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />
            <circle cx="452" cy="178" r="5" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />

            {/* Papua Island */}
            <path
              d="M495 106 C510 98 534 100 552 110 C570 120 598 124 624 130 C642 134 656 146 648 158 C636 166 612 172 588 174 C565 176 542 168 528 156 C514 144 502 132 494 120 C490 114 492 108 495 106 Z"
              fill="#CFE6D3"
              stroke="#B4D7BC"
              strokeWidth="1.2"
            />
            {/* Papua Bird Head */}
            <path d="M492 104 C478 98 472 106 480 116 C488 122 494 116 492 104 Z" fill="#CFE6D3" stroke="#B4D7BC" strokeWidth="1" />

            {/* Interactive Mountain Destination Pins */}
            {DESTINATIONS.map((pin) => {
              const isHovered = activePin?.id === pin.id;
              return (
                <g
                  key={pin.id}
                  className={styles.mapPinGroup}
                  onMouseEnter={() => setActivePin(pin)}
                  onMouseLeave={() => setActivePin(null)}
                  filter="url(#pinShadow)"
                  style={{ cursor: "pointer" }}
                >
                  {/* Outer Pulsing Halo */}
                  <circle
                    cx={pin.cx}
                    cy={pin.cy}
                    r={isHovered ? 12 : 9}
                    fill="#269436"
                    fillOpacity={isHovered ? 0.35 : 0.2}
                    className={styles.pinPulse}
                  />
                  {/* Pin Dot Base */}
                  <circle
                    cx={pin.cx}
                    cy={pin.cy}
                    r="4.5"
                    fill="#FFFFFF"
                    stroke="#269436"
                    strokeWidth="2.5"
                  />
                  {/* Center Accent */}
                  <circle cx={pin.cx} cy={pin.cy} r="2" fill="#269436" />
                </g>
              );
            })}
          </svg>

          {/* Real-time Tooltip when hovering pin */}
          {activePin && (
            <div
              className={styles.mapTooltip}
              style={{
                left: `${(activePin.cx / 680) * 100}%`,
                top: `${(activePin.cy / 260) * 100}%`,
              }}
            >
              <strong>{activePin.name}</strong>
              <span>{activePin.elevation}</span>
            </div>
          )}

          {/* Handwritten Annotation at bottom left of map */}
          <div className={styles.mapHandwrittenWrap}>
            <span className={styles.mapHandwrittenText}>
              Dari Sabang sampai Merauke
            </span>
            <svg
              className={styles.mapArrowSvg}
              width="48"
              height="24"
              viewBox="0 0 48 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
            >
              <path
                d="M4 18 C14 20 28 16 38 6"
                stroke="#269436"
                strokeWidth="2"
                strokeLinecap="round"
              />
              <path
                d="M32 4 L39 6 L36 13"
                stroke="#269436"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
        </div>

        {/* Right: Info Box & Operational Hours */}
        <div className={styles.locationInfoCard}>
          {/* Note Card */}
          <div className={styles.noteBox}>
            <div className={styles.noteIconRow}>
              <div className={styles.noteIconCircle}>
                <Mountain size={20} className={styles.noteIcon} />
              </div>
            </div>
            <h3 className={styles.noteTitle}>Senang Mendengar Dari Kamu</h3>
            <p className={styles.noteDesc}>
              Apapun pertanyaan, masukan, atau rencana perjalananmu, jangan ragu
              untuk menghubungi kami. Tim kami akan merespons secepat mungkin.
            </p>
          </div>

          <div className={styles.noteDivider} />

          {/* Operational Hours */}
          <div className={styles.opHoursRow}>
            <div className={styles.opIconCircle}>
              <Clock size={20} className={styles.opIcon} />
            </div>
            <div className={styles.opTextCol}>
              <span className={styles.opLabel}>Jam Operasional</span>
              <strong className={styles.opDays}>Senin - Minggu</strong>
              <span className={styles.opHours}>08.00 - 21.00 WIB</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}