'use client';

import { Header } from '@/components/ui/Header';
import { Footer } from '@/components/ui/Footer';
import { WalletCard } from '@/components/ui/WalletCard';
import Link from 'next/link';
import { useState, useEffect } from 'react';
import type { Wallet } from '@/types';

// Mock wallet data
const mockWallet: Wallet = {
  id: 1,
  userId: 1,
  depositBalance: '500.00',
  winningBalance: '2500.00',
  withdrawLockedBalance: '300.00',
  createdAt: new Date(),
  updatedAt: new Date(),
};

const dashboardStats = [
  { label: 'সক্রিয় ম্যাচ', value: 3, icon: '⚡' },
  { label: 'মোট যোগদান', value: 28, icon: '🎯' },
  { label: 'জয়ী ম্যাচ', value: 12, icon: '🏆' },
  { label: 'পুরস্কৃত', value: '৳ ৪,২০০', icon: '💰' },
];

export default function DashboardPage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    // Check if user is logged in
    const userStr = localStorage.getItem('user');
    if (userStr) {
      try {
        const userData = JSON.parse(userStr);
        setUser(userData);
        setIsLoggedIn(true);
      } catch (e) {
        setIsLoggedIn(false);
      }
    } else {
      setIsLoggedIn(false);
    }
  }, []);

  if (!isLoggedIn) {
    return (
      <div className="flex flex-col min-h-screen">
        <Header appName="Gaming Tournament" />
        <main className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <h1 className="text-3xl font-bold mb-4">অ্যাক্সেস প্রয়োজন</h1>
            <p className="text-slate-400 mb-6">দয়া করে ড্যাশবোর্ড অ্যাক্সেস করতে লগইন করুন।</p>
            <Link href="/login" className="btn btn-primary">
              লগইন করুন
            </Link>
          </div>
        </main>
        <Footer appName="Gaming Tournament" />
      </div>
    );
  }

  return (
    <div className="flex flex-col min-h-screen">
      <Header appName="Gaming Tournament" isLoggedIn={true} />

      <main className="flex-1 py-12">
        <div className="container-max">
          {/* Welcome Section */}
          <div className="mb-12">
            <h1 className="text-4xl font-bold mb-2">স্বাগতম, {user?.fullName}!</h1>
            <p className="text-slate-400">আপনার গেমিং ড্যাশবোর্ডে আপনার স্বাগতম</p>
          </div>

          {/* Layout Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Left Column - Wallet and Main Actions */}
            <div className="lg:col-span-2 space-y-8">
              {/* Wallet Card */}
              <div>
                <h2 className="text-2xl font-bold mb-4">আপনার ওয়ালেট</h2>
                <WalletCard wallet={mockWallet} />
              </div>

              {/* Quick Actions */}
              <div>
                <h2 className="text-2xl font-bold mb-4">দ্রুত অ্যাক্সেস</h2>
                <div className="grid grid-cols-2 gap-4">
                  <Link href="/dashboard/deposit">
                    <div className="card hover:shadow-glow cursor-pointer text-center py-6">
                      <div className="text-4xl mb-2">💳</div>
                      <h3 className="font-semibold">ডিপোজিট</h3>
                      <p className="text-xs text-slate-400 mt-1">টাকা যোগ করুন</p>
                    </div>
                  </Link>
                  <Link href="/dashboard/withdraw">
                    <div className="card hover:shadow-glow cursor-pointer text-center py-6">
                      <div className="text-4xl mb-2">💸</div>
                      <h3 className="font-semibold">উইথড্রও</h3>
                      <p className="text-xs text-slate-400 mt-1">জয়ের টাকা তুলুন</p>
                    </div>
                  </Link>
                  <Link href="/dashboard/matches">
                    <div className="card hover:shadow-glow cursor-pointer text-center py-6">
                      <div className="text-4xl mb-2">🎮</div>
                      <h3 className="font-semibold">আমার ম্যাচ</h3>
                      <p className="text-xs text-slate-400 mt-1">যোগদান করা ম্যাচ</p>
                    </div>
                  </Link>
                  <Link href="/dashboard/profile">
                    <div className="card hover:shadow-glow cursor-pointer text-center py-6">
                      <div className="text-4xl mb-2">👤</div>
                      <h3 className="font-semibold">প্রোফাইল</h3>
                      <p className="text-xs text-slate-400 mt-1">আপনার তথ্য সম্পাদন করুন</p>
                    </div>
                  </Link>
                </div>
              </div>

              {/* Statistics */}
              <div>
                <h2 className="text-2xl font-bold mb-4">আপনার পরিসংখ্যান</h2>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {dashboardStats.map((stat, index) => (
                    <div key={index} className="card text-center py-6">
                      <div className="text-3xl mb-2">{stat.icon}</div>
                      <p className="text-slate-400 text-xs mb-1">{stat.label}</p>
                      <p className="text-2xl font-bold">{stat.value}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Right Column - Sidebar */}
            <div className="space-y-6">
              {/* Profile Card */}
              <div className="card-featured">
                <h3 className="font-bold mb-4">প্রোফাইল তথ্য</h3>
                <div className="space-y-3 text-sm">
                  <div className="flex justify-between">
                    <span className="text-slate-400">নাম:</span>
                    <span className="font-semibold">{user?.fullName}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-slate-400">ইউজারনেম:</span>
                    <span className="font-semibold">@{user?.username}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-slate-400">ফোন:</span>
                    <span className="font-semibold">{user?.phone}</span>
                  </div>
                  <Link href="/dashboard/profile" className="btn btn-secondary w-full mt-4 text-center">
                    প্রোফাইল সম্পাদন করুন
                  </Link>
                </div>
              </div>

              {/* Recent Activity */}
              <div className="card">
                <h3 className="font-bold mb-4">সাম্প্রতিক কার্যকলাপ</h3>
                <div className="space-y-3 text-sm">
                  <div className="flex justify-between items-center pb-3 border-b border-slate-800">
                    <div>
                      <p className="font-semibold">টুর্নামেন্টে যোগদান</p>
                      <p className="text-xs text-slate-400">স্কোয়াড ম্যাচ #001</p>
                    </div>
                    <span className="text-slate-400 text-xs">আজ</span>
                  </div>
                  <div className="flex justify-between items-center pb-3 border-b border-slate-800">
                    <div>
                      <p className="font-semibold">পুরস্কার প্রাপ্ত</p>
                      <p className="text-xs text-slate-400">২য় স্থান</p>
                    </div>
                    <span className="text-slate-400 text-xs">গতকাল</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <div>
                      <p className="font-semibold">ডিপোজিট অনুমোদিত</p>
                      <p className="text-xs text-slate-400">৳ ৫০০</p>
                    </div>
                    <span className="text-slate-400 text-xs">২ দিন আগে</span>
                  </div>
                </div>
                <Link href="/dashboard/activity" className="btn btn-secondary w-full mt-4 text-center text-sm">
                  সব দেখুন
                </Link>
              </div>

              {/* Support */}
              <div className="bg-orange-500/10 border border-orange-500/30 rounded-lg p-4">
                <p className="font-semibold mb-3 flex items-center gap-2">
                  <span>❓</span> সাহায্য প্রয়োজন?
                </p>
                <p className="text-sm text-slate-300 mb-3">
                  যদি কোনো সমস্যা হয়, আমাদের সাপোর্ট টিম সর্বদা সাহায্য করতে প্রস্তুত।
                </p>
                <Link href="/support" className="btn btn-secondary w-full text-center text-sm">
                  সাপোর্ট যোগাযোগ করুন
                </Link>
              </div>
            </div>
          </div>
        </div>
      </main>

      <Footer appName="Gaming Tournament" />
    </div>
  );
}