// Address book / 주소록 page
// Shares the my-shell layout with the reservation history page.

const TAG_OPTIONS = [
  { key: "home", label: "집" },
  { key: "office", label: "사무실" },
  { key: "family", label: "가족" },
  { key: "friend", label: "친구" },
  { key: "work", label: "거래처" },
];

const INITIAL_ADDRESSES = [
  {
    id: "a1",
    name: "박서연", phone: "010-1234-5678",
    zip: "04766",
    base: "서울 성동구 왕십리로 222",
    detail: "성수동 빌딩 805호",
    tag: "home",
    starred: true,
    isDefault: true,
    lastUsed: "오늘",
    useCount: 24,
  },
  {
    id: "a2",
    name: "솔브잇 본사", phone: "02-1234-5678",
    zip: "04766",
    base: "서울 성동구 왕십리로 222",
    detail: "성수 빌딩 8층",
    tag: "office",
    starred: true,
    lastUsed: "3일 전",
    useCount: 18,
  },
  {
    id: "a3",
    name: "김민지", phone: "010-2345-6789",
    zip: "48058",
    base: "부산 해운대구 우동 1495-3",
    detail: "마린시티 302동 1801호",
    tag: "friend",
    starred: true,
    lastUsed: "5일 전",
    useCount: 9,
  },
  {
    id: "a4",
    name: "어머니", phone: "010-3456-7890",
    zip: "16876",
    base: "경기 용인시 수지구 풍덕천로 100",
    detail: "현대아파트 105동 802호",
    tag: "family",
    starred: false,
    lastUsed: "2주 전",
    useCount: 12,
  },
  {
    id: "a5",
    name: "이주안", phone: "010-4567-8901",
    zip: "42175",
    base: "대구 수성구 두산동 123-4",
    detail: "수성SK리더스뷰 302동 705호",
    tag: "friend",
    starred: false,
    lastUsed: "한 달 전",
    useCount: 4,
  },
  {
    id: "a6",
    name: "정태우", phone: "010-5678-9012",
    zip: "21984",
    base: "인천 연수구 송도동 21-5",
    detail: "더샵센트럴파크3차 1동 2103호",
    tag: "friend",
    starred: false,
    lastUsed: "한 달 전",
    useCount: 3,
  },
  {
    id: "a7",
    name: "북나우 출판사", phone: "02-987-6543",
    zip: "06236",
    base: "서울 강남구 테헤란로 123",
    detail: "글래스타워 6층",
    tag: "work",
    starred: false,
    lastUsed: "2달 전",
    useCount: 6,
  },
  {
    id: "a8",
    name: "최예진", phone: "010-6789-0123",
    zip: "61071",
    base: "광주 북구 매곡동 88-1",
    detail: "그랜드빌 102호",
    tag: "friend",
    starred: false,
    lastUsed: "3달 전",
    useCount: 2,
  },
];

const FILTERS = [
  { key: "all", label: "전체" },
  { key: "starred", label: "즐겨찾기" },
  { key: "home", label: "집" },
  { key: "office", label: "사무실" },
  { key: "family", label: "가족" },
  { key: "friend", label: "친구" },
  { key: "work", label: "거래처" },
];

const TAG_LABEL = {
  home: "집",
  office: "사무실",
  family: "가족",
  friend: "친구",
  work: "거래처",
};

