'use client';

import React from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import { Store, Plus, BookOpen, DollarSign, Package } from 'lucide-react';

export default function SellerDashboard() {
  const { user } = useSelector((state: RootState) => state.auth);

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-8">
      <div className="bg-gradient-to-r from-peacock-700 to-peacock-800 rounded-3xl p-8 text-white shadow-xl flex items-center justify-between">
        <div>
          <span className="text-xs uppercase tracking-widest font-bold opacity-80">Seller Portal</span>
          <h1 className="text-3xl font-extrabold mt-1">Publisher & Seller Hub</h1>
          <p className="text-xs opacity-90 mt-1">Manage catalog listings, inventory stock, and global fulfillments.</p>
        </div>
        <button className="px-5 py-3 rounded-xl bg-white text-peacock-800 font-bold text-xs shadow-lg hover:bg-zinc-100 transition-colors flex items-center gap-2">
          <Plus className="w-4 h-4" /> Add New Book
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm flex items-center gap-4">
          <div className="w-12 h-12 rounded-xl bg-peacock-50 dark:bg-peacock-950/40 text-peacock-600 flex items-center justify-center">
            <BookOpen className="w-6 h-6" />
          </div>
          <div>
            <span className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100">48</span>
            <p className="text-xs text-zinc-500 font-semibold">Active Book Listings</p>
          </div>
        </div>

        <div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm flex items-center gap-4">
          <div className="w-12 h-12 rounded-xl bg-green-50 dark:bg-green-950/40 text-green-600 flex items-center justify-center">
            <DollarSign className="w-6 h-6" />
          </div>
          <div>
            <span className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100">₹1,42,800</span>
            <p className="text-xs text-zinc-500 font-semibold">Total Revenue (30 Days)</p>
          </div>
        </div>

        <div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm flex items-center gap-4">
          <div className="w-12 h-12 rounded-xl bg-saffron-50 dark:bg-saffron-950/40 text-saffron-600 flex items-center justify-center">
            <Package className="w-6 h-6" />
          </div>
          <div>
            <span className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100">14</span>
            <p className="text-xs text-zinc-500 font-semibold">Pending Shipments</p>
          </div>
        </div>
      </div>
    </div>
  );
}