'use client'

import { useState, useEffect } from 'react'
import { Users, FileText, BarChart3, Upload, Search, Settings, ChevronRight, Heart } from 'lucide-react'
import { getAdminStats, type AdminStats } from '@/lib/admin-stats'

export default function Home() {
  const [selectedTab, setSelectedTab] = useState('overview')
  const [stats, setStats] = useState<AdminStats>({
    registeredUsers: 0,
    profiles: 0,
    premiumUsers: 0,
    weeklyPrompts: 0,
    quarterlyQuestions: 0
  })
  const [loading, setLoading] = useState(true)

  const tabs = [
    { id: 'overview', label: 'Overview', icon: BarChart3 },
    { id: 'users', label: 'Users', icon: Users },
    { id: 'content', label: 'Content', icon: FileText },
    { id: 'settings', label: 'Settings', icon: Settings }
  ]

  useEffect(() => {
    async function fetchStats() {
      try {
        const data = await getAdminStats()
        setStats(data)
      } catch (error) {
        console.error('Failed to fetch admin stats:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchStats()
  }, [])

  return (
    <div className="w-full pl-[20%] pr-[20%] pt-[10%] box-border">
      {/* Header */}
      <div className="text-center py-4 mb-6">
        <div className="flex items-center justify-center gap-2 mb-2">
          <Heart className="h-6 w-6 text-primary" />
          <h1 className="text-xl font-bold text-foreground">Storify Admin</h1>
        </div>
        <p className="text-sm text-muted-foreground">
          Manage users, content, and analytics
        </p>
      </div>

      {/* Navigation Tabs */}
      <div className="max-w-md mx-auto mb-6 px-4">
        <div className="flex bg-white border border-gray-300 rounded-2xl shadow-md overflow-hidden">
          {tabs.map((tab) => {
            const Icon = tab.icon
            return (
              <button
                key={tab.id}
                onClick={() => setSelectedTab(tab.id)}
                className={`flex-1 flex flex-col items-center py-3 px-2 transition-all duration-200 ${
                  selectedTab === tab.id
                    ? 'bg-primary-soft text-primary'
                    : 'text-muted-foreground hover:bg-gray-50'
                }`}
              >
                <Icon className="h-5 w-5 mb-1" />
                <span className="text-xs font-medium">{tab.label}</span>
              </button>
            )
          })}
        </div>
      </div>

      {/* Content Area */}
      <div className="max-w-md mx-auto px-4">

        {selectedTab === 'overview' && (
          <div className="space-y-4">
            {/* Stats Cards */}
            <div className="grid grid-cols-2 gap-4 mb-6">
              <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
                <div className="text-2xl font-bold text-primary mb-1">
                  {loading ? '...' : stats.registeredUsers.toLocaleString()}
                </div>
                <div className="text-sm text-muted-foreground">Registered Users</div>
              </div>
              <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
                <div className="text-2xl font-bold text-accent-foreground mb-1">
                  {loading ? '...' : stats.premiumUsers.toLocaleString()}
                </div>
                <div className="text-sm text-muted-foreground">Premium</div>
              </div>
              <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
                <div className="text-2xl font-bold text-teal-foreground mb-1">
                  {loading ? '...' : stats.weeklyPrompts.toLocaleString()}
                </div>
                <div className="text-sm text-muted-foreground">Prompts</div>
              </div>
              <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
                <div className="text-2xl font-bold text-secondary-foreground mb-1">
                  {loading ? '...' : stats.quarterlyQuestions.toLocaleString()}
                </div>
                <div className="text-sm text-muted-foreground">Questions</div>
              </div>
            </div>

            {/* Quick Actions */}
            <div className="space-y-3">
              <button className="w-full bg-white border border-gray-300 rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer p-4 flex items-center gap-4"
                      onClick={() => setSelectedTab('users')}>
                <div className="w-10 h-10 rounded-full bg-primary-soft flex items-center justify-center">
                  <Users className="h-5 w-5 text-primary" />
                </div>
                <div className="flex-1 text-left">
                  <div className="font-semibold text-foreground">Manage Users</div>
                  <div className="text-sm text-muted-foreground">Search, edit, reset passwords</div>
                </div>
                <ChevronRight className="h-5 w-5 text-gray-400" />
              </button>

              <button className="w-full bg-white border border-gray-300 rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer p-4 flex items-center gap-4"
                      onClick={() => setSelectedTab('content')}>
                <div className="w-10 h-10 rounded-full bg-accent-soft flex items-center justify-center">
                  <Upload className="h-5 w-5 text-accent-foreground" />
                </div>
                <div className="flex-1 text-left">
                  <div className="font-semibold text-foreground">Upload Content</div>
                  <div className="text-sm text-muted-foreground">CSV files for prompts & questions</div>
                </div>
                <ChevronRight className="h-5 w-5 text-gray-400" />
              </button>

              <button className="w-full bg-white border border-gray-300 rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer p-4 flex items-center gap-4">
                <div className="w-10 h-10 rounded-full bg-teal flex items-center justify-center">
                  <BarChart3 className="h-5 w-5 text-teal-foreground" />
                </div>
                <div className="flex-1 text-left">
                  <div className="font-semibold text-foreground">View Analytics</div>
                  <div className="text-sm text-muted-foreground">User behavior & performance</div>
                </div>
                <ChevronRight className="h-5 w-5 text-gray-400" />
              </button>
            </div>

            {/* Recent Activity */}
            <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
              <h3 className="font-semibold text-foreground mb-3">Recent Activity</h3>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">New user registered</span>
                  <span className="text-foreground">2 min ago</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Prompts uploaded</span>
                  <span className="text-foreground">1 hour ago</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Password reset</span>
                  <span className="text-foreground">3 hours ago</span>
                </div>
              </div>
            </div>
          </div>
        )}

        {selectedTab === 'users' && (
          <div className="space-y-4">
            {/* Search */}
            <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
              <div className="flex gap-3">
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                  <input
                    type="text"
                    placeholder="Search users..."
                    className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
                  />
                </div>
                <button className="bg-primary text-white px-4 py-2 rounded-xl hover:bg-primary-hover transition-colors font-medium">
                  Search
                </button>
              </div>
            </div>

            {/* User Actions */}
            <div className="space-y-3">
              <button className="w-full bg-white border border-gray-300 rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer p-4 flex items-center gap-4"
                      onClick={() => console.log('Bulk User Actions clicked')}>
                <div className="w-10 h-10 rounded-full bg-primary-soft flex items-center justify-center">
                  <Users className="h-5 w-5 text-primary" />
                </div>
                <div className="flex-1 text-left">
                  <div className="font-semibold text-foreground">Bulk User Actions</div>
                  <div className="text-sm text-muted-foreground">Reset passwords, manage subscriptions</div>
                </div>
                <ChevronRight className="h-5 w-5 text-gray-400" />
              </button>

              <button className="w-full bg-white border border-gray-300 rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer p-4 flex items-center gap-4">
                <div className="w-10 h-10 rounded-full bg-accent-soft flex items-center justify-center">
                  <Settings className="h-5 w-5 text-accent-foreground" />
                </div>
                <div className="flex-1 text-left">
                  <div className="font-semibold text-foreground">User Permissions</div>
                  <div className="text-sm text-muted-foreground">Admin roles & access control</div>
                </div>
                <ChevronRight className="h-5 w-5 text-gray-400" />
              </button>
            </div>
          </div>
        )}

        {selectedTab === 'content' && (
          <div className="space-y-4">
            {/* Content Upload Cards */}
            <div className="space-y-3">
              <div className="bg-white border border-gray-300 rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer p-4"
                    style={{ backgroundColor: '#F7E8E4' }}>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: '#FADADD' }}>
                    <Heart className="h-6 w-6 text-pink-500" />
                  </div>
                  <div className="flex-1">
                    <div className="font-semibold text-foreground mb-1">Weekly Prompts</div>
                    <div className="text-sm text-muted-foreground">Upload CSV file with new conversation topics</div>
                  </div>
                  <ChevronRight className="h-5 w-5 text-gray-400" />
                </div>
              </div>

              <div className="bg-white border border-gray-300 rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer p-4"
                    style={{ backgroundColor: '#E7ECFF' }}>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: '#C5D5FF' }}>
                    <FileText className="h-6 w-6 text-blue-600" />
                  </div>
                  <div className="flex-1">
                    <div className="font-semibold text-foreground mb-1">Quarterly Questions</div>
                    <div className="text-sm text-muted-foreground">Upload reflection questions for quarterly reviews</div>
                  </div>
                  <ChevronRight className="h-5 w-5 text-gray-400" />
                </div>
              </div>

              <div className="bg-white border border-gray-300 rounded-2xl shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer p-4"
                    style={{ backgroundColor: '#F7EDE2' }}>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: '#F5D5A8' }}>
                    <Settings className="h-6 w-6 text-amber-700" />
                  </div>
                  <div className="flex-1">
                    <div className="font-semibold text-foreground mb-1">Age Categories</div>
                    <div className="text-sm text-muted-foreground">Add or modify child age groups</div>
                  </div>
                  <ChevronRight className="h-5 w-5 text-gray-400" />
                </div>
              </div>
            </div>

            {/* Upload Form */}
            <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
              <h3 className="font-semibold text-foreground mb-4">Quick Upload</h3>
              <div className="space-y-3">
                <input
                  type="file"
                  accept=".csv"
                  className="w-full px-3 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
                />
                <button className="w-full bg-primary text-white px-4 py-2 rounded-xl hover:bg-primary-hover transition-colors font-medium">
                  Upload & Process
                </button>
              </div>
            </div>
          </div>
        )}

        {selectedTab === 'settings' && (
          <div className="space-y-4">
            <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
              <h3 className="font-semibold text-foreground mb-4">System Settings</h3>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-foreground">Email Notifications</span>
                  <button className="w-12 h-6 bg-primary rounded-full relative">
                    <div className="w-5 h-5 bg-white rounded-full absolute top-0.5 right-0.5"></div>
                  </button>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-foreground">Auto-backup</span>
                  <button className="w-12 h-6 bg-gray-300 rounded-full relative">
                    <div className="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5"></div>
                  </button>
                </div>
              </div>
            </div>

            <div className="bg-white border border-gray-300 rounded-2xl shadow-md p-4">
              <h3 className="font-semibold text-foreground mb-4">Database</h3>
              <div className="space-y-3">
                <button className="w-full bg-accent text-accent-foreground px-4 py-2 rounded-xl hover:bg-accent-hover transition-colors font-medium">
                  Export Data
                </button>
                <button className="w-full bg-destructive text-destructive-foreground px-4 py-2 rounded-xl hover:bg-destructive/90 transition-colors font-medium">
                  Clear Cache
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}