import { useState } from 'react';

const HoroscopeGenerator = () => {
  const [dob, setDob] = useState('');
  const [showHoroscope, setShowHoroscope] = useState(false);

  const rasiPositions = [
    { id: 1, label: 'Rasi', position: 'top-left' },
    { id: 2, label: 'Rasi', position: 'top-center-left' },
    { id: 3, label: 'Rasi', position: 'top-center-right' },
    { id: 4, label: 'Rasi', position: 'top-right' },
    { id: 5, label: 'Rasi', position: 'middle-left' },
    { id: 6, label: 'Rasi', position: 'middle-right' },
    { id: 7, label: 'Rasi', position: 'bottom-left' },
    { id: 8, label: 'Rasi', position: 'bottom-center-left' },
    { id: 9, label: 'Rasi', position: 'bottom-center-right' },
    { id: 10, label: 'Rasi', position: 'bottom-right' },
  ];

  const navamsaPositions = [
    { id: 1, label: 'Navamsam', position: 'top-left' },
    { id: 2, label: 'Navamsam', position: 'top-center-left' },
    { id: 3, label: 'Navamsam', position: 'top-center-right' },
    { id: 4, label: 'Navamsam', position: 'top-right' },
    { id: 5, label: 'Navamsam', position: 'middle-left' },
    { id: 6, label: 'Navamsam', position: 'middle-right' },
    { id: 7, label: 'Navamsam', position: 'bottom-left' },
    { id: 8, label: 'Navamsam', position: 'bottom-center-left' },
    { id: 9, label: 'Navamsam', position: 'bottom-center-right' },
    { id: 10, label: 'Navamsam', position: 'bottom-right' },
  ];

  const zodiacSigns = [
    { name: 'Aries', emoji: '♈' },
    { name: 'Taurus', emoji: '♉' },
    { name: 'Gemini', emoji: '♊' },
    { name: 'Cancer', emoji: '♋' },
    { name: 'Leo', emoji: '♌' },
    { name: 'Virgo', emoji: '♍' },
    { name: 'Libra', emoji: '♎' },
    { name: 'Scorpio', emoji: '♏' },
    { name: 'Sagittarius', emoji: '♐' },
    { name: 'Capricorn', emoji: '♑' },
    { name: 'Aquarius', emoji: '♒' },
    { name: 'Pisces', emoji: '♓' }
  ];

  const getZodiacSign = (date) => {
    const month = date.getMonth() + 1;
    const day = date.getDate();

    if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return 0;
    if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return 1;
    if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) return 2;
    if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) return 3;
    if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return 4;
    if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return 5;
    if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) return 6;
    if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) return 7;
    if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) return 8;
    if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) return 9;
    if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return 10;
    return 11;
  };

  const handleGenerate = () => {
    if (dob) {
      setShowHoroscope(true);
    }
  };

  const userZodiacIndex = dob ? getZodiacSign(new Date(dob)) : -1;

  const ChartBox = ({ label, onClick }) => (
    <div 
      onClick={onClick}
      className="bg-white border border-gray-300 rounded-lg p-2 flex flex-col items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors min-h-[60px]"
    >
      <svg className="w-5 h-5 text-gray-600 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10" strokeWidth="2"/>
        <line x1="12" y1="8" x2="12" y2="16" strokeWidth="2"/>
        <line x1="8" y1="12" x2="16" y2="12" strokeWidth="2"/>
      </svg>
      <span className="text-[10px] font-medium text-gray-700 text-center">{label}</span>
    </div>
  );

  return (
    <div className="min-h-screen bg-white">
      <div className="max-w-[1400px] mx-auto p-4">
        {/* Header */}
        <div className="text-center py-4 ">
          <h1 className="text-[24px] font-semibold text-gray-800">
            Astrology / Horoscope
          </h1>
        </div>

        {/* Date Input Section */}
        <div className="py-6  w-full max-w-[400px] mx-auto">
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Birth Date
          </label>
          <div className="relative">
            <input
              type="date"
              value={dob}
              onChange={(e) => setDob(e.target.value)}
              className="w-full px-4 py-3 bg-gray-100  rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
            />
          </div>
        </div>

<div className='grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-[950px] mx-auto'>

<div>

 {/* Add Rasi Section */}
        <div className="py-6">
          <h2 className="text-base font-semibold text-gray-800 mb-4">
            Add Rasi
          </h2>
          
          {/* Rasi Chart Grid */}
          <div className="grid grid-cols-4 gap-2">
            {/* Top Row - 4 boxes */}
            <ChartBox label="Rasi" onClick={() => {}} />
            <ChartBox label="Rasi" onClick={() => {}} />
            <ChartBox label="Rasi" onClick={() => {}} />
            <ChartBox label="Rasi" onClick={() => {}} />
            
            {/* Middle Row - Left box, Center image, Right box */}
            <ChartBox label="Rasi" onClick={() => {}} />
            <div className="col-span-2 row-span-2 flex items-center justify-center">
              <div className="w-full aspect-square rounded-full overflow-hidden border-4 border-gray-200 shadow-lg">
                <img 
                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='grad1'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(240,240,240);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23grad1)'/%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M 0,-80 L 20,-20 L 80,-20 L 30,20 L 50,80 L 0,40 L -50,80 L -30,20 L -80,-20 L -20,-20 Z' fill='%23FFD700' stroke='%23FFA500' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='15' fill='%23FF6B6B'/%3E%3Ctext x='0' y='5' font-size='20' text-anchor='middle' fill='white' font-family='Arial'%3E♈%3C/text%3E%3C/g%3E%3C/svg%3E"
                  alt="Horoscope Chart"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
            <ChartBox label="Rasi" onClick={() => {}} />
            
            {/* Middle Row 2 - Left box continues, Right box continues */}
            <ChartBox label="Rasi" onClick={() => {}} />
            <ChartBox label="Rasi" onClick={() => {}} />
            
            {/* Bottom Row - 4 boxes */}
            <ChartBox label="Rasi" onClick={() => {}} />
            <ChartBox label="Rasi" onClick={() => {}} />
            <ChartBox label="Rasi" onClick={() => {}} />
            <ChartBox label="Rasi" onClick={() => {}} />
          </div>
        </div>

