'use client';

import { Check, FolderOpen, MessageSquare } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { Badge } from '@/components/ui/shared/Badge';
import { Button } from '@/components/ui/shared/Button';
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
import {
  canEditLabTaskStatus,
  labTaskStatusSelectStyle,
  labTaskStatusVariant,
} from '@/components/lab/labTaskStatusDisplay';
import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
import {
  formatToothList,
  prosthesisTypeBadgeStyleFromCatalog,
} from '@/components/treatment/prosthesisTypeDisplay';
import { tasksApi } from '@/lib/api/tasks';
import type { LabTaskListItem, LabTaskStatus } from '@/types/cases';
import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';

interface TaskRowProps {
  task: LabTaskListItem;
  locale: string;
  flatMode: boolean;
  highlighted?: boolean;
  exiting?: boolean;
  canEdit: boolean;
  currentUserId?: string;
  statusOptions: { value: LabTaskStatus; label: string }[];
  updatingTaskId: string | null;
  commentsOpen: boolean;
  prosthesisCatalog: readonly ProsthesisCatalogEntry[];
  onStatusUpdate: (taskId: string, status: LabTaskStatus) => void;
  onToggleComments: (taskId: string) => void;
  onCommentError: (message: string) => void;
  onShowInCase?: (task: LabTaskListItem) => void;
}

function formatPatientName(patient: { firstName: string; lastName: string }) {
  return `${patient.firstName} ${patient.lastName}`.trim();
}

export function TaskRow({
  task,
  locale,
  flatMode,
  highlighted = false,
  exiting = false,
  canEdit,
  currentUserId,
  statusOptions,
  updatingTaskId,
  commentsOpen,
  prosthesisCatalog,
  onStatusUpdate,
  onToggleComments,
  onCommentError,
  onShowInCase,
}: TaskRowProps) {
  const t = useTranslations('tasks');
  const canEditStatus = canEditLabTaskStatus(task, currentUserId, canEdit);
  const assignedToOther =
    Boolean(task.assignee) && task.assignee!.id !== currentUserId;
  const taskDate = new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  }).format(new Date(task.createdAt));

  const rowClassName = [
    flatMode ? undefined : 'border-b border-border/40 last:border-b-0',
    exiting ? 'task-row-complete-exit' : undefined,
    !exiting && highlighted
      ? 'relative bg-primary/10 ring-2 ring-inset ring-primary/50 shadow-[0_0_16px_rgba(99,102,241,0.2)]'
      : undefined,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <li id={`task-row-${task.id}`} className={rowClassName}>
      <div
        className={`flex flex-col gap-3 px-3 py-3 sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(8.5rem,11rem)_auto] sm:items-center sm:gap-x-3 sm:gap-y-0.5 sm:py-2 ${
          flatMode ? '' : 'ps-5'
        }`}
      >
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-1.5">
            <p className="text-sm font-medium text-text-primary">
              {task.stepOrder}. {task.stepLabel}
            </p>
            {exiting ? (
              <span className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-700 dark:text-emerald-400">
                <Check className="h-3.5 w-3.5" />
                {t('taskCompletedFlash')}
              </span>
            ) : null}
            {flatMode && task.isImportant && !exiting ? (
              <Badge variant="warning" fixedWidth={false}>
                {t('importantBadge')}
              </Badge>
            ) : null}
            {flatMode && task.caseDueDate && !exiting ? (
              <LabCaseDueDateBadge
                dueDate={task.caseDueDate}
                locale={locale}
                className="text-[10px]"
              />
            ) : null}
          </div>
          {flatMode ? (
            <p className="text-[11px] text-text-secondary truncate">
              {t('fromClinic', { name: task.clinic.name })} · {formatPatientName(task.patient)}{' '}
              · {t('teethLabel', { teeth: formatToothList(task.teeth) })}
            </p>
          ) : null}
          <p className="text-[11px] text-text-muted truncate">
            <span>{t('taskDate', { date: taskDate })}</span>
            {task.lastStatusChangedBy ? (
              <>
                <span aria-hidden> · </span>
                <span>{t('lastUpdatedBy', { name: task.lastStatusChangedBy.name })}</span>
              </>
            ) : null}
          </p>
        </div>

        <div
          className={`flex sm:justify-center pe-2 sm:pe-3 shrink-0 ${
            assignedToOther ? 'mb-1 sm:mb-0' : ''
          }`}
        >
          {canEditStatus && !exiting ? (
            <select
              value={task.status}
              disabled={updatingTaskId === task.id || exiting}
              onChange={(e) => onStatusUpdate(task.id, e.target.value as LabTaskStatus)}
              className={`${FORM_SELECT_CLASS} w-full sm:max-w-[132px] font-medium`}
              style={labTaskStatusSelectStyle(task.status)}
            >
              {statusOptions.map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
          ) : assignedToOther && !exiting ? (
            <Badge
              variant="default"
              fixedWidth={false}
              className="text-center whitespace-normal leading-snug max-w-[10.5rem]"
            >
              {t('assignedToStaff', { name: task.assignee!.name })}
            </Badge>
          ) : (
            <Badge variant={labTaskStatusVariant(task.status)} fixedWidth={false}>
              {statusOptions.find((opt) => opt.value === task.status)?.label ?? task.status}
            </Badge>
          )}
        </div>

        <div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end flex-wrap ps-1 sm:ps-0">
          {flatMode && onShowInCase && !exiting ? (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="text-xs px-2 py-1 h-auto"
              onClick={() => onShowInCase(task)}
            >
              <FolderOpen className="h-3.5 w-3.5 me-1" />
              {t('showInCase')}
            </Button>
          ) : null}
          {canEdit && !exiting ? (
            <button
              type="button"
              onClick={() => onToggleComments(task.id)}
              className={`p-1.5 rounded border ${
                commentsOpen
                  ? 'border-primary bg-primary/10 text-primary'
                  : 'border-border text-text-muted hover:border-primary/40'
              }`}
              title={t('commentsButton')}
            >
              <MessageSquare className="h-4 w-4" />
            </button>
          ) : null}
          {flatMode ? (
            <Badge
              fixedWidth={false}
              truncate
              title={task.prosthesisTypeLabel}
              style={prosthesisTypeBadgeStyleFromCatalog(
                task.prosthesisTypeCode,
                prosthesisCatalog,
              )}
              className="w-full max-w-[8rem] sm:w-[7rem]"
            >
              {task.prosthesisTypeLabel}
            </Badge>
          ) : null}
        </div>
      </div>

      {commentsOpen && canEdit && !exiting ? (
        <div className="px-3 pb-3 border-t border-border/50">
          <LabCaseCommentsPanel
            caseId={task.labCaseId}
            canPost
            canToggleVisibility
            loadComments={async () => {
              const r = await tasksApi.listComments(task.labCaseId);
              return r.data;
            }}
            onPost={async (body, visibleToClinic) => {
              const r = await tasksApi.addComment(task.labCaseId, {
                body,
                visibleToClinic,
              });
              return r.data;
            }}
            onToggleVisibility={async (commentId, visible) => {
              const r = await tasksApi.setCommentVisibility(commentId, visible);
              return r.data;
            }}
            onError={onCommentError}
          />
        </div>
      ) : null}
    </li>
  );
}