'use client';

import React from 'react';
import {
  AlertCircle,
  CheckCircle2,
  Circle,
  FileJson,
  FileOutput,
  FileText,
  Image as ImageIcon,
  Link2,
  ListChecks,
  Loader2,
  PanelRightOpen,
  X,
} from 'lucide-react';

import { ScrollArea } from '@/components/ui/scroll-area';
import { appStatusLabel } from '@/lib/i18n/common';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import type {
  SessionProgressArtifactView,
  SessionProgressStepView,
  SessionProgressView,
} from '@/lib/session-progress';
import type { ProcessArtifact, ProcessRunStatus } from '@/types';

function formatShortTime(value: string, locale: 'zh-CN' | 'en-US') {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat(locale, {
    hour: '2-digit',
    minute: '2-digit',
  }).format(date);
}

function statusTone(status: ProcessRunStatus) {
  if (status === 'done') return 'text-[#2F8D50] bg-[#E3F1E7] border-[#B8D9C2]';
  if (status === 'running') return 'text-[#2F6FCA] bg-[#E7EEF9] border-[#B8CBE8]';
  if (status === 'error') return 'text-[#8A3A2D] bg-[#F0E5E1] border-[#D9BDB4]';
  if (status === 'cancelled') return 'text-[#6A5E58] bg-[#ECE8E5] border-[#D8D2CE]';
  return 'text-[#6A5E58] bg-[#F0ECE9] border-[#D8D2CE]';
}

function StepMarker({ step, index }: { step: SessionProgressStepView; index: number }) {
  if (step.status === 'done') {
    return (
      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2F8D50] text-white">
        <CheckCircle2 className="h-4 w-4" />
      </span>
    );
  }
  if (step.status === 'running') {
    return (
      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2F6FCA] text-[11px] font-semibold text-white">
        {index + 1}
      </span>
    );
  }
  if (step.status === 'error') {
    return (
      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#8A3A2D] text-white">
        <AlertCircle className="h-4 w-4" />
      </span>
    );
  }
  return (
    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#D8D2CE] text-[#6A5E58]">
      <Circle className="h-3.5 w-3.5" />
    </span>
  );
}

function artifactIcon(type: ProcessArtifact['artifact_type']) {
  if (type === 'json') return <FileJson className="h-4 w-4" />;
  if (type === 'image') return <ImageIcon className="h-4 w-4" />;
  if (type === 'link') return <Link2 className="h-4 w-4" />;
  if (type === 'markdown' || type === 'text') return <FileText className="h-4 w-4" />;
  return <FileOutput className="h-4 w-4" />;
}

function ProgressHeader({ view }: { view: SessionProgressView }) {
  const { locale } = useAppI18n();
  const percent = view.progress.percent;

  return (
    <section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4 shadow-[0_8px_24px_rgba(0,0,0,0.04)]">
      <div className="flex items-start gap-3">
        <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#E3F1E7] text-[#2F8D50]">
          <ListChecks className="h-4 w-4" />
        </div>
        <div className="min-w-0 flex-1">
          <div className="line-clamp-2 text-sm font-semibold text-foreground">{view.title}</div>
          <div className="mt-2 flex items-center gap-2">
            <span className={`rounded-full border px-2 py-0.5 text-[11px] font-medium ${statusTone(view.status)}`}>
              {appStatusLabel(view.status, locale)}
            </span>
            <span className="text-[11px] text-muted-foreground">
              {pickAppText(locale, '更新于', 'Updated')} {formatShortTime(view.updatedAt, locale)}
            </span>
          </div>
        </div>
      </div>

      <div className="mt-4">
        <div className="mb-2 flex items-center justify-between gap-3 text-xs text-muted-foreground">
          <span>{view.progress.label}</span>
          {percent !== null && <span className="font-medium text-foreground">{percent}%</span>}
        </div>
        <div className="h-2 overflow-hidden rounded-full bg-[#ECE8E5]">
          <div
            className="h-full rounded-full bg-[#5DB56F] transition-all"
            style={{ width: `${percent ?? 0}%` }}
          />
        </div>
      </div>

      {view.summary && (
        <p className="mt-3 line-clamp-3 text-xs leading-5 text-muted-foreground">{view.summary}</p>
      )}
    </section>
  );
}

