ftb-project-management/apps/web/components/workspace/DailyReportPanel.tsx

'use client';

import { AlertTriangle, CalendarDays, ClipboardList, Clock3 } from 'lucide-react';
import { WORK_ACTIVITY_CATEGORY_LABEL, type WorkActivityCategory } from '@/lib/work-activity';
import type { WorkspaceDailyReport } from '@/lib/workspace-daily-report';
import { formatDateTimeShort } from '@/lib/format';
import { formatWorkHours, formatWorkHoursShort } from '@/lib/work-hours';

interface Props {
  report: WorkspaceDailyReport;
}

export function DailyReportPanel({ report }: Props) {
  const groupOrder: WorkActivityCategory[] = ['delivery', 'progress', 'creation', 'risk', 'note'];
  const hasActivities = groupOrder.some((key) => report.groups[key].length > 0);
  const hasLegacyWorklogs = report.items.length > 0;
  const hasNeedsProgress = report.needsProgressItems.length > 0;

  return (
    <aside className="w-80 shrink-0 border-l border-[var(--line)] bg-[var(--bg-card)] flex flex-col">
      <div className="flex h-14 items-center justify-between border-b border-[var(--line)] px-4">
        <div>
          <h2 className="text-[14px] font-semibold text-[var(--ink)]">今日日报</h2>
          <div className="mt-0.5 flex items-center gap-1 text-[11px] text-[var(--ink-muted)]">
            <CalendarDays className="h-3 w-3" />
            <span>{report.date}</span>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-2 border-b border-[var(--line)] p-3">
        <div className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-2">
          <div className="flex items-center gap-1 text-[10px] text-[var(--ink-muted)]">
            <Clock3 className="h-3 w-3" />
            <span>工时合计</span>
          </div>
          <p className="mt-1 text-[16px] font-semibold text-[var(--ink)]">{formatWorkHours(report.totalHours)}</p>
        </div>
        <div className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-2">
          <div className="flex items-center gap-1 text-[10px] text-[var(--ink-muted)]">
            <ClipboardList className="h-3 w-3" />
            <span>日报记录</span>
          </div>
          <p className="mt-1 text-[16px] font-semibold text-[var(--ink)]">{report.totalCount} 条</p>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto p-3">
        {!hasActivities && !hasLegacyWorklogs && !hasNeedsProgress ? (
          <div className="rounded-lg border border-dashed border-[var(--line)] bg-[var(--bg)] p-4 text-center">
            <p className="text-[13px] font-medium text-[var(--ink)]">今日暂无日报记录</p>
          </div>
        ) : (
          <div className="space-y-4">
            {groupOrder.map((key) => {
              const items = report.groups[key];
              if (items.length === 0) return null;

              return (
                <section key={key}>
                  <div className="mb-2 flex items-center justify-between">
                    <h3 className="text-[11px] font-semibold text-[var(--ink-soft)]">{WORK_ACTIVITY_CATEGORY_LABEL[key]}</h3>
                    <span className="text-[10px] text-[var(--ink-muted)]">{items.length} 条</span>
                  </div>
                  <div className="space-y-2">
                    {items.map((item) => (
                      <div key={item.id} className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-3">
                        <div className="flex items-start justify-between gap-2">
                          <p className="min-w-0 flex-1 break-words text-[12px] font-medium leading-5 text-[var(--ink)]">{item.summary}</p>
                          <span className="shrink-0 text-[10px] text-[var(--ink-muted)]">{formatDateTimeShort(item.occurredAt)}</span>
                        </div>
                        {item.context && (
                          <p className="mt-1 truncate text-[10px] text-[var(--ink-muted)]" title={item.context}>{item.context}</p>
                        )}
                      </div>
                    ))}
                  </div>
                </section>
              );
            })}

            {hasLegacyWorklogs && (
              <section>
                <div className="mb-2 flex items-center justify-between">
                  <h3 className="text-[11px] font-semibold text-[var(--ink-soft)]">工时记录</h3>
                  <span className="text-[10px] text-[var(--ink-muted)]">{report.items.length} 条</span>
                </div>
                <div className="space-y-2">
                  {report.items.map((item) => {
                    const contextLabel = [item.productName, item.projectName, item.versionName].filter(Boolean).join(' / ');

                    return (
                      <div key={item.id} className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-3">
                        <div className="flex items-start justify-between gap-2">
                          <p className="min-w-0 flex-1 break-words text-[12px] font-medium leading-5 text-[var(--ink)]">{item.workContent}</p>
                          <span className="shrink-0 rounded bg-[var(--accent-soft)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--accent)]">
                            {formatWorkHoursShort(item.hours)}
                          </span>
                        </div>
                        <p className="mt-2 truncate text-[11px] text-[var(--ink-soft)]" title={item.taskTitle}>{item.taskTitle}</p>
                        {contextLabel && (
                          <p className="mt-1 truncate text-[10px] text-[var(--ink-muted)]" title={contextLabel}>
                            {contextLabel}
                          </p>
                        )}
                      </div>
                    );
                  })}
                </div>
              </section>
            )}

            {hasNeedsProgress && (
              <section>
                <div className="mb-2 flex items-center gap-1.5">
                  <AlertTriangle className="h-3 w-3 text-orange-500" />
                  <h3 className="text-[11px] font-semibold text-orange-700">需补进展</h3>
                </div>
                <div className="space-y-2">
                  {report.needsProgressItems.map((item) => (
                    <div key={item.id} className="rounded-lg border border-orange-200 bg-orange-50 p-3">
                      <p className="break-words text-[12px] font-medium leading-5 text-orange-800">{item.title}</p>
                      {item.context && <p className="mt-1 truncate text-[10px] text-orange-700/70" title={item.context}>{item.context}</p>}
                    </div>
                  ))}
                </div>
              </section>
            )}
          </div>
        )}
      </div>
    </aside>
  );
}