import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import PageHeader from '../components/ui/PageHeader';
import StatusBadge from '../components/ui/StatusBadge';
import { formatDate, formatDateTime } from '../lib/utils';
import { useUrlState } from '../hooks/useUrlState';
import type { TreatmentCaseSummary, StaffTreatmentSession, SlotSuggestionResponse } from '../types';

const TABS = [
  { id: 'cases',    label: 'پرونده‌های درمان' },
  { id: 'unbooked', label: 'جلسات بدون نوبت' },
] as const;

type TabId = typeof TABS[number]['id'];

const CASE_STATUS_LABEL: Record<TreatmentCaseSummary['status'], string> = {
  active:    'در جریان',
  completed: 'تمام شده',
  abandoned: 'رها شده',
};

/**
 * پرونده‌های درمان و کارِ باقی‌ماندهٔ منشی.
 *
 * صفِ «جلسات بدون نوبت» عمداً کنار فهرست پرونده‌هاست نه صفحهٔ جدا: هر دو یک سؤال
 * را جواب می‌دهند — «کدام بیمار در چه مرحله‌ای است و چه کاری مانده».
 */
export default function TreatmentCasesPage() {
  const [urlState, setUrlState] = useUrlState({ tab: 'cases', status: '' });
  const tab = (TABS.some((t) => t.id === urlState.tab) ? urlState.tab : 'cases') as TabId;

  return (
    <>
      <PageHeader title="درمان‌های چندجلسه‌ای" />

      <div className="tabs" style={{ marginBottom: 16 }}>
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            className={tab === t.id ? 'active' : ''}
            onClick={() => setUrlState({ tab: t.id })}
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab === 'cases'
        ? <CasesTab status={urlState.status} onStatus={(s) => setUrlState({ status: s })} />
        : <UnbookedTab />}
    </>
  );
}