const AddressBook = ({ navigate }) => {
  const [list, setList] = React.useState(INITIAL_ADDRESSES);
  const [filter, setFilter] = React.useState("all");
  const [query, setQuery] = React.useState("");
  const [editing, setEditing] = React.useState(null); // address obj or "new" or null

  const counts = {
    all: list.length,
    starred: list.filter(a => a.starred).length,
    home: list.filter(a => a.tag === "home").length,
    office: list.filter(a => a.tag === "office").length,
    family: list.filter(a => a.tag === "family").length,
    friend: list.filter(a => a.tag === "friend").length,
    work: list.filter(a => a.tag === "work").length,
  };

  const filtered = list.filter(a => {
    if (filter === "starred") { if (!a.starred) return false; }
    else if (filter !== "all" && a.tag !== filter) return false;
    if (query.trim()) {
      const q = query.toLowerCase();
      if (!a.name.toLowerCase().includes(q)
          && !a.phone.includes(q)
          && !a.base.includes(q)
          && !a.detail.toLowerCase().includes(q)) {
        return false;
      }
    }
    return true;
  });

  const toggleStar = (id) => {
    setList(list.map(a => a.id === id ? { ...a, starred: !a.starred } : a));
  };
  const removeAddr = (id) => {
    if (confirm("이 주소를 삭제할까요?")) {
      setList(list.filter(a => a.id !== id));
    }
  };
  const saveAddr = (form) => {
    if (form.id) {
      setList(list.map(a => a.id === form.id ? { ...a, ...form } : a));
    } else {
      const id = "a" + Date.now();
      setList([{ id, lastUsed: "방금 추가", useCount: 0, starred: false, ...form }, ...list]);
    }
    setEditing(null);
  };

  return (
    <main>
      <div className="my-shell">
        <aside className="my-sidebar">
          <div className="my-profile" style={{ marginBottom: 24 }}>
            <div className="avatar">박</div>
            <div>
              <div className="name">박서연 님</div>
              <div className="meta">2024.03 가입 · 일반회원</div>
            </div>
          </div>

          <ul className="my-nav">
            <li onClick={() => navigate('my')}>
              <span className="ic"><Icon name="package" size={16}/></span>
              예약 내역
              <span className="badge">6</span>
            </li>
            <li onClick={() => navigate('track')}>
              <span className="ic"><Icon name="search" size={16}/></span>
              조회 기록
            </li>
            <li className="active">
              <span className="ic"><Icon name="user" size={16}/></span>
              주소록
              <span className="badge">{list.length}</span>
            </li>
            <li>
              <span className="ic"><Icon name="card" size={16}/></span>
              결제·환불 내역
            </li>
            <li>
              <span className="ic"><Icon name="shield" size={16}/></span>
              분실·파손 신청
            </li>
            <li>
              <span className="ic"><Icon name="bell" size={16}/></span>
              알림 설정
            </li>
          </ul>

          <button className="btn btn-outline btn-block btn-sm">
            <Icon name="sparkle" size={13}/> 계정 설정
          </button>
        </aside>

        <section className="my-main">
          <div className="my-head">
            <div>
              <h1>주소록</h1>
              <p className="summary">
                자주 보내는 곳을 저장해두면 다음 예약은 30초면 끝나요. 현재 {list.length}개의 주소.
              </p>
            </div>
            <div className="actions">
              <button className="btn btn-outline btn-sm">
                <Icon name="share" size={13}/> 가져오기
              </button>
              <button className="btn btn-primary btn-sm" onClick={() => setEditing("new")}>
                <Icon name="sparkle" size={13}/> 주소 추가
              </button>
            </div>
          </div>

          <div className="addr-toolbar">
            <div className="addr-search-bar">
              <Icon name="search" size={16}/>
              <input
                type="text"
                placeholder="이름, 전화번호, 주소로 검색"
                value={query}
                onChange={e => setQuery(e.target.value)}
              />
            </div>
          </div>

          <div className="addr-filter-row">
            {FILTERS.map(f => (
              <button key={f.key}
                className={`addr-filter ${filter === f.key ? "active" : ""}`}
                onClick={() => setFilter(f.key)}>
                {f.key === "starred" && <Icon name="sparkle" size={11}/>}
                {f.label}
                <span className="count">{counts[f.key]}</span>
              </button>
            ))}
          </div>

          {filtered.length === 0 ? (
            <div className="empty-state">
              <div className="ic"><Icon name="user" size={28} stroke={1.4}/></div>
              <h3>{query ? `"${query}"에 해당하는 주소가 없어요` : "이 카테고리에 저장된 주소가 없어요"}</h3>
              <p>새 주소를 추가하거나 다른 필터를 선택해주세요.</p>
              <button className="btn btn-primary" onClick={() => setEditing("new")}>
                <Icon name="sparkle" size={14}/> 주소 추가
              </button>
            </div>
          ) : (
            <div className="addr-grid">
              {filtered.map(a => (
                <AddressCard key={a.id} a={a}
                  onEdit={() => setEditing(a)}
                  onRemove={() => removeAddr(a.id)}
                  onStar={() => toggleStar(a.id)}
                  onSend={() => navigate('reserve')}
                />
              ))}
              {filter === "all" && !query && (
                <div className="addr-add" onClick={() => setEditing("new")}>
                  <div className="plus">+</div>
                  <div className="label">새 주소 추가</div>
                  <div className="sub">자주 보내는 곳을 저장해두세요</div>
                </div>
              )}
            </div>
          )}
        </section>
      </div>

      {editing && (
        <AddressModal
          initial={editing === "new" ? null : editing}
          onClose={() => setEditing(null)}
          onSave={saveAddr}
          onDelete={editing !== "new" ? () => { removeAddr(editing.id); setEditing(null); } : null}
        />
      )}
    </main>
  );
};

