import { useState } from 'react'
import type { Org } from '../api/client'
import ChannelFiles from './ChannelFiles'
import ChannelPosts from './ChannelPosts'
import StatusBadge from './StatusBadge'
import WorkMemos from './WorkMemos'

// 기관관리 상세 화면. 3단계 대시보드 시안의 "기관관리" 레이아웃을 따른다.
// 웹 DB에 있는 것(연번·기관명·담당자 3종·채널)만 실데이터고,
// 업무단계/통계/일부 탭 내용은 아직 백엔드가 없어 시안과 같은 골격에
// "추후 연동" 자리만 잡아 둔다.

const STEPS = [
  '신청',
  '목록접수',
  '예비검토',
  '변호사 배당',
  '법률검토(권리확인)',
  'RE:확인',
  '법률검토(권리확인) 완료',
  '법률검토(권리처리)',
  'RE:처리',
  '법률검토(권리처리) 완료',
  '법률검토 최종완료',
  '보고서 작성',
]

const TABS = ['채팅', '자료', '권리확인', '권리처리', 'RE', '타임라인', '업무메모']

const DISABLED_ACTIONS = ['진행단계 변경', '담당 변호사 변경', '자료 업로드', '최초 게시글 보기', '보고서 관리']

// Mattermost 웹 주소. 채널 화면은 팀명 + 채널 내부명으로 열린다.
// 내부명 규칙은 백엔드 ChannelNaming.java가 정본이며 여기서는 열람 링크용으로만 복제한다.
const MATTERMOST_BASE = 'https://hub.iten.co.kr/itn-hub/channels/'
const SPECIAL_ORG_NAME = '경찰청_치안정책연구소'

function mattermostChannelUrl(org: Org): string {
  const slug = org.orgNo.trim().toLowerCase().replace(/_/g, '-').replace(/ /g, '-')
  const name =
    org.orgName.trim() === SPECIAL_ORG_NAME ? `org-${slug}-policy-mj` : `org-${slug}-mj`
  return MATTERMOST_BASE + name
}

function Cell({ value }: { value: string | null }) {
  return <span className={value ? 'text-gray-900' : 'text-gray-300'}>{value ?? '-'}</span>
}

interface ContactRow {
  role: string
  dept: string | null
  manager: string | null
  phone: string | null
  email: string | null
  assignedDate: string | null
}

function contactRows(org: Org): ContactRow[] {
  return [
    {
      role: '신청기관 담당자',
      dept: org.deptName,
      manager: org.managerName
        ? org.managerTitle
          ? `${org.managerName} ${org.managerTitle}`
          : org.managerName
        : null,
      phone: org.managerPhone,
      email: org.managerEmail,
      assignedDate: null,
    },
    {
      role: '문정원 담당자',
      dept: org.mjDeptName,
      manager: org.mjManagerName,
      phone: org.mjManagerPhone,
      email: org.mjManagerEmail,
      assignedDate: null,
    },
    {
      role: '담당 변호사',
      dept: null,
      manager: org.lawyerName,
      phone: org.lawyerPhone,
      email: org.lawyerEmail,
      assignedDate: org.lawyerAssignedDate,
    },
  ]
}

