import React from 'react'
import { useKrateStore } from '../../state/krateStore'

interface KrateProps {
  krate: KrateWithColor
  collapsed: boolean
}

interface KrateWithColor {
  id: string
  type: string
  title: string
  x: number
  y: number
  width: number
  height: number
  color: string
  minimized: boolean
  windowLayout: {
    cols: number
    rows: number
    cells: Map<string, { col: number; row: number; colSpan: number; rowSpan: number }>
  }
  windows: Map<string, KrateWindow>
}

interface KrateWindow {
  id: string
  type: string
  title: string
  state: unknown
}

const Krate: React.FC<KrateProps> = ({ krate, collapsed }) => {
  const { selectKrate } = useKrateStore()

  if (collapsed) {
    return (
      <div
        style={{
          position: 'absolute',
          left: krate.x,
          top: krate.y,
          width: '230px',
          height: 'auto',
          padding: '12px',
          background: krate.color ? `rgba(${hexToRgba(krate.color)}, 0.04)` : 'rgba(255,255,255,0.04)',
          border: `1px dashed ${krate.color || '#6fb1ff'}4D`,
          borderRadius: '18px',
          cursor: 'pointer',
        }}
        onClick={() => selectKrate(krate.id)}
      >
        <div style={{ fontWeight: '600', color: krate.color || '#6fb1ff' }}>
          {krate.title}
        </div>
        <div style={{ fontSize: '12px', color: '#888' }}>
          {krate.windows.size > 0 ? '..."' : 'Empty'}
        </div>
      </div>
    )
  }

  return (
    <div
      style={{
        position: 'absolute',
        left: krate.x,
        top: krate.y,
        width: krate.width,
        height: krate.height,
        background: krate.color ? `rgba(${hexToRgba(krate.color)}, 0.04)` : 'rgba(255,255,255,0.04)',
        border: `1px dashed ${krate.color || '#6fb1ff'}4D`,
        borderRadius: '18px',
      }}
      onMouseDown={() => selectKrate(krate.id)}
    >
      <KrateHeader krate={krate} onDragStart={() => {}} />
      
      <div
        style={{
          padding: '30px',
          display: 'grid',
          gridTemplateColumns: `repeat(${krate.windowLayout.cols}, 1fr)`,
          gap: '16px',
        }}
      >
        {Array.from(krate.windows.values()).map((window) => (
          <div
            key={window.id}
            style={{
              backgroundColor: '#1a1e26',
              border: '1px solid rgba(140,165,200,0.18)',
              borderRadius: '8px',
              padding: '12px',
              minHeight: '100px',
            }}
          >
            {window.title}
          </div>
        ))}
      </div>
    </div>
  )
}

const KrateHeader: React.FC<{ krate: KrateWithColor; onDragStart: () => void }> = ({
  krate,
  onDragStart,
}) => {
  return (
    <div
      style={{
        padding: '8px 12px',
        borderBottom: `1px solid ${krate.color || '#6fb1ff'}33`,
        cursor: 'grab',
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
      }}
      onMouseDown={(e) => {
        e.stopPropagation()
        onDragStart()
      }}
    >
      <span style={{ fontWeight: '600', flex: 1 }}>{krate.title}</span>
      <span style={{ fontSize: '12px', color: '#888' }}>
        {krate.windows.size} windows
      </span>
      <button
        style={{
          background: 'none',
          border: 'none',
          color: '#888',
          cursor: 'pointer',
          padding: '4px',
        }}
        onClick={(e) => {
          e.stopPropagation()
          alert('Minimize todo')
        }}
      >
        —
      </button>
      <button
        style={{
          background: 'none',
          border: 'none',
          color: '#888',
          cursor: 'pointer',
          padding: '4px',
        }}
        onClick={(e) => {
          e.stopPropagation()
          alert('Delete todo')
        }}
      >
        ×
      </button>
    </div>
  )
}

const hexToRgba = (hex: string) => {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)
  return `${r}, ${g}, ${b}`
}

export { Krate, KrateHeader }