import React, { useState } from 'react';
import { Box, CircleDashed, Info, Layers, Triangle } from 'lucide-react';

const shapesData = [
  {
    id: 'kubus',
    name: 'Kubus',
    category: 'Sisi Datar',
    icon: <Box size={18} />,
    desc: 'Jaring-jaring kubus terdiri dari 6 buah persegi yang kongruen (sama besar). Semuanya memiliki panjang sisi (rusuk) yang sama.',
    svg3D: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-xl">
        <path d="M50,25 L75,37.5 L50,50 L25,37.5 Z" fill="#60A5FA" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M75,37.5 L75,70 L50,82.5 L50,50 Z" fill="#3B82F6" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M25,37.5 L50,50 L50,82.5 L25,70 Z" fill="#2563EB" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
      </svg>
    ),
    svgNet: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-md">
        <g fill="#93C5FD" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round">
          <rect x="40" y="10" width="20" height="20" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="40" y="30" width="20" height="20" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="40" y="50" width="20" height="20" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="40" y="70" width="20" height="20" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="20" y="30" width="20" height="20" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="60" y="30" width="20" height="20" className="hover:fill-blue-400 transition-colors cursor-pointer" />
        </g>
      </svg>
    )
  },
  {
    id: 'balok',
    name: 'Balok',
    category: 'Sisi Datar',
    icon: <Box size={18} />,
    desc: 'Jaring-jaring balok terdiri dari 6 buah persegi panjang, di mana terdapat 3 pasang persegi panjang yang ukurannya saling sama besar (saling berhadapan).',
    svg3D: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-xl">
        <path d="M50,30 L80,40 L50,60 L20,50 Z" fill="#60A5FA" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M80,40 L80,70 L50,90 L50,60 Z" fill="#3B82F6" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M20,50 L50,60 L50,90 L20,80 Z" fill="#2563EB" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
      </svg>
    ),
    svgNet: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-md">
        <g fill="#93C5FD" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round">
          <rect x="40" y="10" width="20" height="15" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="40" y="25" width="20" height="30" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="40" y="55" width="20" height="15" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="40" y="70" width="20" height="30" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="60" y="25" width="15" height="30" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="25" y="25" width="15" height="30" className="hover:fill-blue-400 transition-colors cursor-pointer" />
        </g>
      </svg>
    )
  },
  {
    id: 'prisma',
    name: 'Prisma Segitiga',
    category: 'Sisi Datar',
    icon: <Triangle size={18} />,
    desc: 'Terdiri dari 2 buah segitiga yang kongruen (sebagai alas dan tutup) serta 3 buah persegi panjang (sebagai sisi tegak).',
    svg3D: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-xl">
        <path d="M25,35 L50,20 L75,35 Z" fill="#60A5FA" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M25,35 L50,20 L50,70 L25,85 Z" fill="#3B82F6" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M75,35 L50,20 L50,70 L75,85 Z" fill="#2563EB" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
      </svg>
    ),
    svgNet: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-md">
        <g fill="#93C5FD" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round">
          <rect x="20" y="30" width="20" height="40" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="40" y="30" width="20" height="40" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <rect x="60" y="30" width="20" height="40" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <path d="M40,30 L60,30 L50,10 Z" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <path d="M40,70 L60,70 L50,90 Z" className="hover:fill-blue-400 transition-colors cursor-pointer" />
        </g>
      </svg>
    )
  },
  {
    id: 'limas',
    name: 'Limas Segiempat',
    category: 'Sisi Datar',
    icon: <Triangle size={18} />,
    desc: 'Terdiri dari 1 buah alas berbentuk segi empat (bisa persegi atau persegi panjang) dan 4 buah sisi tegak berbentuk segitiga yang menyatu di satu titik puncak.',
    svg3D: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-xl">
        <path d="M25,60 L50,70 L75,60 L50,20 Z" fill="#3B82F6" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M25,60 L50,70 L50,20 Z" fill="#60A5FA" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M75,60 L50,70 L50,20 Z" fill="#2563EB" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
      </svg>
    ),
    svgNet: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-md">
        <g fill="#93C5FD" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round">
          <rect x="40" y="40" width="20" height="20" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <path d="M40,40 L60,40 L50,15 Z" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <path d="M40,60 L60,60 L50,85 Z" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <path d="M40,40 L40,60 L15,50 Z" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <path d="M60,40 L60,60 L85,50 Z" className="hover:fill-blue-400 transition-colors cursor-pointer" />
        </g>
      </svg>
    )
  },
  {
    id: 'tabung',
    name: 'Tabung',
    category: 'Sisi Lengkung',
    icon: <CircleDashed size={18} />,
    desc: 'Terdiri dari 2 buah lingkaran yang kongruen (sebagai alas dan tutup) dan 1 buah persegi panjang (sebagai selimut tabung).',
    svg3D: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-xl">
        <path d="M30,30 L30,70 A20,10 0 0,0 70,70 L70,30 Z" fill="#3B82F6" stroke="#1E3A8A" strokeWidth="1"/>
        <ellipse cx="50" cy="30" rx="20" ry="10" fill="#60A5FA" stroke="#1E3A8A" strokeWidth="1"/>
      </svg>
    ),
    svgNet: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-md">
        <g fill="#93C5FD" stroke="#1E3A8A" strokeWidth="1">
          <rect x="20" y="35" width="60" height="30" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <circle cx="50" cy="20" r="14" className="hover:fill-blue-400 transition-colors cursor-pointer" />
          <circle cx="50" cy="80" r="14" className="hover:fill-blue-400 transition-colors cursor-pointer" />
        </g>
      </svg>
    )
  },
  {
    id: 'kerucut',
    name: 'Kerucut',
    category: 'Sisi Lengkung',
    icon: <CircleDashed size={18} />,
    desc: 'Terdiri dari 1 buah lingkaran (sebagai alas) dan 1 buah juring lingkaran (sebagai selimut kerucut).',
    svg3D: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-xl">
        <path d="M50,20 L30,70 A 20,10 0 0,0 70,70 Z" fill="#3B82F6" stroke="#1E3A8A" strokeWidth="1" strokeLinejoin="round"/>
        <path d="M30,70 A 20,10 0 0,1 70,70" fill="none" stroke="#1E3A8A" strokeWidth="1" strokeDasharray="2,2"/>
      </svg>
    ),
    svgNet: (
      <svg viewBox="0 0 100 100" className="w-full h-full drop-shadow-md">
        <g fill="#93C5FD" stroke="#1E3A8A" strokeWidth="1">
          <path d="M 50,55 L 15,35 A 40,40 0 0,1 85,35 Z" className="hover:fill-blue-400 transition-colors cursor-pointer" strokeLinejoin="round" />
          <circle cx="50" cy="75" r="14" className="hover:fill-blue-400 transition-colors cursor-pointer" />
        </g>
      </svg>
    )
  }
];

