'use client';

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { UserRole } from './types';
import { USER_ROLE_LABELS } from './types';

interface UserInviteDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onInvite: (data: { email: string; role: UserRole; message?: string }) => void;
}

export function UserInviteDialog({ open, onOpenChange, onInvite }: UserInviteDialogProps) {
  const [email, setEmail] = useState('');
  const [role, setRole] = useState<UserRole>('user');
  const [message, setMessage] = useState('');

  const handleSubmit = () => {
    if (!email) return;
    onInvite({ email, role, message: message || undefined });
    // Reset form
    setEmail('');
    setRole('user');
    setMessage('');
  };

  const handleCancel = () => {
    setEmail('');
    setRole('user');
    setMessage('');
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>사용자 초대</DialogTitle>
        </DialogHeader>

        <div className="space-y-4 py-4">
          {/* 이메일 주소 */}
          <div className="space-y-2">
            <Label htmlFor="invite-email">이메일 주소</Label>
            <Input
              id="invite-email"
              type="email"
              placeholder="이메일"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>

          {/* 권한 */}
          <div className="space-y-2">
            <Label htmlFor="invite-role">권한</Label>
            <Select value={role} onValueChange={(value) => setRole(value as UserRole)}>
              <SelectTrigger id="invite-role">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="admin">{USER_ROLE_LABELS.admin}</SelectItem>
                <SelectItem value="manager">{USER_ROLE_LABELS.manager}</SelectItem>
                <SelectItem value="user">{USER_ROLE_LABELS.user}</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* 초대 메시지 (선택) */}
          <div className="space-y-2">
            <Label htmlFor="invite-message">초대 메시지 (선택)</Label>
            <Textarea
              id="invite-message"
              placeholder="초대 메시지를 입력해주세요."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={4}
            />
          </div>
        </div>

        {/* 버튼 */}
        <div className="flex justify-end gap-2">
          <Button variant="outline" onClick={handleCancel}>
            취소
          </Button>
          <Button
            onClick={handleSubmit}
            disabled={!email}
            className="bg-black hover:bg-black/90 text-white"
          >
            초대
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}