export default function OrgOverview({ org }: { org: Org }) {
  const [activeTab, setActiveTab] = useState(TABS[0])

  return (
    <div className="p-6">
      <div className="rounded-xl border border-gray-200 bg-white p-6">
        {/* 헤더 */}
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <h1 className="text-lg font-bold">
              {org.orgNo}_{org.orgName}
            </h1>
            <StatusBadge status={org.status} />
          </div>

          <div className="flex flex-wrap gap-2">
            {DISABLED_ACTIONS.map((label) => (
              <button
                key={label}
                type="button"
                disabled
                title="준비 중"
                className="cursor-not-allowed rounded-md border border-gray-200 px-3 py-1.5 text-sm text-gray-300"
              >
                {label}
              </button>
            ))}
            {org.channelIdMj ? (
              <a
                href={mattermostChannelUrl(org)}
                target="_blank"
                rel="noreferrer"
                className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
              >
                Mattermost 열기
              </a>
            ) : (
              <button
                type="button"
                disabled
                title="채널이 아직 없습니다"
                className="cursor-not-allowed rounded-md border border-gray-200 px-3 py-1.5 text-sm text-gray-300"
              >
                Mattermost 열기
              </button>
            )}
          </div>
        </div>

        {/* 담당자 3종 (신청기관/문정원/변호사) */}
        <section className="mt-5 overflow-x-auto rounded-lg border border-gray-200">
          <table className="w-full text-left text-sm">
            <thead>
              <tr className="border-b border-gray-200 text-xs text-gray-400">
                <th className="px-4 py-2 font-medium">구분</th>
                <th className="px-4 py-2 font-medium">부서</th>
                <th className="px-4 py-2 font-medium">담당자</th>
                <th className="px-4 py-2 font-medium">연락처</th>
                <th className="px-4 py-2 font-medium">이메일</th>
                <th className="px-4 py-2 font-medium">배정일</th>
              </tr>
            </thead>
            <tbody>
              {contactRows(org).map((row) => (
                <tr key={row.role} className="border-b border-gray-100 last:border-b-0">
                  <td className="px-4 py-2 font-medium text-gray-700">{row.role}</td>
                  <td className="px-4 py-2">
                    <Cell value={row.dept} />
                  </td>
                  <td className="px-4 py-2">
                    <Cell value={row.manager} />
                  </td>
                  <td className="px-4 py-2">
                    <Cell value={row.phone} />
                  </td>
                  <td className="px-4 py-2">
                    <Cell value={row.email} />
                  </td>
                  <td className="px-4 py-2">
                    <Cell value={row.assignedDate} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        {/* 업무단계 현황 */}
        <section className="mt-5">
          <h2 className="text-sm font-semibold">업무단계 현황</h2>
          <ol className="mt-3 flex gap-2 overflow-x-auto pb-2">
            {STEPS.map((step, i) => (
              <li
                key={step}
                className="flex w-24 shrink-0 flex-col items-center gap-1 rounded-lg border border-gray-200 px-2 py-3 text-center"
              >
                <span className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 text-xs text-gray-500">
                  {i + 1}
                </span>
                <span className="text-[11px] leading-tight text-gray-600">{step}</span>
                <span className="text-[11px] text-gray-300">-</span>
              </li>
            ))}
          </ol>
        </section>

        {/* 통계 4칸 */}
        <div className="mt-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
          {[
            ['사전검토', '검토 대상'],
            ['권리확인', '완료 / 전체'],
            ['권리처리', '완료 / 전체'],
            ['RE', '확인·처리 합계'],
          ].map(([title, caption]) => (
            <div key={title} className="rounded-lg border border-gray-200 p-4">
              <p className="text-xs text-gray-400">{title}</p>
              <p className="mt-1 text-sm font-semibold">
                {caption} <span className="ml-1 text-lg text-gray-300">-</span>
              </p>
            </div>
          ))}
        </div>

        {/* 탭 */}
        <div className="mt-6 border-b border-gray-200">
          <nav className="flex gap-1" aria-label="기관 상세 탭">
            {TABS.map((tab) => (
              <button
                key={tab}
                type="button"
                onClick={() => setActiveTab(tab)}
                aria-current={activeTab === tab ? 'true' : undefined}
                className={`border-b-2 px-4 py-2 text-sm ${
                  activeTab === tab
                    ? 'border-blue-600 font-semibold text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700'
                }`}
              >
                {tab}
              </button>
            ))}
          </nav>
        </div>

        {activeTab === '채팅' ? (
          <div className="mt-4 rounded-lg border border-gray-200">
            <ChannelPosts key={org.id} org={org} />
          </div>
        ) : activeTab === '자료' ? (
          <div className="mt-4 rounded-lg border border-gray-200">
            <ChannelFiles key={org.id} org={org} />
          </div>
        ) : activeTab === '업무메모' ? (
          <div className="mt-4 rounded-lg border border-gray-200">
            <WorkMemos key={org.id} org={org} />
          </div>
        ) : (
          <div className="mt-4 rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-400">
            {activeTab} 상세 화면은 추후 확정
          </div>
        )}
      </div>
    </div>
  )
}