'use client';

import { useState, useEffect, FormEvent } from 'react';
import { X, FolderPlus, Loader2 } from 'lucide-react';
import type { Folder } from '@/lib/types';

interface Props {
  parentId?:     number | null;
  editFolder?:   Folder | null;
  onClose:       () => void;
  onSaved:       () => void;
}

export default function CreateFolderModal({ parentId, editFolder, onClose, onSaved }: Props) {
  const [name,    setName]    = useState('');
  const [loading, setLoading] = useState(false);
  const [error,   setError]   = useState('');

  useEffect(() => {
    if (editFolder) setName(editFolder.name);
  }, [editFolder]);

  async function submit(e: FormEvent) {
    e.preventDefault();
    if (!name.trim()) return;
    setLoading(true);
    setError('');

    try {
      let res: Response;
      if (editFolder) {
        res = await fetch(`/api/folders/${editFolder.id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name: name.trim() }),
        });
      } else {
        res = await fetch('/api/folders', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name: name.trim(), parentId: parentId ?? null }),
        });
      }

      if (!res.ok) {
        const json = await res.json();
        throw new Error(json.error ?? 'Failed');
      }
      onSaved();
      onClose();
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Something went wrong');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40">
      <div className="card w-full max-w-sm animate-in fade-in zoom-in-95">
        <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4">
          <h2 className="font-semibold text-slate-800">
            {editFolder ? 'Rename Folder' : 'New Folder'}
          </h2>
          <button onClick={onClose} className="rounded-lg p-1.5 hover:bg-slate-100">
            <X className="h-4 w-4" />
          </button>
        </div>

        <form onSubmit={submit} className="p-5 space-y-4">
          {error && (
            <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600 border border-red-100">
              {error}
            </p>
          )}
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-700">Folder name</label>
            <input
              autoFocus
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="input"
              placeholder="e.g. Contracts 2024"
              maxLength={255}
            />
          </div>
          <div className="flex justify-end gap-2">
            <button type="button" onClick={onClose} className="btn-secondary">Cancel</button>
            <button type="submit" disabled={!name.trim() || loading} className="btn-primary">
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <FolderPlus className="h-4 w-4" />}
              {editFolder ? 'Save' : 'Create'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}