'use client'
import { useState, useEffect } from 'react'
import Scanner from '@/components/Scanner'
import WhatToPlant from '@/components/WhatToPlant'
import FarmChat from '@/components/FarmChat'
import WeatherWidget from '@/components/WeatherWidget'

type Tab = 'scanner' | 'plant' | 'chat' | 'weather'

const tabs = [
  {
    id: 'scanner' as Tab,
    label: 'Scan',
    icon: (active: boolean) => (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <rect x="3" y="3" width="5" height="5" rx="1" stroke={active ? '#3d9636' : '#9ca3af'} strokeWidth="2"/>
        <rect x="16" y="3" width="5" height="5" rx="1" stroke={active ? '#3d9636' : '#9ca3af'} strokeWidth="2"/>
        <rect x="3" y="16" width="5" height="5" rx="1" stroke={active ? '#3d9636' : '#9ca3af'} strokeWidth="2"/>
        <path d="M16 16h2v2h-2zM20 16h1v1h-1zM16 20h1v1h-1zM18 18h3v3h-1v-2h-2z" fill={active ? '#3d9636' : '#9ca3af'}/>
        <path d="M11 3v4M3 11h4M11 21v-4M21 11h-4" stroke={active ? '#3d9636' : '#9ca3af'} strokeWidth="1.5" strokeLinecap="round"/>
      </svg>
    )
  },
  {
    id: 'plant' as Tab,
    label: 'Plant',
    icon: (active: boolean) => (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M12 22V12" stroke={active ? '#3d9636' : '#9ca3af'} strokeWidth="2" strokeLinecap="round"/>
        <path d="M12 12C12 12 7 10 5 6C8 4 12 6 12 12Z" fill={active ? '#3d9636' : '#9ca3af'} opacity="0.9"/>
        <path d="M12 12C12 12 17 10 19 6C16 4 12 6 12 12Z" fill={active ? '#3d9636' : '#9ca3af'} opacity="0.6"/>
        <path d="M12 16C12 16 8 15 6 18C9 20 12 18 12 16Z" fill={active ? '#3d9636' : '#9ca3af'} opacity="0.8"/>
        <circle cx="12" cy="22" r="1" fill={active ? '#3d9636' : '#9ca3af'}/>
      </svg>
    )
  },
  {
    id: 'chat' as Tab,
    label: 'Ask AI',
    icon: (active: boolean) => (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke={active ? '#3d9636' : '#9ca3af'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M8 10h8M8 14h5" stroke={active ? '#3d9636' : '#9ca3af'} strokeWidth="1.5" strokeLinecap="round"/>
      </svg>
    )
  },
  {
    id: 'weather' as Tab,
    label: 'Weather',
    icon: (active: boolean) => (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z" stroke={active ? '#3d9636' : '#9ca3af'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    )
  },
]

export default function Home() {
  const [activeTab, setActiveTab] = useState<Tab>('scanner')
  const [isOnline, setIsOnline] = useState(true)

  useEffect(() => {
    setIsOnline(navigator.onLine)
    const handleOnline = () => setIsOnline(true)
    const handleOffline = () => setIsOnline(false)
    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)
    return () => {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [])

  return (
    <div className="min-h-screen bg-[#fdf8f0] flex flex-col max-w-md mx-auto relative">
      {/* Offline banner */}
      {!isOnline && (
        <div className="offline-banner">
          ⚠️ You're offline. Reconnect to use AI features.
        </div>
      )}

      {/* Header */}
      <header className="sticky top-0 z-40 bg-[#fdf8f0]/95 backdrop-blur-sm border-b border-leaf-100 px-5 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-leaf-600 flex items-center justify-center">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M12 22V10" stroke="white" strokeWidth="2.5" strokeLinecap="round"/>
                <path d="M12 10C12 10 6 8 4 3C8 1 12 5 12 10Z" fill="white"/>
                <path d="M12 10C12 10 18 8 20 3C16 1 12 5 12 10Z" fill="white" opacity="0.7"/>
                <path d="M12 15C12 15 7 14 5 18C8.5 20.5 12 18 12 15Z" fill="white" opacity="0.85"/>
              </svg>
            </div>
            <div>
              <h1 className="font-display font-700 text-[17px] text-soil-900 leading-tight">Shamba AI</h1>
              <p className="text-[10px] text-leaf-600 font-medium leading-tight">Smart Farming Assistant</p>
            </div>
          </div>
          <div className="flex items-center gap-1.5">
            <div className={`w-2 h-2 rounded-full ${isOnline ? 'bg-leaf-500' : 'bg-amber-500'}`}/>
            <span className="text-[11px] text-soil-500">{isOnline ? 'Online' : 'Offline'}</span>
          </div>
        </div>
      </header>

      {/* Tab Content */}
      <main className="flex-1 overflow-y-auto pb-24">
        {activeTab === 'scanner' && <Scanner />}
        {activeTab === 'plant' && <WhatToPlant />}
        {activeTab === 'chat' && <FarmChat />}
        {activeTab === 'weather' && <WeatherWidget />}
      </main>

      {/* Bottom Navigation */}
      <nav className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-md bg-white border-t border-gray-100 bottom-nav z-50 shadow-lg">
        <div className="flex">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex-1 flex flex-col items-center gap-1 py-3 px-2 transition-all duration-200 ${
                activeTab === tab.id ? 'text-leaf-600' : 'text-gray-400'
              }`}
            >
              {tab.icon(activeTab === tab.id)}
              <span className={`text-[10px] font-semibold ${activeTab === tab.id ? 'text-leaf-600' : 'text-gray-400'}`}>
                {tab.label}
              </span>
              {activeTab === tab.id && (
                <div className="absolute bottom-0 w-8 h-0.5 bg-leaf-500 rounded-full" style={{marginBottom: 0}}/>
              )}
            </button>
          ))}
        </div>
      </nav>
    </div>
  )
}