tasteby/frontend/src/components/MemoSection.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import { api } from "@/lib/api";
import type { Memo } from "@/lib/api";
import { useAuth } from "@/lib/auth-context";
import Icon from "@/components/Icon";
import Stars from "@/components/Stars";

interface MemoSectionProps {
  restaurantId: string;
}

// #281 — ReviewSection의 StarSelector와 동일 UX (0.5 단위 + 44px 터치 + ARIA radiogroup)
function StarSelector({
  value,
  onChange,
}: {
  value: number;
  onChange: (v: number) => void;
}) {
  return (
    <div role="radiogroup" aria-label="별점 선택" className="flex items-center gap-0.5">
      <span className="text-xs text-gray-500 mr-1">별점:</span>
      {[1, 2, 3, 4, 5].map((v) => {
        const nextVal = value === v ? v - 0.5 : v;
        return (
          <button
            key={v}
            type="button"
            role="radio"
            aria-checked={value >= v - 0.5 && value <= v}
            aria-label={`${nextVal}점`}
            onClick={() => onChange(nextVal)}
            className="min-w-[44px] min-h-[44px] flex items-center justify-center touch-manipulation"
            title={`${nextVal}점`}
          >
            <span className={`text-xl ${v <= value ? "text-yellow-500" : v - 0.5 === value ? "text-yellow-400" : "text-gray-300"}`}>
              {v <= value ? "★" : v - 0.5 === value ? "⯨" : "☆"}
            </span>
          </button>
        );
      })}
      {value > 0 && <span className="text-xs text-yellow-600 font-medium ml-1">{value}</span>}
    </div>
  );
}

export default function MemoSection({ restaurantId }: MemoSectionProps) {
  const { user } = useAuth();
  const [memo, setMemo] = useState<Memo | null>(null);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState(false);

  // Form state
  const [rating, setRating] = useState(3);
  const [text, setText] = useState("");
  const [visitedAt, setVisitedAt] = useState(new Date().toISOString().slice(0, 10));
  const [submitting, setSubmitting] = useState(false);

  const loadMemo = useCallback(() => {
    if (!user) { setLoading(false); return; }
    setLoading(true);
    api.getMemo(restaurantId)
      .then(setMemo)
      .catch(() => setMemo(null))
      .finally(() => setLoading(false));
  }, [restaurantId, user]);

  useEffect(() => {
    loadMemo();
  }, [loadMemo]);

  if (!user) return null;

  const startEdit = () => {
    if (memo) {
      setRating(memo.rating || 3);
      setText(memo.memo_text || "");
      setVisitedAt(memo.visited_at || new Date().toISOString().slice(0, 10));
    } else {
      setRating(3);
      setText("");
      setVisitedAt(new Date().toISOString().slice(0, 10));
    }
    setEditing(true);
    setShowForm(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      const saved = await api.upsertMemo(restaurantId, {
        rating,
        memo_text: text || undefined,
        visited_at: visitedAt || undefined,
      });
      setMemo(saved);
      setShowForm(false);
      setEditing(false);
    } catch (err) {
      // #281 — 사용자 피드백
      alert(`메모 저장 실패: ${err instanceof Error ? err.message : String(err)}`);
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async () => {
    if (!confirm("메모를 삭제하시겠습니까?")) return;
    try {
      await api.deleteMemo(restaurantId);
      setMemo(null);
    } catch (err) {
      alert(`메모 삭제 실패: ${err instanceof Error ? err.message : String(err)}`);
    }
  };

  return (
    <div className="mt-4">
      <div className="flex items-center gap-2 mb-2">
        <Icon name="edit_note" size={18} className="text-brand-600" />
        <h3 className="font-semibold text-sm">내 메모</h3>
        <span className="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">비공개</span>
      </div>

      {loading ? (
        <div className="animate-pulse space-y-2">
          <div className="h-3 w-32 bg-gray-200 rounded" />
          <div className="h-3 w-full bg-gray-200 rounded" />
        </div>
      ) : showForm ? (
        <form onSubmit={handleSubmit} className="space-y-3 border border-brand-200 rounded-lg p-3 bg-brand-50/30">
          <StarSelector value={rating} onChange={setRating} />
          <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="나만의 메모를 작성하세요 (선택)"
            className="w-full border rounded p-2 text-sm resize-none"
            rows={3}
          />
          <div className="flex items-center gap-2">
            <label className="text-xs text-gray-500">방문일:</label>
            <input
              type="date"
              value={visitedAt}
              onChange={(e) => setVisitedAt(e.target.value)}
              className="border rounded px-2 py-1 text-xs"
            />
          </div>
          <div className="flex gap-2">
            <button
              type="submit"
              disabled={submitting}
              className="px-3 py-1 bg-brand-500 text-white text-sm rounded hover:bg-brand-600 disabled:opacity-50"
            >
              {submitting ? "저장 중..." : editing && memo ? "수정" : "저장"}
            </button>
            <button
              type="button"
              onClick={() => { setShowForm(false); setEditing(false); }}
              className="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded hover:bg-gray-300"
            >
              취소
            </button>
          </div>
        </form>
      ) : memo ? (
        <div className="border border-brand-200 rounded-lg p-3 bg-brand-50/30">
          <div className="flex items-center gap-2 mb-1">
            {memo.rating && <Stars rating={memo.rating} />}
            {memo.visited_at && (
              <span className="text-xs text-gray-400">방문일: {memo.visited_at}</span>
            )}
          </div>
          {memo.memo_text && (
            <p className="text-sm text-gray-700 mt-1">{memo.memo_text}</p>
          )}
          <div className="flex gap-2 mt-2">
            <button onClick={startEdit} className="text-xs text-blue-600 hover:underline">수정</button>
            <button onClick={handleDelete} className="text-xs text-red-600 hover:underline">삭제</button>
          </div>
        </div>
      ) : (
        <button
          onClick={startEdit}
          className="px-3 py-1.5 border border-dashed border-brand-300 text-brand-600 text-sm rounded-lg hover:bg-brand-50 transition-colors"
        >
          <Icon name="add" size={14} className="mr-0.5" />
          메모 작성
        </button>
      )}
    </div>
  );
}