/**
 * Component: Manual Import Confirm Phase
 * Documentation: documentation/features/manual-import.md
 *
 * Shows book context, selected folder, pipeline steps summary,
 * and start import / back actions.
 */

'use client';

import React from 'react';
import Image from 'next/image';
import { ArrowLeftIcon, ExclamationCircleIcon, MusicalNoteIcon } from '@heroicons/react/24/outline';
import { AudioFileEntry, formatBytes } from './types';

interface ConfirmPhaseProps {
  audiobook: { asin: string; title: string; author: string; coverArtUrl?: string };
  selectedPath: string;
  audioFiles: AudioFileEntry[];
  checkedFiles: Set<string>;
  isImporting: boolean;
  importError: string | null;
  slideClass: string;
  cleanupSource: boolean;
  onCleanupSourceChange: (value: boolean) => void;
  onToggleFile: (fileName: string) => void;
  onToggleAll: () => void;
  onBack: () => void;
  onStartImport: () => void;
}

export function ConfirmPhase({
  audiobook,
  selectedPath,
  audioFiles,
  checkedFiles,
  isImporting,
  importError,
  slideClass,
  cleanupSource,
  onCleanupSourceChange,
  onToggleFile,
  onToggleAll,
  onBack,
  onStartImport,
}: ConfirmPhaseProps) {
  const allChecked = audioFiles.length > 0 && checkedFiles.size === audioFiles.length;
  const someChecked = checkedFiles.size > 0 && !allChecked;
  const checkedSize = audioFiles
    .filter((f) => checkedFiles.has(f.name))
    .reduce((sum, f) => sum + f.size, 0);
  return (
    <div className={`flex flex-col h-full ${slideClass}`}>
      <div className="flex-1 overflow-y-auto p-6 space-y-6">
        {/* Book context */}
        <div className="flex items-start gap-4">
          <div className="w-16 h-16 rounded-xl overflow-hidden flex-shrink-0 bg-gray-100 dark:bg-gray-800">
            {audiobook.coverArtUrl ? (
              <Image
                src={audiobook.coverArtUrl}
                alt=""
                width={64}
                height={64}
                className="w-full h-full object-cover"
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center">
                <MusicalNoteIcon className="w-6 h-6 text-gray-400" />
              </div>
            )}
          </div>
          <div className="min-w-0">
            <h3 className="font-semibold text-gray-900 dark:text-gray-100 truncate">
              {audiobook.title}
            </h3>
            <p className="text-sm text-gray-500 dark:text-gray-400">{audiobook.author}</p>
          </div>
        </div>

        {/* Selected folder info */}
        <div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
          <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">
            Import from
          </p>
          <p className="text-sm font-mono text-gray-900 dark:text-gray-100 break-all">
            {selectedPath}
          </p>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
            {checkedFiles.size} of {audioFiles.length} file{audioFiles.length !== 1 ? 's' : ''} selected
            {checkedSize > 0 ? ` \u00B7 ${formatBytes(checkedSize)}` : ''}
          </p>
        </div>

        {/* Audio files to import */}
        <div>
          <div className="flex items-center gap-3 mb-3">
            <input
              type="checkbox"
              checked={allChecked}
              ref={(el) => { if (el) el.indeterminate = someChecked; }}
              onChange={onToggleAll}
              disabled={isImporting}
              className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 cursor-pointer"
            />
            <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
              Files to import
            </h4>
          </div>
          <div className="rounded-xl border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800 overflow-hidden max-h-48 overflow-y-auto">
            {audioFiles.map((file) => {
              const isChecked = checkedFiles.has(file.name);
              return (
                <label
                  key={file.name}
                  className={`flex items-center gap-3 px-3.5 py-2.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors ${!isChecked ? 'opacity-50' : ''}`}
                >
                  <input
                    type="checkbox"
                    checked={isChecked}
                    onChange={() => onToggleFile(file.name)}
                    disabled={isImporting}
                    className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 cursor-pointer"
                  />
                  <MusicalNoteIcon className="w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0" />
                  <span className="flex-1 min-w-0 text-sm text-gray-700 dark:text-gray-300 truncate">
                    {file.name}
                  </span>
                  <span className="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0">
                    {formatBytes(file.size)}
                  </span>
                </label>
              );
            })}
          </div>
        </div>

        {/* Cleanup source toggle */}
        <div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                Cleanup source files
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                Delete original files after successful import
              </p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={cleanupSource}
                onChange={(e) => onCleanupSourceChange(e.target.checked)}
                disabled={isImporting}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
            </label>
          </div>
        </div>
      </div>

      {/* Error display */}
      {importError && (
        <div className="mx-5 mb-2 p-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 flex items-start gap-2.5">
          <ExclamationCircleIcon className="w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5" />
          <p className="text-sm text-red-700 dark:text-red-300">{importError}</p>
        </div>
      )}

      {/* Footer */}
      <div className="px-5 py-3.5 border-t border-gray-200 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/30 flex items-center justify-between gap-3">
        <button
          onClick={onBack}
          disabled={isImporting}
          className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors disabled:opacity-50"
        >
          <ArrowLeftIcon className="w-4 h-4" />
          Back
        </button>
        <button
          onClick={onStartImport}
          disabled={isImporting || checkedFiles.size === 0}
          className="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-xl transition-colors disabled:opacity-70 flex items-center gap-2"
        >
          {isImporting ? (
            <>
              <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              Importing...
            </>
          ) : (
            'Start Import'
          )}
        </button>
      </div>
    </div>
  );
}