function CasesTab({ status, onStatus }: { status: string; onStatus: (s: string) => void }) {
  const { data, isLoading } = useQuery({
    queryKey: ['treatment-cases', status],
    queryFn: () => api.get<ApiResponse<TreatmentCaseSummary[]>>(
      `/api/v1/treatment-cases${status ? `?status=${status}` : ''}`,
    ),
    staleTime: 30_000,
  });

  const cases = data?.data ?? [];

  return (
    <>
      <div className="toolbar" style={{ marginBottom: 12, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {[['', 'همه'], ['active', 'در جریان'], ['completed', 'تمام شده'], ['abandoned', 'رها شده']].map(([v, label]) => (
          <button
            key={v}
            type="button"
            className={`btn ${status === v ? 'primary' : 'secondary'} sm`}
            onClick={() => onStatus(v)}
          >
            {label}
          </button>
        ))}
      </div>

      {isLoading ? (
        <div className="card card-pad" style={{ fontSize: 13, color: 'var(--text-3)' }}>در حال بارگذاری...</div>
      ) : cases.length === 0 ? (
        <div className="card card-pad" style={{ fontSize: 13, color: 'var(--text-3)' }}>
          پرونده‌ای یافت نشد. پرونده وقتی ساخته می‌شود که نوبتِ سرویسی با «طول درمان» قطعی شود.
        </div>
      ) : (
        <div style={{ display: 'grid', gap: 12 }}>
          {cases.map((c) => (
            <div key={c.uuid} className="card card-pad" style={{ display: 'grid', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <strong style={{ fontSize: 14 }}>{c.service.name}</strong>
                <span className={`badge ${c.status === 'active' ? 'blue' : c.status === 'completed' ? 'green' : 'gray'}`}>
                  <span className="bdot" />{CASE_STATUS_LABEL[c.status]}
                </span>
                <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
                  {c.completed_sessions} از {c.total_sessions} جلسه
                </span>
              </div>

              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', fontSize: 12.5, color: 'var(--text-2)' }}>
                <span>شروع: {formatDate(c.opened_at)}</span>
                {c.supervisor && <span>پزشک ناظر: {c.supervisor.name}</span>}
                {c.areas.length > 0 && <span>نواحی: {c.areas.map((a) => a.name).join('، ')}</span>}
              </div>

              <progress
                value={c.completed_sessions}
                max={c.total_sessions}
                aria-label={`پیشرفت دوره: ${c.completed_sessions} از ${c.total_sessions}`}
                style={{ width: '100%', height: 6 }}
              />
            </div>
          ))}
        </div>
      )}
    </>
  );
}

function UnbookedTab() {
  const { data, isLoading } = useQuery({
    queryKey: ['treatment-sessions-unbooked'],
    queryFn: () => api.get<ApiResponse<StaffTreatmentSession[]>>('/api/v1/treatment-sessions/unbooked?within_days=14'),
    staleTime: 30_000,
  });

  const sessions = data?.data ?? [];

  return (
    <>
      <p style={{ margin: '0 0 12px', fontSize: 12.5, color: 'var(--text-3)', lineHeight: 1.9 }}>
        جلساتی که سررسیدشان رسیده و هنوز نوبت نگرفته‌اند. رزرو عمداً خودکار نیست — وقتِ مناسب را
        باید با خود بیمار هماهنگ کرد.
      </p>

      {isLoading ? (
        <div className="card card-pad" style={{ fontSize: 13, color: 'var(--text-3)' }}>در حال بارگذاری...</div>
      ) : sessions.length === 0 ? (
        <div className="card card-pad" style={{ fontSize: 13, color: 'var(--text-3)' }}>
          جلسه‌ای در انتظار رزرو نیست.
        </div>
      ) : (
        <div style={{ display: 'grid', gap: 12 }}>
          {sessions.map((s) => (
            <div key={s.uuid} className="card card-pad" style={{ display: 'grid', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <strong style={{ fontSize: 14 }}>{s.service_name}</strong>
                <StatusBadge type="treatment-session" value={s.status} />
                <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
                  جلسهٔ {s.session_number} از {s.total_sessions}
                </span>
              </div>

              {s.due_at !== null && (
                <span style={{ fontSize: 12.5, color: 'var(--warning)' }}>
                  سررسید: {formatDate(s.due_at)}
                </span>
              )}

              <SlotSuggestions sessionUuid={s.uuid} />
            </div>
          ))}
        </div>
      )}
    </>
  );
}

/**
 * وقت‌های آزادِ همان دستگاهی که جلسهٔ قبلی رویش انجام شد.
 *
 * پیشنهاد است نه رزرو: منشی با بیمار هماهنگ می‌کند و بعد از فرم عادی نوبت ثبتش
 * می‌کند. خودکار رزرو کردن یعنی سیستم به‌جای بیمار تصمیم بگیرد و بعد او نیاید.
 */
function SlotSuggestions({ sessionUuid }: { sessionUuid: string }) {
  const [open, setOpen] = useState(false);

  const { data, isLoading, isError } = useQuery({
    queryKey: ['session-slot-suggestions', sessionUuid],
    queryFn: () => api.get<ApiResponse<SlotSuggestionResponse>>(
      `/api/v1/treatment-session/${sessionUuid}/slot-suggestions?days=14`,
    ),
    enabled: open,
    staleTime: 60_000,
  });

  if (!open) {
    return (
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <button type="button" className="btn secondary sm" onClick={() => setOpen(true)}>
          پیشنهاد وقت
        </button>
        <Link to="/admin/appointments/new" className="btn primary sm">ثبت نوبت این جلسه</Link>
      </div>
    );
  }

  const days = data?.data?.days ?? [];

  return (
    <div style={{ display: 'grid', gap: 8 }}>
      {isLoading && <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>در حال جست‌وجوی وقت...</span>}

      {isError && (
        <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
          دستگاهی برای پیشنهاد وقت مشخص نیست — این جلسه هنوز روی هیچ دستگاهی انجام نشده.
        </span>
      )}

      {!isLoading && !isError && days.length === 0 && (
        <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
          در دو هفتهٔ آینده وقت آزادی روی این دستگاه نیست.
        </span>
      )}

      {days.slice(0, 3).map((day) => (
        <div key={day.date} style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
          <span style={{ fontSize: 12.5, minWidth: 96, color: 'var(--text-2)' }}>
            {formatDate(Math.floor(new Date(day.date).getTime() / 1000))}
          </span>
          {day.slots.slice(0, 6).map((slot) => (
            <Link
              key={slot.start}
              to={`/admin/appointments/new?slot_start=${slot.start}&resource_uuid=${data?.data?.resource_uuid ?? ''}`}
              className="btn secondary sm"
              title={formatDateTime(slot.start)}
            >
              {slot.start_time}
            </Link>
          ))}
        </div>
      ))}

      <button type="button" className="btn ghost sm" onClick={() => setOpen(false)} style={{ justifySelf: 'start' }}>
        بستن
      </button>
    </div>
  );
}