import { useState } from "react";
import { createClient } from "../api/clients";
import { useTranslation } from "../hooks/useTranslation";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Modal } from "./Modal";
import { TextAreaInput } from "./ui/TextAreaInput";

interface CreateClientModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  workspaceId: string;
}

export default function CreateClientModal({ isOpen, onClose, onSuccess, workspaceId }: CreateClientModalProps) {
  const { t } = useTranslation();
  const [name, setName] = useState("");
  const [notes, setNotes] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async () => {
    if (!name.trim()) return;
    setIsLoading(true);
    try {
      await createClient(workspaceId, { name, notes });
      onSuccess();
      setName("");
      setNotes("");
      onClose();
    } catch (error) {
      console.error(t.clients.errors.createFailed, error);
    } finally {
      setIsLoading(false);
    }
  };

  const footer = (
    <>
      <Button variant="outline" onClick={onClose} disabled={isLoading}>
        {t.actions?.cancel}
      </Button>
      <Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
        {isLoading ? "..." : t.clients.create}
      </Button>
    </>
  );

  return (
    <Modal isOpen={isOpen} onClose={onClose} title={t.clients.modalTitle} footer={footer}>
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
            {t.clients.clientName}
          </label>
          <Input 
            value={name} 
            onChange={(e) => setName(e.target.value)} 
            placeholder={t.clients.clientNamePlaceholder}
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
            {t.clients.notes}
          </label>
          <TextAreaInput
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            placeholder={t.clients.notesPlaceholder}
          />
        </div>
      </div>
    </Modal>
  );
}