import type { ComponentType } from 'react'
import { BookOpen, Building2, CalendarClock, FileText, Folder, FolderOpen, Image as ImageIcon, Pencil, UserRound } from 'lucide-react'
import type { CaseDocument, DocumentExhibit, Evidence, Exhibit, ExhibitRelation, ExhibitType, SourceFileType, TemporalFact } from './types'

export type WidgetCommand =
  | { type: 'open-document'; documentId: string }
  | { type: 'toggle-folder'; folderId: string }
  | { type: 'edit-folder'; folderId: string }
  | { type: 'edit-event'; eventId: string }
  | { type: 'edit-party'; partyId: string }
  | { type: 'edit-document'; documentId: string }
  | { type: 'update-memory-cue'; documentId: string; cue: string }

export type ExhibitWidgetContext = {
  exhibits: Exhibit[]
  relations: ExhibitRelation[]
  dispatch: (command: WidgetCommand) => void
}

export type ExhibitWidgetProps = { exhibit: Exhibit; context: ExhibitWidgetContext }
export type WidgetCapabilities = { movable: boolean; resizable: boolean; connectable: boolean; discardable: boolean; dockable: boolean }
export type ConnectionPort = { id: string; x: number; y: number }

export type ExhibitWidgetDefinition = {
  modelKind: 'exhibit'
  visualType: ExhibitType
  shell: 'card' | 'document'
  defaultSize: { width: number; height: number }
  capabilities: WidgetCapabilities
  heading: (exhibit: Exhibit, context: ExhibitWidgetContext) => string
  connectionPorts: (exhibit: Exhibit) => ConnectionPort[]
  temporalFacts: (exhibit: Exhibit) => TemporalFact[]
  searchText: (exhibit: Exhibit) => string
  Component: ComponentType<ExhibitWidgetProps>
}

const relationsFrom = (context: ExhibitWidgetContext, exhibitId: string, type: ExhibitRelation['type']) => context.relations
  .filter(relation => relation.type === type && relation.fromExhibitId === exhibitId)
  .sort((a, b) => a.sortOrder - b.sortOrder)

function FolderWidget({ exhibit, context }: ExhibitWidgetProps) {
  if (exhibit.type !== 'folder') return null
  const documents = relationsFrom(context, exhibit.id, 'contains').flatMap(relation => {
    const document = context.exhibits.find(candidate => candidate.id === relation.toExhibitId)
    return document?.type === 'document' ? [document] : []
  })
  return <div className="card-content"><h3>{exhibit.title}</h3><p>{exhibit.content}</p>
    {!exhibit.isOpen && <div className="folder-documents">{documents.slice(0,3).map(document => <button key={document.id} onClick={() => context.dispatch({ type:'open-document',documentId:document.id })} title={document.title}><FileText size={12}/><span>{document.title}</span>{document.publishedAt && <time>{document.publishedAt.slice(0,10)}</time>}</button>)}{documents.length > 3 && <small>+ {documents.length - 3} MORE FILES</small>}</div>}
    <div className="folder-actions"><button onClick={() => context.dispatch({ type:'toggle-folder',folderId:exhibit.id })}>{exhibit.isOpen ? <Folder size={12}/> : <FolderOpen size={12}/>} {exhibit.isOpen ? 'CLOSE' : 'OPEN'}</button><button onClick={() => context.dispatch({ type:'edit-folder',folderId:exhibit.id })}><Pencil size={12}/> EDIT</button></div>
  </div>
}

function NoteWidget({ exhibit, context }: ExhibitWidgetProps) {
  if (exhibit.type !== 'note') return null
  const source = relationsFrom(context, exhibit.id, 'source')[0]
  return <div className="card-content"><h3>{exhibit.title}</h3><p>{exhibit.content}</p>
    {source && <button onClick={() => context.dispatch({ type:'open-document',documentId:source.toExhibitId })}><BookOpen size={13}/> VIEW SOURCE</button>}
  </div>
}

