import { useAuth } from "@/contexts/AuthContext";
import { Navigate, Link } from "react-router-dom";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Wallet,
  Clock,
  ShoppingCart,
  CheckCircle2,
  RefreshCw,
  LogOut,
  Settings,
  User,
  History,
} from "lucide-react";

const Dashboard = () => {
  const { user, logout, isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/my-account" replace />;
  }

  const stats = [
    { label: "Total Orders", value: "0", icon: ShoppingCart, color: "text-primary" },
    { label: "Pending", value: "0", icon: Clock, color: "text-yellow-500" },
    { label: "Completed", value: "0", icon: CheckCircle2, color: "text-emerald-500" },
    { label: "Total Volume", value: "₵0", icon: RefreshCw, color: "text-primary" },
  ];

  return (
    <div className="min-h-screen bg-muted/50">
      {/* Dashboard Navbar */}
      <nav className="bg-card border-b border-border sticky top-0 z-50">
        <div className="container mx-auto flex items-center justify-between h-14 px-4">
          <Link to="/" className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
              <span className="text-primary-foreground font-bold text-sm">¥</span>
            </div>
            <div>
              <span className="font-bold text-foreground text-lg tracking-tight">BUY RMB</span>
              <span className="block text-[9px] text-muted-foreground tracking-[0.2em] uppercase -mt-1">
                Fast.Safe.Reliable
              </span>
            </div>
          </Link>

          <div className="flex items-center gap-4">
            <div className="hidden sm:flex items-center gap-1.5 text-sm text-muted-foreground">
              <User className="w-4 h-4" />
              {user?.name}
            </div>
            <Button variant="ghost" size="sm" className="gap-1.5 text-muted-foreground">
              <Settings className="w-4 h-4" />
              <span className="hidden sm:inline">Account</span>
            </Button>
            <Button
              variant="destructive"
              size="sm"
              className="gap-1.5"
              onClick={logout}
            >
              <LogOut className="w-4 h-4" />
              Sign Out
            </Button>
          </div>
        </div>
      </nav>

      <div className="container mx-auto px-4 py-8 space-y-6">
        {/* Wallet Balance */}
        <Card className="border-border/50">
          <CardContent className="p-6">
            <div className="flex items-center gap-3 mb-1">
              <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
                <Wallet className="w-5 h-5 text-muted-foreground" />
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Wallet Balance</p>
                <p className="text-3xl font-bold text-foreground">₵0.00</p>
              </div>
            </div>

            <div className="flex items-center gap-3 mt-4">
              <Button variant="outline" className="flex-1 gap-2">
                <Clock className="w-4 h-4" />
                Withdraw
              </Button>
              <Button variant="ghost" size="sm" className="gap-2 text-muted-foreground">
                <History className="w-4 h-4" />
                History
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Stats Grid */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {stats.map((stat) => (
            <Card key={stat.label} className="border-border/50">
              <CardContent className="p-5">
                <div className="flex items-start gap-3">
                  <div className="w-9 h-9 rounded-full bg-muted flex items-center justify-center mt-0.5">
                    <stat.icon className={`w-4 h-4 ${stat.color}`} />
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">{stat.label}</p>
                    <p className="text-2xl font-bold text-foreground">{stat.value}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Recent Orders */}
        <Card className="border-border/50">
          <CardContent className="p-6">
            <h2 className="text-xl font-bold text-foreground">Recent Orders</h2>
            <p className="text-sm text-muted-foreground mb-8">Your currency exchange history</p>

            <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
              <ShoppingCart className="w-16 h-16 mb-4 opacity-30" />
              <p className="text-lg font-medium">No orders yet</p>
              <p className="text-sm mt-1">Your exchange orders will appear here</p>
              <Button className="mt-6" asChild>
                <Link to="/exchange">Start Exchanging</Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default Dashboard;