import React, { useState } from 'react';
import { toast } from 'sonner';
import { api } from '@/api';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

export default function AddUserCard({ onCreated }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState('');

  const handleCreate = async (e) => {
    e.preventDefault();
    setError('');

    if (password.length < 8) {
      const msg = 'Password must be at least 8 characters.';
      setError(msg);
      toast.error(msg);
      return;
    }

    setLoading(true);
    try {
      await api.createUser({ username, password });
      toast.success(`User "${username}" created.`);
      setUsername('');
      setPassword('');
      setError('');
      onCreated();
    } catch (err) {
      const errorMessage = err.message || 'Failed to create user.';
      setError(errorMessage);
      toast.error(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card>
      <CardHeader className="pb-4">
        <CardTitle>Add User</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleCreate} className="flex flex-col gap-3 lg:flex-row lg:items-end">
          <div className="space-y-1.5 flex-1">
            <Label htmlFor="new-uname">Username</Label>
            <Input id="new-uname" value={username} onChange={e => setUsername(e.target.value)} placeholder="username" required />
          </div>
          <div className="space-y-1.5 flex-1">
            <Label htmlFor="new-upw">Password</Label>
            <Input id="new-upw" type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" required />
          </div>
          <div className="lg:flex-1" />
          {error && (
            <div className="w-full lg:w-auto rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm text-destructive lg:col-start-1 lg:col-span-3">
              {error}
            </div>
          )}
          <Button type="submit" disabled={loading} className="shrink-0" aria-busy={loading}>
            {loading ? 'Creating…' : 'Create User'}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}