</div>

<div>

 {/* Add Navamsam Section */}
        <div className="py-6">
          <h2 className="text-base font-semibold text-gray-800 mb-4">
            Add Navamsam
          </h2>
          
          {/* Navamsam Chart Grid */}
          <div className="grid grid-cols-4 gap-2">
            {/* Top Row - 4 boxes */}
            <ChartBox label="Navamsam" onClick={() => {}} />
            <ChartBox label="Navamsam" onClick={() => {}} />
            <ChartBox label="Navamsam" onClick={() => {}} />
            <ChartBox label="Navamsam" onClick={() => {}} />
            
            {/* Middle Row - Left box, Center image, Right box */}
            <ChartBox label="Navamsam" onClick={() => {}} />
            <div className="col-span-2 row-span-2 flex items-center justify-center">
              <div className="w-full aspect-square rounded-full overflow-hidden border-4 border-gray-200 shadow-lg">
                <img 
                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='grad2'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(240,240,240);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23grad2)'/%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M 0,-80 L 20,-20 L 80,-20 L 30,20 L 50,80 L 0,40 L -50,80 L -30,20 L -80,-20 L -20,-20 Z' fill='%23FFD700' stroke='%23FFA500' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='15' fill='%2366BB6A'/%3E%3Ctext x='0' y='5' font-size='20' text-anchor='middle' fill='white' font-family='Arial'%3E♉%3C/text%3E%3C/g%3E%3C/svg%3E"
                  alt="Navamsam Chart"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
            <ChartBox label="Navamsam" onClick={() => {}} />
            
            {/* Middle Row 2 */}
            <ChartBox label="Navamsam" onClick={() => {}} />
            <ChartBox label="Navamsam" onClick={() => {}} />
            
            {/* Bottom Row - 4 boxes */}
            <ChartBox label="Navamsam" onClick={() => {}} />
            <ChartBox label="Navamsam" onClick={() => {}} />
            <ChartBox label="Navamsam" onClick={() => {}} />
            <ChartBox label="Navamsam" onClick={() => {}} />
          </div>
        </div>
    
</div>

</div>

       

       

        {/* Working Hours Button */}
        <div className="pb-6 flex justify-center w-full my-5">
          <button
            onClick={handleGenerate}
            disabled={!dob}
            className="w-[fit-content] px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white py-4 rounded-lg font-semibold text-base transition-colors shadow-md"
          >
            Working Hours
          </button>
        </div>

        {/* Result Display */}
        {showHoroscope && userZodiacIndex >= 0 && (
          <div className="mb-6 p-4 bg-blue-50 border-2 border-blue-200 rounded-lg w-full max-w-[300px] mx-auto">
            <div className="text-center">
              <div className="text-4xl mb-2">{zodiacSigns[userZodiacIndex].emoji}</div>
              <div className="text-lg font-bold text-gray-800">
                Your Zodiac Sign: {zodiacSigns[userZodiacIndex].name}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default HoroscopeGenerator;