export default function App() {
  const [activeShape, setActiveShape] = useState(shapesData[0]);

  // Kelompokkan berdasarkan kategori
  const groupedShapes = shapesData.reduce((acc, shape) => {
    if (!acc[shape.category]) acc[shape.category] = [];
    acc[shape.category].push(shape);
    return acc;
  }, {});

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans p-4 md:p-8 flex flex-col">
      {/* Header */}
      <header className="mb-8 text-center md:text-left">
        <h1 className="text-3xl md:text-4xl font-bold text-blue-900 flex items-center justify-center md:justify-start gap-3">
          <Layers className="text-blue-600" size={36} />
          Visualisasi Jaring-Jaring
        </h1>
        <p className="text-slate-500 mt-2 text-lg">Eksplorasi bangun ruang sisi datar dan sisi lengkung</p>
      </header>

      <div className="flex flex-col lg:flex-row gap-8 flex-1">
        {/* Sidebar Navigasi */}
        <div className="w-full lg:w-72 flex flex-col gap-6">
          {Object.entries(groupedShapes).map(([category, shapes]) => (
            <div key={category} className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
              <h2 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-3 px-2">
                {category}
              </h2>
              <div className="flex flex-col gap-1">
                {shapes.map((shape) => (
                  <button
                    key={shape.id}
                    onClick={() => setActiveShape(shape)}
                    className={`flex items-center gap-3 w-full text-left px-4 py-3 rounded-xl transition-all ${
                      activeShape.id === shape.id
                        ? 'bg-blue-600 text-white shadow-md font-medium'
                        : 'text-slate-600 hover:bg-blue-50'
                    }`}
                  >
                    {shape.icon}
                    {shape.name}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Konten Utama (Visualisasi) */}
        <div className="flex-1 flex flex-col gap-6">
          
          {/* Card Info */}
          <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-start gap-4">
            <div className="bg-blue-100 p-3 rounded-full text-blue-600 shrink-0">
              <Info size={24} />
            </div>
            <div>
              <h3 className="text-2xl font-bold text-slate-800 mb-2">{activeShape.name}</h3>
              <p className="text-slate-600 leading-relaxed text-lg">
                {activeShape.desc}
              </p>
            </div>
          </div>

          {/* Canvas Area */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 flex-1">
            
            {/* Panel 3D */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 flex flex-col">
              <h4 className="text-center font-semibold text-slate-500 mb-4 bg-slate-50 py-2 rounded-lg">Bentuk 3D</h4>
              <div className="flex-1 min-h-[300px] flex items-center justify-center p-8">
                {activeShape.svg3D}
              </div>
            </div>

            {/* Panel Jaring-jaring */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 flex flex-col">
              <h4 className="text-center font-semibold text-slate-500 mb-4 bg-slate-50 py-2 rounded-lg">Jaring-Jaring 2D</h4>
              <div className="flex-1 min-h-[300px] flex items-center justify-center p-8 relative">
                {activeShape.svgNet}
                <div className="absolute bottom-4 text-xs text-slate-400 bg-slate-50 px-3 py-1 rounded-full border border-slate-100">
                  Arahkan kursor ke jaring-jaring
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  );
}