function EventWidget({ exhibit, context }: ExhibitWidgetProps) {
  if (exhibit.type !== 'event') return null
  const supportCount = relationsFrom(context,exhibit.id,'supports').length
  return <div className="card-content"><h3>{exhibit.title}</h3><p>{exhibit.content}</p>
    <time>{exhibit.eventDate ? new Date(exhibit.eventDate).toLocaleString() : 'UNDATED'}</time>
    <div className="event-actions"><span>{supportCount} SUPPORTING EXHIBIT{supportCount === 1 ? '' : 'S'}</span><button onClick={() => context.dispatch({ type:'edit-event',eventId:exhibit.id })}><CalendarClock size={12}/> EDIT EVENT</button></div>
  </div>
}

function PartyWidget({ exhibit, context }: ExhibitWidgetProps) {
  if (exhibit.type !== 'party') return null
  const person = exhibit.partyKind === 'person'
  const evidenceCount = relationsFrom(context,exhibit.id,'concerns').length
  return <div className="card-content"><div className="party-identity">{person ? <UserRound size={28}/> : <Building2 size={28}/>}<div><h3>{exhibit.title}</h3><small>{person ? 'PERSON' : (exhibit.organizationKind || 'ORGANIZATION').replaceAll('_',' ').toUpperCase()}</small></div></div>
    <p>{exhibit.content || 'No dossier summary yet.'}</p>
    {exhibit.aliases.length > 0 && <div className="party-aliases">AKA · {exhibit.aliases.join(' · ')}</div>}
    <div className="event-actions"><span>{evidenceCount} ASSOCIATED EXHIBITS</span><button onClick={() => context.dispatch({ type:'edit-party',partyId:exhibit.id })}><Pencil size={12}/> EDIT DOSSIER</button></div>
  </div>
}

function DocumentWidget({ exhibit }: ExhibitWidgetProps) {
  if (exhibit.type !== 'document') return null
  return <strong>{exhibit.title}</strong>
}

const standardPorts = (exhibit: Exhibit) => [{ id:'centre',x:exhibit.x + exhibit.width / 2,y:exhibit.y + exhibit.height / 2 }]
const notePorts = (exhibit: Exhibit) => [{ id:'knot',x:exhibit.x + exhibit.width / 2,y:exhibit.y + 12 }]
const standardCapabilities: WidgetCapabilities = { movable:true,resizable:false,connectable:true,discardable:true,dockable:false }
const searchable = (exhibit: Exhibit) => exhibit.type === 'document'
  ? [exhibit.title,...exhibit.body,...Object.values(exhibit.metadata)].join('\n').toLocaleLowerCase()
  : [exhibit.title,exhibit.content].join('\n').toLocaleLowerCase()

export const exhibitWidgetRegistry: Record<ExhibitType, ExhibitWidgetDefinition> = {
  folder: { modelKind:'exhibit',visualType:'folder',shell:'card',defaultSize:{width:260,height:166},capabilities:standardCapabilities,
    heading:(exhibit,context) => `EVIDENCE FOLDER / ${relationsFrom(context,exhibit.id,'contains').length}`,connectionPorts:standardPorts,temporalFacts:() => [],searchText:searchable,Component:FolderWidget },
  document: { modelKind:'exhibit',visualType:'document',shell:'document',defaultSize:{width:174,height:145},capabilities:standardCapabilities,
    heading:exhibit => exhibit.type === 'document' ? documentWidget(exhibit.fileType).label.toUpperCase() : 'DOCUMENT',connectionPorts:standardPorts,
    temporalFacts:exhibit => exhibit.type === 'document' ? [
      ...(exhibit.publishedAt ? [{ id:`${exhibit.id}:published`,exhibitId:exhibit.id,kind:'published' as const,start:exhibit.publishedAt,label:exhibit.title }] : []),
      ...(exhibit.capturedAt ? [{ id:`${exhibit.id}:captured`,exhibitId:exhibit.id,kind:'captured' as const,start:exhibit.capturedAt,label:`${exhibit.title} captured` }] : []),
      ...exhibit.regions.flatMap(region => region.date ? [{ id:`${exhibit.id}:region:${region.id}`,exhibitId:exhibit.id,kind:'region_date' as const,start:region.date,label:region.label }] : []),
    ] : [],searchText:searchable,Component:DocumentWidget },
  note: { modelKind:'exhibit',visualType:'note',shell:'card',defaultSize:{width:108,height:154},capabilities:standardCapabilities,
    heading:() => 'INVESTIGATOR / NOTE',connectionPorts:notePorts,temporalFacts:() => [],searchText:searchable,Component:NoteWidget },
  event: { modelKind:'exhibit',visualType:'event',shell:'card',defaultSize:{width:270,height:174},capabilities:standardCapabilities,
    heading:() => 'EVENT / THIS HAPPENED',connectionPorts:standardPorts,temporalFacts:exhibit => exhibit.type === 'event' && exhibit.eventDate
      ? [{ id:`${exhibit.id}:occurred`,exhibitId:exhibit.id,kind:'occurred',start:exhibit.eventDate,label:exhibit.content }] : [],searchText:searchable,Component:EventWidget },
  party: { modelKind:'exhibit',visualType:'party',shell:'card',defaultSize:{width:280,height:190},capabilities:standardCapabilities,
    heading:exhibit => exhibit.type === 'party' && exhibit.partyKind === 'person' ? 'PARTY / PERSON DOSSIER' : 'PARTY / ORGANIZATION DOSSIER',connectionPorts:standardPorts,temporalFacts:() => [],searchText:searchable,Component:PartyWidget },
}

