'use client';

/**
 * 메모 모달
 * - 선택한 항목 정보 표시 (N건, 총 N개소)
 * - 메모 textarea
 * - 취소/작성 버튼 (일괄 적용)
 */

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';

interface MemoModalProps {
  isOpen: boolean;
  onClose: () => void;
  selectedCount: number;
  totalLocations: number;
  onSubmit: (memo: string) => void;
}

export function MemoModal({
  isOpen,
  onClose,
  selectedCount,
  totalLocations,
  onSubmit,
}: MemoModalProps) {
  const [memo, setMemo] = useState('');

  const handleSubmit = () => {
    onSubmit(memo);
    setMemo('');
    onClose();
  };

  const handleClose = () => {
    setMemo('');
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[480px]">
        <DialogHeader>
          <DialogTitle>메모 작성</DialogTitle>
        </DialogHeader>

        <div className="space-y-4 py-2">
          {/* 선택 항목 정보 */}
          <div className="flex items-center gap-4 text-sm text-muted-foreground bg-muted/50 rounded-lg px-4 py-3">
            <span>선택: <strong className="text-foreground">{selectedCount}건</strong></span>
            <span className="text-border">|</span>
            <span>총 개소: <strong className="text-foreground">{totalLocations}개소</strong></span>
          </div>

          {/* 메모 입력 */}
          <div className="space-y-2">
            <label className="text-sm font-medium">메모</label>
            <Textarea
              placeholder="메모를 입력하세요"
              value={memo}
              onChange={(e) => setMemo(e.target.value)}
              rows={5}
              className="resize-none"
            />
            <p className="text-xs text-muted-foreground">
              선택한 {selectedCount}건에 동일한 메모가 일괄 적용됩니다.
            </p>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={handleClose}>
            취소
          </Button>
          <Button onClick={handleSubmit}>
            작성
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
