import { useState } from 'react'
import { Shell } from '../layouts/Shell'

interface DocumentUpload {
  name: string
  status: 'validado' | 'pendente'
  lastUpdate: string
}

export function ProfilePage() {
  const [docs, setDocs] = useState<DocumentUpload[]>([
    { name: 'Alvará Sanitário', status: 'validado', lastUpdate: '2024-06-10' },
    { name: 'CRF Responsável Técnico', status: 'pendente', lastUpdate: '2024-05-02' }
  ])

  const updateStatus = (name: string, status: DocumentUpload['status']) => {
    setDocs((prev) => prev.map((doc) => (doc.name === name ? { ...doc, status } : doc)))
  }

  return (
    <Shell>
      <div className="space-y-4 rounded-lg bg-white p-6 shadow-sm">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-xl font-semibold text-medicalBlue">Perfil da Empresa</h1>
            <p className="text-sm text-gray-600">Envie e acompanhe documentos regulatórios da farmácia.</p>
          </div>
        </div>
        <div className="space-y-3">
          {docs.map((doc) => (
            <div key={doc.name} className="flex items-center justify-between rounded bg-gray-50 px-4 py-3">
              <div>
                <p className="font-semibold text-gray-800">{doc.name}</p>
                <p className="text-xs text-gray-500">Última atualização: {doc.lastUpdate}</p>
              </div>
              <div className="flex items-center gap-3">
                <span
                  className={`rounded-full px-3 py-1 text-xs font-semibold ${
                    doc.status === 'validado' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                  }`}
                >
                  {doc.status.toUpperCase()}
                </span>
                <button
                  className="rounded bg-healthGreen px-3 py-1 text-xs font-semibold text-white"
                  onClick={() => updateStatus(doc.name, doc.status === 'validado' ? 'pendente' : 'validado')}
                >
                  Alternar status
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Shell>
  )
}