export function exhibitWidget(type: ExhibitType) { return exhibitWidgetRegistry[type] }

type DocumentWidgetProps = { document: CaseDocument; source: string; onMemoryCue?: (cue: string) => void }
export type DocumentWidgetDefinition = { label:string; Preview:ComponentType<DocumentWidgetProps>; Asset:ComponentType<DocumentWidgetProps> }

function ImagePreview({ document,source }: DocumentWidgetProps) { return document.assetId ? <img draggable={false} src={source} alt=""/> : <GenericPreview document={document} source={source}/> }
function GenericPreview({ document }: DocumentWidgetProps) { return <div><ImageIcon size={35}/><small>{document.fileType.toUpperCase()}</small></div> }
function TextPreview({ document,onMemoryCue }: DocumentWidgetProps) {
  const excerpt = document.body.filter(Boolean).slice(0,2).join(' ')
  return <div className="text-document-preview"><p className="text-source-excerpt">{excerpt || document.title}</p><textarea aria-label={`Memory cue for ${document.title}`} maxLength={48} placeholder="WRITE A MEMORY CUE…" value={document.metadata.memory_cue || ''} onPointerDown={event => event.stopPropagation()} onClick={event => event.stopPropagation()} onDoubleClick={event => event.stopPropagation()} onChange={event => onMemoryCue?.(event.target.value)}/></div>
}
function ImageAsset({ document,source }: DocumentWidgetProps) { return <img className="document-image" src={source} alt={document.fileName || document.title}/> }
function FrameAsset({ document,source }: DocumentWidgetProps) { return <iframe className="document-frame" src={source} title={document.fileName || document.title} sandbox="allow-same-origin"/> }
function GenericAsset({ document,source }: DocumentWidgetProps) { return <div className="unsupported-file"><FileText size={42}/><b>{document.fileName || document.title}</b><span>{document.mimeType || 'Unknown file type'} · {document.fileSize ? `${Math.ceil(document.fileSize / 1024)} KB` : ''}</span><a href={source} download={document.fileName}>DOWNLOAD ORIGINAL</a></div> }

const genericDocument = (label:string):DocumentWidgetDefinition => ({label,Preview:GenericPreview,Asset:GenericAsset})
export const documentWidgetRegistry:Record<SourceFileType,DocumentWidgetDefinition> = {
  image:{label:'Image',Preview:ImagePreview,Asset:ImageAsset},pdf:{label:'PDF',Preview:GenericPreview,Asset:FrameAsset},text:{label:'Text document',Preview:TextPreview,Asset:FrameAsset},
  web_capture:genericDocument('Web capture'),email:genericDocument('Email'),article:genericDocument('Article'),filing:genericDocument('Company filing'),price_list:genericDocument('Price list'),file:genericDocument('Generic file'),
}
export function documentWidget(type:SourceFileType) { return documentWidgetRegistry[type] || documentWidgetRegistry.file }

export function documentExhibits(exhibits:Exhibit[]):DocumentExhibit[] { return exhibits.filter((exhibit):exhibit is DocumentExhibit => exhibit.type === 'document') }
export function evidenceExhibits(exhibits:Exhibit[]):Evidence[] { return exhibits.filter((exhibit):exhibit is Evidence => exhibit.type !== 'document') }