const AddressCard = ({ a, onEdit, onRemove, onStar, onSend }) => {
  return (
    <div className={`addr-card ${a.isDefault ? "is-default" : ""}`}>
      <div className="top">
        <div className="who">
          <div className="avatar">{a.name.charAt(0)}</div>
          <div className="name-block">
            <div className="name">
              <span>{a.name}</span>
              <button
                className={`icon-btn star ${a.starred ? "active" : ""}`}
                onClick={onStar}
                style={{ width: 20, height: 20 }}
                title={a.starred ? "즐겨찾기 해제" : "즐겨찾기"}
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill={a.starred ? "currentColor" : "none"}
                     stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round">
                  <path d="M12 3l2.7 5.6 6.3.9-4.6 4.4 1.1 6.1L12 17.2l-5.5 2.8 1.1-6.1L3 9.5l6.3-.9L12 3z"/>
                </svg>
              </button>
            </div>
            <div className="phone">{a.phone}</div>
          </div>
        </div>
        <div className="addr-tags">
          {a.isDefault && <span className="addr-tag default">기본</span>}
          <span className={`addr-tag ${a.tag}`}>{TAG_LABEL[a.tag]}</span>
        </div>
      </div>

      <div className="addr-body">
        <div className="ic"><Icon name="pin" size={13}/></div>
        <div className="text">
          <span className="zip">{a.zip}</span>
          {a.base}
          <span className="line">{a.detail}</span>
        </div>
      </div>

      <div className="addr-foot">
        <div className="last-used">
          <Icon name="clock" size={12}/>
          {a.lastUsed} 사용 · 총 {a.useCount}회
        </div>
        <div className="actions">
          <button className="icon-btn" onClick={onSend} title="이 주소로 보내기">
            <Icon name="arrow-right" size={14}/>
          </button>
          <button className="icon-btn" onClick={onEdit} title="편집">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 20h4l10-10-4-4L4 16v4z"/><path d="M14 6l4 4"/>
            </svg>
          </button>
          <button className="icon-btn danger" onClick={onRemove} title="삭제">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 7h14"/><path d="M10 11v6M14 11v6"/>
              <path d="M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/>
              <path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
};

const AddressModal = ({ initial, onClose, onSave, onDelete }) => {
  const [form, setForm] = React.useState(initial || {
    name: "", phone: "", zip: "", base: "", detail: "",
    tag: "friend",
  });
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canSave = form.name && form.phone && form.base;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <h3>{initial ? "주소 편집" : "새 주소 추가"}</h3>
          <button className="icon-btn" onClick={onClose}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
              <path d="M6 6l12 12M18 6L6 18"/>
            </svg>
          </button>
        </div>
        <div className="modal-body">
          <div className="form-grid">
            <div className="field-group">
              <label>이름·별칭 <span style={{ color: "var(--primary)" }}>*</span></label>
              <input className="input" value={form.name} autoFocus
                onChange={e => update('name', e.target.value)}
                placeholder="예: 어머니, 김민지" />
            </div>
            <div className="field-group">
              <label>휴대폰 <span style={{ color: "var(--primary)" }}>*</span></label>
              <input className="input" value={form.phone}
                onChange={e => update('phone', e.target.value)}
                placeholder="010-0000-0000" />
            </div>
            <div className="field-group full">
              <label>주소 <span style={{ color: "var(--primary)" }}>*</span></label>
              <div style={{ display: "flex", gap: 8 }}>
                <input className="input" value={form.zip} onChange={e => update('zip', e.target.value)}
                  style={{ maxWidth: 120 }} placeholder="우편번호"/>
                <button className="btn btn-outline" type="button">우편번호 찾기</button>
              </div>
              <input className="input" value={form.base} onChange={e => update('base', e.target.value)}
                style={{ marginTop: 6 }} placeholder="기본 주소"/>
              <input className="input" value={form.detail} onChange={e => update('detail', e.target.value)}
                placeholder="상세 주소 (동·호수 등)" style={{ marginTop: 6 }}/>
            </div>
            <div className="field-group full">
              <label>분류</label>
              <div className="tag-picker">
                {TAG_OPTIONS.map(t => (
                  <button key={t.key} type="button"
                    className={`tag-pick-btn ${form.tag === t.key ? "selected" : ""}`}
                    onClick={() => update('tag', t.key)}>
                    {t.label}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className="modal-foot">
          {onDelete && (
            <button className="btn btn-ghost btn-sm"
              onClick={onDelete}
              style={{ marginRight: "auto", color: "var(--danger)" }}>
              삭제
            </button>
          )}
          <button className="btn btn-outline" onClick={onClose}>취소</button>
          <button className="btn btn-primary"
            disabled={!canSave}
            style={{ opacity: canSave ? 1 : 0.5 }}
            onClick={() => onSave(form)}>
            {initial ? "변경 저장" : "주소 추가"}
          </button>
        </div>
      </div>
    </div>
  );
};

window.AddressBook = AddressBook;