import React from 'react';
import { Link } from 'react-router-dom';
import { ShoppingBag, Package, MapPin, User } from 'lucide-react';
import SEOHead from '@/components/SEOHead';

export default function Dashboard() {
  const user = (window as any).woonoowCustomer?.user;

  return (
    <div>
      <SEOHead title="My Account" description="Manage your account" />
      <h1 className="text-2xl font-bold mb-6">
        Hello {user?.display_name || 'there'}!
      </h1>

      <p className="text-gray-600 mb-8">
        From your account dashboard you can view your recent orders, manage your shipping and billing addresses, and edit your password and account details.
      </p>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Link
          to="/my-account/orders"
          className="p-6 border rounded-lg hover:border-primary transition-colors group"
        >
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
              <ShoppingBag className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold">Orders</h3>
              <p className="text-sm text-gray-600">View your order history</p>
            </div>
          </div>
        </Link>

        <Link
          to="/my-account/downloads"
          className="p-6 border rounded-lg hover:border-primary transition-colors group"
        >
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
              <Package className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold">Downloads</h3>
              <p className="text-sm text-gray-600">Access your downloads</p>
            </div>
          </div>
        </Link>

        <Link
          to="/my-account/addresses"
          className="p-6 border rounded-lg hover:border-primary transition-colors group"
        >
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
              <MapPin className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold">Addresses</h3>
              <p className="text-sm text-gray-600">Manage your addresses</p>
            </div>
          </div>
        </Link>

        <Link
          to="/my-account/account-details"
          className="p-6 border rounded-lg hover:border-primary transition-colors group"
        >
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
              <User className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold">Account Details</h3>
              <p className="text-sm text-gray-600">Edit your information</p>
            </div>
          </div>
        </Link>
      </div>
    </div>
  );
}
