import { FaCodeBranch } from 'react-icons/fa'
import { FaLinkSlash } from 'react-icons/fa6'
import GiteaLinkButton from './GiteaLinkButton'
import PreviewLinkButton from './PreviewLinkButton'

const STATUS_COLORS = {
  ready: '#10b981',
  live: '#10b981',
  online: '#10b981',
  provisioning: '#f59e0b',
  pending: '#f59e0b',
  building: '#3b82f6',
  error: '#ef4444',
  failed: '#ef4444',
}

function StatusBadge({ label, value }) {
  if (!value) return null
  const color = STATUS_COLORS[String(value).toLowerCase()] || '#a0aec0'
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#cbd5e0', marginRight: 12 }}>
      {label}:
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, display: 'inline-block' }} />
        {value}
      </span>
    </span>
  )
}

export default function AssignedProjectCard({ project, onUnassign, showActions = false }) {
  return (
    <div style={{ background: 'rgba(30,41,59,0.5)', border: '1px solid rgba(59,130,246,0.25)', borderRadius: 10, padding: '12px 14px', marginBottom: 12 }}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div style={{ minWidth: 0 }}>
          <strong>{project.projectName}</strong>
          {project.subdomain && <span className="text-grey" style={{ marginLeft: 8, fontSize: 13 }}>({project.subdomain})</span>}
          {project.repoFullName && (
            <div className="text-grey" style={{ fontSize: 12, marginTop: 4 }}>
              <FaCodeBranch style={{ marginRight: 4 }} />{project.repoFullName}
            </div>
          )}
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexShrink: 0 }}>
          <PreviewLinkButton href={project.previewUrl} />
          <GiteaLinkButton href={project.giteaRepoUrl} />
          {showActions && onUnassign && (
            <button
              type="button"
              title="Vom Ticket lösen"
              aria-label="Vom Ticket lösen"
              onClick={() => onUnassign(project.$id)}
              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, borderRadius: 6, background: 'rgba(239, 68, 68, 0.12)', border: '1px solid rgba(239, 68, 68, 0.35)', color: '#f87171', cursor: 'pointer' }}
            >
              <FaLinkSlash size={16} />
            </button>
          )}
        </div>
      </div>

      {/* Status- und Provisioning-Zeile */}
      <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
        <StatusBadge label="Status" value={project.status} />
        <StatusBadge label="Provisioning" value={project.provisioningStatus} />
      </div>
    </div>
  )
}