export function PlatformCards() {
  const platforms = [
    {
      name: 'WebGL',
      icon: '🌐',
      status: 'Aktiv',
      size: '~15 MB',
      features: ['Browser-basiert', 'Sofort spielbar', 'Admin Panel Embed']
    },
    {
      name: 'iOS',
      icon: '📱',
      status: 'Bereit',
      size: '~80 MB',
      features: ['iPhone & iPad', 'App Store', 'Push Notifications']
    },
    {
      name: 'Android',
      icon: '🤖',
      status: 'Bereit',
      size: '~60 MB',
      features: ['Play Store', 'AAB Format', 'Wide Device Support']
    },
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
      {platforms.map((platform) => (
        <div key={platform.name} className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-4 border border-green-100">
          <div className="flex items-center gap-3 mb-3">
            <span className="text-3xl">{platform.icon}</span>
            <div>
              <h4 className="font-bold text-gray-900">{platform.name}</h4>
              <p className="text-sm text-gray-500">{platform.size}</p>
            </div>
            <span className="ml-auto px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">
              {platform.status}
            </span>
          </div>
          <ul className="space-y-1">
            {platform.features.map((feature, i) => (
              <li key={i} className="text-sm text-gray-600 flex items-center gap-2">
                <span className="text-green-500">✓</span> {feature}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  )
}

export function WorkflowDiagram() {
  const jobs = [
    { name: 'version', icon: '🏷️', runner: 'ubuntu' },
    { name: 'build-webgl', icon: '🌐', runner: 'ubuntu' },
    { name: 'build-ios', icon: '📱', runner: 'macos' },
    { name: 'build-android', icon: '🤖', runner: 'ubuntu' },
    { name: 'deploy', icon: '🚀', runner: 'ubuntu' },
  ]

  return (
    <div className="mt-6 bg-gray-900 rounded-lg p-6">
      <h3 className="text-white font-semibold mb-4">Workflow Jobs</h3>
      <div className="flex flex-wrap gap-4">
        {jobs.map((job, i) => (
          <div key={job.name} className="flex items-center gap-2">
            <div className="bg-gray-800 rounded-lg p-3 text-center min-w-[100px]">
              <span className="text-2xl">{job.icon}</span>
              <p className="text-white text-sm font-medium mt-1">{job.name}</p>
              <p className="text-gray-500 text-xs">{job.runner}</p>
            </div>
            {i < jobs.length - 1 && (
              <span className="text-gray-600 text-xl">→</span>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

export function SecretsChecklist() {
  const secrets = [
    { name: 'UNITY_LICENSE', desc: 'Unity Personal/Pro License', required: true },
    { name: 'UNITY_EMAIL', desc: 'Unity Account Email', required: true },
    { name: 'UNITY_PASSWORD', desc: 'Unity Account Password', required: true },
    { name: 'IOS_BUILD_CERTIFICATE_BASE64', desc: 'Apple Distribution Certificate', required: false },
    { name: 'IOS_PROVISION_PROFILE_BASE64', desc: 'iOS Provisioning Profile', required: false },
    { name: 'ANDROID_KEYSTORE_BASE64', desc: 'Android Signing Keystore', required: false },
    { name: 'AWS_ACCESS_KEY_ID', desc: 'AWS fuer S3/CloudFront', required: false },
  ]

  return (
    <div className="mt-6 bg-white rounded-lg border border-gray-200 overflow-hidden">
      <div className="px-4 py-3 bg-gray-50 border-b">
        <h3 className="font-semibold text-gray-800">GitHub Secrets Checkliste</h3>
      </div>
      <ul className="divide-y">
        {secrets.map((secret) => (
          <li key={secret.name} className="px-4 py-3 flex items-center justify-between">
            <div>
              <code className="text-sm bg-gray-100 px-2 py-1 rounded">{secret.name}</code>
              <p className="text-sm text-gray-500 mt-1">{secret.desc}</p>
            </div>
            <span className={`text-xs px-2 py-1 rounded ${
              secret.required ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'
            }`}>
              {secret.required ? 'Pflicht' : 'Optional'}
            </span>
          </li>
        ))}
      </ul>
    </div>
  )
}