// /media/hf/data/projects/Dawinder/transport/app/(auth)/login/page.tsx
"use client";

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/context/AuthContext';
import { Truck } from 'lucide-react';

export default function LoginPage() {
  const router = useRouter();
  const { setRole } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    // Simplified auth for demo
    if (email.includes('staff')) {
      setRole('admin_staff');
    } else {
      setRole('transport_admin');
    }
    router.push('/dashboard');
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4 relative overflow-hidden">
      {/* Background decoration */}
      <div className="absolute inset-0 z-0 opacity-20 pointer-events-none" style={{
        backgroundImage: 'radial-gradient(circle at 50% 50%, var(--primary) 0%, transparent 50%)',
        opacity: 0.05
      }}></div>

      <div className="w-full max-w-md bg-surface border border-border rounded-2xl shadow-2xl p-8 z-10 relative">
        <div className="flex flex-col items-center mb-8">
          <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4 border border-primary/20">
            <Truck className="w-8 h-8 text-primary" />
          </div>
          <h1 className="text-2xl font-bold text-text-primary">Logistics Manager</h1>
          <p className="text-text-muted mt-2 text-center text-sm">Sign in to manage your fleet, trips, and expenses efficiently.</p>
        </div>

        <form onSubmit={handleLogin} className="space-y-5">
          <div>
            <label className="block text-sm font-medium text-text-muted mb-1.5">Email address</label>
            <input 
              type="email" 
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full px-4 py-3 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
              placeholder="admin@logistics.com"
            />
          </div>
          
          <div>
            <div className="flex justify-between items-center mb-1.5">
              <label className="block text-sm font-medium text-text-muted">Password</label>
              <a href="#" className="text-xs text-primary hover:underline">Forgot password?</a>
            </div>
            <input 
              type="password" 
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-4 py-3 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
              placeholder="••••••••"
            />
          </div>

          <button 
            type="submit" 
            className="w-full py-3 bg-primary text-background font-bold rounded-lg hover:bg-primary/90 transition-colors mt-6"
          >
            Sign In
          </button>
        </form>

        <div className="mt-8 pt-6 border-t border-border text-center">
          <p className="text-xs text-text-hint mb-3">Demo Credentials:</p>
          <div className="flex justify-center space-x-4">
            <button 
              onClick={() => { setEmail('admin@demo.com'); setPassword('password'); }}
              className="px-3 py-1.5 bg-background border border-border rounded text-xs text-text-primary hover:border-primary transition-colors"
            >
              Fill Admin
            </button>
            <button 
              onClick={() => { setEmail('staff@demo.com'); setPassword('password'); }}
              className="px-3 py-1.5 bg-background border border-border rounded text-xs text-text-primary hover:border-primary transition-colors"
            >
              Fill Staff
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}