'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';
import { User } from '@/types';
import Button from '@/components/ui/Button';
import Input, { Select } from '@/components/ui/Input';

interface UserFormProps {
  initialData?: User;
  onSave: (data: Partial<User> & { password?: string }) => void;
  isSaving: boolean;
  isNew?: boolean;
}

export default function UserForm({ initialData, onSave, isSaving, isNew }: UserFormProps) {
  const [name, setName] = useState(initialData?.name ?? '');
  const [email, setEmail] = useState(initialData?.email ?? '');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState<User['role']>(initialData?.role ?? 'author');
  const [isActive, setIsActive] = useState(initialData?.isActive ?? true);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const data: Partial<User> & { password?: string } = {
      name, email, role: role as User['role'], isActive,
    };
    if (password) data.password = password;
    onSave(data);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link href="/users" className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg">
            <ArrowLeft size={18} />
          </Link>
          <h1 className="text-2xl font-bold text-gray-900">
            {initialData ? 'Edit User' : 'New User'}
          </h1>
        </div>
        <Button type="submit" isLoading={isSaving}>
          {initialData ? 'Save changes' : 'Create user'}
        </Button>
      </div>

      <div className="max-w-lg">
        <div className="bg-white rounded-xl border border-gray-200 p-5 space-y-4">
          <Input
            label="Full name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
            placeholder="John Doe"
          />
          <Input
            label="Email address"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            placeholder="john@example.com"
          />
          <Input
            label={isNew ? 'Password' : 'New password'}
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required={isNew}
            placeholder={isNew ? 'Min 6 characters' : 'Leave blank to keep current'}
            minLength={isNew ? 6 : undefined}
          />
          <Select
            label="Role"
            value={role}
            onChange={(e) => setRole(e.target.value as User['role'])}
            options={[
              { value: 'author', label: 'Author — can create/edit own news articles' },
              { value: 'editor', label: 'Editor — can manage news and services' },
              { value: 'admin', label: 'Admin — full access' },
            ]}
          />
          <div className="flex items-center gap-3 pt-1">
            <input
              type="checkbox"
              id="isActive"
              checked={isActive}
              onChange={(e) => setIsActive(e.target.checked)}
              className="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
            />
            <label htmlFor="isActive" className="text-sm font-medium text-gray-700">
              Account active
            </label>
          </div>
        </div>
      </div>
    </form>
  );
}