'use client'

import { useState } from 'react'
import { COLORS } from './types'

function ColorSwatch({ color }: { color: { name: string; value: string; text: string } }) {
  const [copied, setCopied] = useState(false)

  const copyToClipboard = () => {
    navigator.clipboard.writeText(color.value)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <button
      onClick={copyToClipboard}
      className="group flex flex-col items-center"
      title={`Klicken zum Kopieren: ${color.value}`}
    >
      <div
        className="w-16 h-16 rounded-lg shadow-sm border border-slate-200 transition-transform group-hover:scale-110 flex items-center justify-center"
        style={{ backgroundColor: color.value }}
      >
        {copied && (
          <svg className={`w-5 h-5 ${color.text === 'light' ? 'text-white' : 'text-slate-900'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        )}
      </div>
      <span className="text-xs text-slate-600 mt-1">{color.name}</span>
      <span className="text-xs text-slate-400">{color.value}</span>
    </button>
  )
}

export default function ColorsTab() {
  return (
    <div className="space-y-8">
      {Object.entries(COLORS).map(([key, palette]) => (
        <div key={key} className="bg-white rounded-xl border border-slate-200 p-6">
          <h3 className="text-lg font-semibold text-slate-900 mb-4">{palette.name}</h3>
          <div className="flex gap-4 flex-wrap">
            {palette.shades.map((shade) => (
              <ColorSwatch key={shade.name} color={shade} />
            ))}
          </div>
        </div>
      ))}

      {/* Color Usage Guidelines */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Verwendungsrichtlinien</h3>
        <div className="grid grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-slate-700 mb-2">Primary (Sky Blue)</h4>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- Primäre Buttons und CTAs</li>
              <li>- Links und interaktive Elemente</li>
              <li>- Fokuszustände</li>
              <li>- Ausgewählte Navigation</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium text-slate-700 mb-2">Accent (Fuchsia)</h4>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- Highlights und Akzente</li>
              <li>- Badges und Tags</li>
              <li>- Gradient-Akzente</li>
              <li>- Kreative Elemente</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
