import { AlertTriangle, CheckCircle2, FileArchive, RefreshCw, Upload } from 'lucide-react';
import React from 'react';
import { adminExecuteLearnImport, adminListLearnImports, adminUploadLearnImport } from '../api';
import type { LearnImportAnalysis, LearnImportBatch, LearnImportSummary } from '../types';
import { LearnConfirmDialog } from './learn-dialogs';

function countValue(counts:Record<string,number>|undefined,key:string){const value=Number(counts?.[key]||0);return Number.isFinite(value)?value:0;}
function sourceId(value:unknown){const numeric=Number(value);return Number.isFinite(numeric)?numeric:String(value??'');}

export function AdminLearnImportPage(){
  const [file,setFile]=React.useState<File|null>(null);
  const [analysis,setAnalysis]=React.useState<LearnImportAnalysis|null>(null);
  const [selected,setSelected]=React.useState<Set<number|string>>(new Set());
  const [mode,setMode]=React.useState<'skip'|'update'|'copy'>('skip');
  const [courseStatus,setCourseStatus]=React.useState<'draft'|'published'>('draft');
  const [busy,setBusy]=React.useState<'upload'|'import'|''>('');
  const [error,setError]=React.useState('');
  const [summary,setSummary]=React.useState<LearnImportSummary|null>(null);
  const [confirmOpen,setConfirmOpen]=React.useState(false);
  const [batches,setBatches]=React.useState<LearnImportBatch[]>([]);
  const loadBatches=React.useCallback(()=>adminListLearnImports().then(setBatches).catch(()=>{}),[]);
  React.useEffect(()=>{void loadBatches()},[loadBatches]);

  const analyze=async()=>{if(!file)return;setBusy('upload');setError('');setSummary(null);try{const result=await adminUploadLearnImport(file);setAnalysis(result);setSelected(new Set(result.courses.filter(course=>course.state!=='unchanged').map(course=>sourceId(course.source.id))));await loadBatches();}catch(reason){setError(reason instanceof Error?reason.message:String(reason));}finally{setBusy('')}};
  const toggle=(id:number|string)=>setSelected(current=>{const next=new Set(current);if(next.has(id))next.delete(id);else next.add(id);return next});
  const execute=async()=>{if(!analysis||!selected.size)return;setConfirmOpen(false);setBusy('import');setError('');try{const result=await adminExecuteLearnImport(analysis.batch.id,{mode,courseStatus,courseSourceIds:[...selected]});setSummary(result);await loadBatches();}catch(reason){setError(reason instanceof Error?reason.message:String(reason));}finally{setBusy('')}};
  const counts=analysis?.counts||analysis?.report?.counts||{};
  const modeCopy=mode==='copy'?'Create independent copies of the selected courses.':mode==='update'?'Update changed imported entities and add new entities; unchanged entities are skipped.':'Skip unchanged/changed existing entities and import only content that has not been imported before.';

  return <div className="interactive-admin-learn-list interactive-admin-learn-import-page">
    <div className="interactive-admin-page-head"><div><span className="interactive-eyebrow">Learn migration</span><h1 className="interactive-display">Import SPX package</h1><p>Import a validated package created by <code>tools/spx-import/</code>. Raw SPX SQL is deliberately not accepted by the web application.</p></div><a className="interactive-button interactive-button-secondary" href="/admin/learn">Back to courses</a></div>
    {error?<p className="interactive-error-copy" role="alert">{error}</p>:null}
    <section className="interactive-settings-card interactive-learn-import-upload">
      <div><span className="interactive-eyebrow">Step 1</span><h2>Analyze package</h2><p className="interactive-muted">The server verifies package format, path safety, decompression bounds and every SHA-256 checksum before showing a preview.</p></div>
      <label className="interactive-learn-import-file"><FileArchive className="size-5"/><input type="file" accept=".zip,application/zip" onChange={event=>{setFile(event.currentTarget.files?.[0]||null);setAnalysis(null);setSummary(null)}}/><span>{file?.name||'Choose Learnitive Learn import ZIP'}</span></label>
      <button type="button" className="interactive-button interactive-button-primary" disabled={!file||busy!==''} onClick={()=>void analyze()}><Upload className="size-4"/>{busy==='upload'?'Analyzing…':'Upload & analyze'}</button>
    </section>

    {analysis?<>
      <section className="interactive-settings-card interactive-learn-import-summary">
        <div><span className="interactive-eyebrow">Verified package</span><h2>{analysis.manifest.source.filename||'SPX Learn package'}</h2><p className="interactive-muted">Source SHA-256: <code>{analysis.manifest.source.sha256}</code></p></div>
        <div className="interactive-learn-import-counts">
          {(['courses','sections','lessons','quizzes','questions','media','warnings'] as const).map(key=><div key={key}><strong>{key==='warnings'?analysis.warningCount:countValue(counts,key)}</strong><span>{key}</span></div>)}
        </div>
        {analysis.warningCount>0?<p className="interactive-learn-import-warning"><AlertTriangle className="size-4"/> {analysis.warningCount} preprocessing warning{analysis.warningCount===1?'':'s'} are preserved for administrator review. Unsupported blocks are not silently discarded.</p>:<p className="interactive-learn-import-ok"><CheckCircle2 className="size-4"/> Package analysis did not report conversion warnings.</p>}
      </section>

      <section className="interactive-settings-card interactive-learn-import-preview">
        <div><span className="interactive-eyebrow">Step 2</span><h2>Select courses</h2><p className="interactive-muted">New and changed courses are selected by default. You can explicitly select unchanged courses when creating copies.</p></div>
        <div className="interactive-learn-import-course-actions"><button type="button" className="interactive-button interactive-button-secondary" onClick={()=>setSelected(new Set(analysis.courses.map(course=>sourceId(course.source.id))))}>Select all</button><button type="button" className="interactive-button interactive-button-secondary" onClick={()=>setSelected(new Set())}>Clear</button></div>
        <div className="interactive-learn-import-courses">{analysis.courses.map(course=>{const id=sourceId(course.source.id);return <label key={String(id)} className="interactive-learn-import-course"><input type="checkbox" checked={selected.has(id)} onChange={()=>toggle(id)}/><span><strong>{course.title}</strong><small>SPX #{String(id)} · {course.sectionCount} sections</small></span><span className={`interactive-admin-learn-status is-${course.state==='new'?'published':course.state==='changed'?'draft':'archived'}`}>{course.state}</span></label>})}</div>
      </section>

      <section className="interactive-settings-card interactive-learn-import-options">
        <div><span className="interactive-eyebrow">Step 3</span><h2>Import policy</h2></div>
        <label><span>Existing imported content</span><select value={mode} onChange={event=>setMode(event.currentTarget.value as typeof mode)}><option value="skip">Skip unchanged / existing changed</option><option value="update">Update changed</option><option value="copy">Create copy</option></select></label>
        <p className="interactive-muted">{modeCopy}</p>
        <label><span>Imported course status</span><select value={courseStatus} onChange={event=>setCourseStatus(event.currentTarget.value as typeof courseStatus)}><option value="draft">Draft (recommended)</option><option value="published">Published</option></select></label>
        <button type="button" className="interactive-button interactive-button-primary" disabled={!selected.size||busy!==''} onClick={()=>setConfirmOpen(true)}>Import {selected.size} course{selected.size===1?'':'s'}</button>
      </section>
    </>:null}

    {summary?<section className="interactive-settings-card interactive-learn-import-result"><div><span className="interactive-eyebrow">Import complete</span><h2>Learn v2 updated</h2></div><div className="interactive-learn-import-counts"><div><strong>{summary.created.courses}</strong><span>courses created</span></div><div><strong>{summary.created.lessons}</strong><span>lessons created</span></div><div><strong>{summary.updated.lessons}</strong><span>lessons updated</span></div><div><strong>{summary.created.media}</strong><span>media created</span></div></div><a className="interactive-button interactive-button-primary" href="/admin/learn">Review courses</a></section>:null}

    <section className="interactive-settings-card interactive-learn-import-history"><div><span className="interactive-eyebrow">Recent activity</span><h2>Import batches</h2></div><button type="button" className="interactive-button interactive-button-secondary" onClick={()=>void loadBatches()}><RefreshCw className="size-4"/> Refresh</button>{batches.length?<div className="interactive-learn-import-batches">{batches.slice(0,10).map(batch=><div key={batch.id}><strong>Batch #{batch.id}</strong><span>{batch.status}</span><small>{batch.sourceSha256.slice(0,12)}… · {batch.mode}</small></div>)}</div>:<p className="interactive-muted">No import batches yet.</p>}</section>

    <LearnConfirmDialog open={confirmOpen} title={`Import ${selected.size} course${selected.size===1?'':'s'}?`} description={`${modeCopy} Imported courses will be ${courseStatus}. The package source and entity hashes will be recorded for idempotent reruns.`} confirmLabel={busy==='import'?'Importing…':'Start import'} busy={busy==='import'} onOpenChange={setConfirmOpen} onConfirm={execute}/>
  </div>;
}