function StepList({ steps }: { steps: SessionProgressStepView[] }) {
  const { locale } = useAppI18n();

  return (
    <section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4">
      <div className="mb-4 flex items-center justify-between">
        <h3 className="text-sm font-semibold text-foreground">
          {pickAppText(locale, '运行步骤', 'Run Steps')}
        </h3>
        <span className="text-xs text-muted-foreground">
          {pickAppText(locale, `${steps.length} 步`, `${steps.length} steps`)}
        </span>
      </div>

      <div className="space-y-0">
        {steps.map((step, index) => (
          <div key={step.runId} className="grid grid-cols-[24px_1fr] gap-3">
            <div className="flex flex-col items-center">
              <StepMarker step={step} index={index} />
              {index < steps.length - 1 && <span className="mt-2 h-full min-h-8 w-px bg-[#E6E1DE]" />}
            </div>
            <div className="pb-5">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <div className="line-clamp-2 text-sm font-medium text-foreground">
                    {index + 1}. {step.title}
                  </div>
                  <div className="mt-1 text-[11px] text-muted-foreground">
                    {step.actorName} · {formatShortTime(step.updatedAt, locale)}
                  </div>
                </div>
                <span className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] ${statusTone(step.status)}`}>
                  {appStatusLabel(step.status, locale)}
                </span>
              </div>
              {step.description && (
                <p className="mt-2 line-clamp-3 text-xs leading-5 text-muted-foreground">
                  {step.description}
                </p>
              )}
              {step.status === 'running' && (
                <div className="mt-2 flex items-center gap-1.5 text-[11px] text-[#2F6FCA]">
                  <Loader2 className="h-3 w-3 animate-spin" />
                  <span>{pickAppText(locale, '正在处理', 'In progress')}</span>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ArtifactRow({ artifact }: { artifact: SessionProgressArtifactView }) {
  return (
    <a
      href={artifact.url || undefined}
      target={artifact.url ? '_blank' : undefined}
      rel={artifact.url ? 'noreferrer' : undefined}
      className="block rounded-lg border border-[#ECE7E3] bg-[#FDFDFC] px-3 py-3 transition-colors hover:bg-[#F7F6F5]"
    >
      <div className="flex items-start gap-3">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#ECE8E5] text-[#5F5550]">
          {artifactIcon(artifact.type)}
        </div>
        <div className="min-w-0 flex-1">
          <div className="truncate text-sm font-medium text-foreground">{artifact.title}</div>
          <div className="mt-1 text-[11px] text-muted-foreground">
            {artifact.actorName} · {artifact.typeLabel}
          </div>
          <p className="mt-2 line-clamp-2 text-xs leading-5 text-muted-foreground">{artifact.preview}</p>
        </div>
      </div>
    </a>
  );
}

function ArtifactSection({ view }: { view: SessionProgressView }) {
  const { locale } = useAppI18n();

  return (
    <section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4">
      <div className="mb-3 flex items-center justify-between">
        <h3 className="text-sm font-semibold text-foreground">
          {pickAppText(locale, '生成内容', 'Generated Content')}
        </h3>
        <span className="text-xs text-muted-foreground">
          {pickAppText(locale, `${view.artifacts.length} 个`, `${view.artifacts.length} items`)}
        </span>
      </div>

      {view.artifactTypeSummaries.length > 0 ? (
        <div className="mb-3 flex flex-wrap gap-2">
          {view.artifactTypeSummaries.map((item) => (
            <span
              key={item.type}
              className="inline-flex items-center gap-1.5 rounded-full border border-[#E6E1DE] bg-[#F7F6F5] px-2.5 py-1 text-xs text-[#4F4642]"
            >
              {artifactIcon(item.type)}
              <span>{item.label}</span>
              <span className="font-semibold">{item.count}</span>
            </span>
          ))}
        </div>
      ) : (
        <p className="mb-3 text-xs text-muted-foreground">
          {pickAppText(locale, '暂时还没有生成内容。', 'No generated content yet.')}
        </p>
      )}

      <div className="space-y-2">
        {view.artifacts.map((artifact) => (
          <ArtifactRow key={artifact.artifactId} artifact={artifact} />
        ))}
      </div>
    </section>
  );
}

function ProgressPanel({
  view,
  onClose,
}: {
  view: SessionProgressView;
  onClose?: () => void;
}) {
  const { locale } = useAppI18n();

  return (
    <div className="flex h-full flex-col bg-[#FBFAF9]">
      <div className="flex h-16 shrink-0 items-center justify-between border-b border-[#E6E1DE] px-5">
        <div>
          <h2 className="text-base font-semibold text-foreground">
            {pickAppText(locale, '当前会话的运行进度', 'Current Session Progress')}
          </h2>
          <p className="text-xs text-muted-foreground">
            {pickAppText(locale, '任务列表会自动刷新', 'Task updates refresh automatically')}
          </p>
        </div>
        {onClose && (
          <button
            type="button"
            onClick={onClose}
            className="rounded-full p-2 text-muted-foreground transition-colors hover:bg-[#ECE8E5] hover:text-foreground"
            aria-label={pickAppText(locale, '关闭进度面板', 'Close progress panel')}
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>

      <ScrollArea className="min-h-0 flex-1 px-4 py-4">
        <div className="space-y-4 pb-6">
          <ProgressHeader view={view} />
          <StepList steps={view.steps} />
          <ArtifactSection view={view} />
        </div>
      </ScrollArea>
    </div>
  );
}

export function CurrentSessionProgressSidebar({ view }: { view: SessionProgressView }) {
  const { locale } = useAppI18n();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  return (
    <>
      <aside className="hidden h-full w-[380px] shrink-0 border-l border-[#E6E1DE] xl:flex">
        <ProgressPanel view={view} />
      </aside>

      <button
        type="button"
        onClick={() => setMobileOpen(true)}
        className="fixed right-3 top-24 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-[#E6E1DE] bg-white text-[#342E2B] shadow-[0_8px_22px_rgba(0,0,0,0.16)] transition-colors hover:bg-[#F7F6F5] xl:hidden"
        aria-label={pickAppText(locale, '查看当前会话运行进度', 'View current session progress')}
      >
        <PanelRightOpen className="h-5 w-5" />
      </button>

      {mobileOpen && (
        <div className="fixed inset-0 z-50 xl:hidden">
          <button
            type="button"
            className="absolute inset-0 bg-black/30"
            onClick={() => setMobileOpen(false)}
            aria-label={pickAppText(locale, '关闭进度面板', 'Close progress panel')}
          />
          <div className="absolute inset-y-0 right-0 w-[min(92vw,390px)] border-l border-[#E6E1DE] shadow-2xl">
            <ProgressPanel view={view} onClose={() => setMobileOpen(false)} />
          </div>
        </div>
      )}
    </>
  );
}