import { Avatar } from "../components/ui/Avatar";
import { AvatarUpload } from "../components/ui/AvatarUpload";
import { useState } from "react";

export default function AvatarShowcase() {
  const [testAvatarUrl, setTestAvatarUrl] = useState<string | undefined>(
    undefined
  );

  type AvatarColor =
    | "blue"
    | "green"
    | "purple"
    | "orange"
    | "pink"
    | "teal"
    | "indigo"
    | "red";
  const colors: AvatarColor[] = [
    "blue",
    "green",
    "purple",
    "orange",
    "pink",
    "teal",
    "indigo",
    "red",
  ];

  const sampleUsers = [
    {
      name: "Ana Silva",
      email: "ana@example.com",
      avatar_url: "https://via.placeholder.com/150/0000FF/FFFFFF?text=AS",
    },
    { name: "Bruno Costa", email: "bruno@example.com", avatar_url: null },
    { name: "Carla Santos", email: "carla@example.com", id: "sample-id-1" },
    { name: "Diego Ferreira", email: "diego@example.com" },
  ];

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-6xl mx-auto space-y-12">
        {/* Header */}
        <div className="text-center">
          <h1 className="text-4xl font-bold text-gray-900 mb-2">
            Avatar Showcase
          </h1>
          <p className="text-gray-600">
            Demonstração completa do sistema de avatares
          </p>
        </div>

        {/* Seção 1: Tamanhos */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
            Tamanhos Disponíveis
          </h2>
          <div className="flex items-end gap-8">
            <div className="flex flex-col items-center gap-2">
              <Avatar
                src="https://via.placeholder.com/150"
                name="Extra Small"
                size="xs"
              />
              <span className="text-xs text-gray-500">xs (24px)</span>
            </div>
            <div className="flex flex-col items-center gap-2">
              <Avatar
                src="https://via.placeholder.com/150"
                name="Small"
                size="sm"
              />
              <span className="text-xs text-gray-500">sm (32px)</span>
            </div>
            <div className="flex flex-col items-center gap-2">
              <Avatar
                src="https://via.placeholder.com/150"
                name="Medium"
                size="md"
              />
              <span className="text-xs text-gray-500">md (40px)</span>
            </div>
            <div className="flex flex-col items-center gap-2">
              <Avatar
                src="https://via.placeholder.com/150"
                name="Large"
                size="lg"
              />
              <span className="text-xs text-gray-500">lg (48px)</span>
            </div>
            <div className="flex flex-col items-center gap-2">
              <Avatar
                src="https://via.placeholder.com/150"
                name="Extra Large"
                size="xl"
              />
              <span className="text-xs text-gray-500">xl (64px)</span>
            </div>
          </div>
        </section>

        {/* Seção 2: Cores */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
            Cores de Iniciais
          </h2>
          <div className="grid grid-cols-4 md:grid-cols-8 gap-4">
            {colors.map((color) => (
              <div key={color} className="flex flex-col items-center gap-2">
                <Avatar
                  name={color.charAt(0).toUpperCase() + color.slice(1)}
                  size="lg"
                  color={color}
                />
                <span className="text-xs text-gray-500 capitalize">
                  {color}
                </span>
              </div>
            ))}
          </div>
        </section>

        {/* Seção 3: Com e sem imagem */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
            Fallback de Iniciais
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {sampleUsers.map((user, index) => {
              const userColors: AvatarColor[] = [
                "blue",
                "green",
                "purple",
                "orange",
              ];
              return (
                <div key={index} className="flex flex-col items-center gap-3">
                  <Avatar
                    src={user.avatar_url || user.id || undefined}
                    name={user.name}
                    size="xl"
                    color={userColors[index % 4]}
                    border
                  />
                  <div className="text-center">
                    <p className="font-medium text-gray-900">{user.name}</p>
                    <p className="text-xs text-gray-500">{user.email}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </section>

        {/* Seção 4: Diferentes formatos de src */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
            Formatos de Entrada (src)
          </h2>
          <div className="space-y-4">
            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
              <Avatar
                src="https://via.placeholder.com/150/4F46E5/FFFFFF?text=URL"
                name="URL String"
                size="lg"
              />
              <div>
                <p className="font-medium">String URL</p>
                <code className="text-xs bg-white px-2 py-1 rounded">
                  src="https://..."
                </code>
              </div>
            </div>

            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
              <Avatar
                src={{
                  avatar_url:
                    "https://via.placeholder.com/150/10B981/FFFFFF?text=OBJ",
                }}
                name="Object URL"
                size="lg"
              />
              <div>
                <p className="font-medium">Objeto com avatar_url</p>
                <code className="text-xs bg-white px-2 py-1 rounded">
                  src={`{avatar_url: "..."}`}
                </code>
              </div>
            </div>

            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
              <Avatar
                src={{
                  profile: {
                    avatar_url:
                      "https://via.placeholder.com/150/F59E0B/FFFFFF?text=PRF",
                  },
                }}
                name="Nested Profile"
                size="lg"
              />
              <div>
                <p className="font-medium">Objeto aninhado com profile</p>
                <code className="text-xs bg-white px-2 py-1 rounded">
                  src={`{profile: {avatar_url: "..."}}`}
                </code>
              </div>
            </div>

            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
              <Avatar src={{ id: "user-123" }} name="From ID" size="lg" />
              <div>
                <p className="font-medium">
                  Gera URL do Supabase a partir do ID
                </p>
                <code className="text-xs bg-white px-2 py-1 rounded">
                  src={`{id: "user-123"}`}
                </code>
              </div>
            </div>

            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
              <Avatar name="Sem Imagem" size="lg" color="purple" />
              <div>
                <p className="font-medium">Sem src (apenas iniciais)</p>
                <code className="text-xs bg-white px-2 py-1 rounded">
                  name="Sem Imagem"
                </code>
              </div>
            </div>
          </div>
        </section>

        {/* Seção 5: AvatarUpload Component */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
            AvatarUpload (Editável)
          </h2>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Modo editável */}
            <div>
              <h3 className="font-medium mb-4 text-gray-700">Modo Editável</h3>
              <div className="flex flex-col items-center gap-4 p-6 bg-gray-50 rounded-lg">
                <AvatarUpload
                  userId="demo-user-1"
                  currentAvatarUrl={testAvatarUrl}
                  name="Teste Usuário"
                  color="blue"
                  size="xl"
                  editable={true}
                  onAvatarUpdate={(url) => setTestAvatarUrl(url || undefined)}
                />
                <p className="text-sm text-gray-600 text-center">
                  Clique no ícone da câmera para editar
                </p>
              </div>
            </div>

            {/* Modo somente leitura */}
            <div>
              <h3 className="font-medium mb-4 text-gray-700">
                Modo Somente Leitura
              </h3>
              <div className="flex flex-col items-center gap-4 p-6 bg-gray-50 rounded-lg">
                <AvatarUpload
                  userId="demo-user-2"
                  currentAvatarUrl="https://via.placeholder.com/150/EF4444/FFFFFF?text=RO"
                  name="Leitura Apenas"
                  color="red"
                  size="xl"
                  editable={false}
                />
                <p className="text-sm text-gray-600 text-center">
                  Sem botão de edição
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Seção 6: Casos de uso reais */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
            Casos de Uso Reais
          </h2>

          {/* Lista de pacientes */}
          <div className="mb-6">
            <h3 className="font-medium mb-3 text-gray-700">
              Lista de Pacientes
            </h3>
            <div className="space-y-2">
              {[
                { name: "Maria Oliveira", cpf: "123.456.789-00", age: 45 },
                { name: "João Santos", cpf: "987.654.321-00", age: 32 },
                { name: "Ana Costa", cpf: "456.789.123-00", age: 28 },
              ].map((patient, i) => {
                const patientColors: AvatarColor[] = [
                  "blue",
                  "green",
                  "purple",
                ];
                return (
                  <div
                    key={i}
                    className="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg transition"
                  >
                    <Avatar
                      name={patient.name}
                      size="md"
                      color={patientColors[i]}
                    />
                    <div className="flex-1">
                      <p className="font-medium text-gray-900">
                        {patient.name}
                      </p>
                      <p className="text-sm text-gray-500">
                        CPF: {patient.cpf}
                      </p>
                    </div>
                    <span className="text-sm text-gray-500">
                      {patient.age} anos
                    </span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Lista de consultas */}
          <div>
            <h3 className="font-medium mb-3 text-gray-700">
              Lista de Consultas
            </h3>
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Paciente
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Médico
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Data
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Status
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {[
                    {
                      patient: "Carlos Silva",
                      doctor: "Dr. Pedro Lima",
                      specialty: "Cardiologia",
                      date: "20/12/2024",
                      status: "Confirmada",
                    },
                    {
                      patient: "Lucia Mendes",
                      doctor: "Dra. Julia Ramos",
                      specialty: "Pediatria",
                      date: "21/12/2024",
                      status: "Pendente",
                    },
                  ].map((appointment, i) => (
                    <tr key={i} className="hover:bg-gray-50">
                      <td className="px-4 py-3 whitespace-nowrap">
                        <div className="flex items-center gap-3">
                          <Avatar
                            name={appointment.patient}
                            size="sm"
                            color="blue"
                          />
                          <span className="text-sm text-gray-900">
                            {appointment.patient}
                          </span>
                        </div>
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap">
                        <div className="flex items-center gap-3">
                          <Avatar
                            name={appointment.doctor}
                            size="sm"
                            color="green"
                          />
                          <div>
                            <p className="text-sm text-gray-900">
                              {appointment.doctor}
                            </p>
                            <p className="text-xs text-gray-500">
                              {appointment.specialty}
                            </p>
                          </div>
                        </div>
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        {appointment.date}
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap">
                        <span
                          className={`px-2 py-1 text-xs rounded-full ${
                            appointment.status === "Confirmada"
                              ? "bg-green-100 text-green-800"
                              : "bg-yellow-100 text-yellow-800"
                          }`}
                        >
                          {appointment.status}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </section>

        {/* Seção 7: Código de exemplo */}
        <section className="bg-white rounded-lg shadow p-6">
          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
            Exemplos de Código
          </h2>

          <div className="space-y-4">
            <div>
              <h3 className="font-medium mb-2 text-gray-700">Avatar Simples</h3>
              <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
                {`<Avatar 
  src="https://example.com/avatar.jpg"
  name="João Silva"
  size="md"
  color="blue"
/>`}
              </pre>
            </div>

            <div>
              <h3 className="font-medium mb-2 text-gray-700">
                Avatar com Objeto
              </h3>
              <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
                {`<Avatar 
  src={patient} // {id: "...", avatar_url: "..."}
  name={patient.full_name}
  size="lg"
  color="purple"
  border
/>`}
              </pre>
            </div>

            <div>
              <h3 className="font-medium mb-2 text-gray-700">Avatar Upload</h3>
              <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
                {`<AvatarUpload
  userId={user.id}
  currentAvatarUrl={user.avatar_url}
  name={user.name}
  color="blue"
  size="xl"
  editable={true}
  onAvatarUpdate={(url) => {
    // Atualizar estado
    setAvatarUrl(url);
  }}
/>`}
              </pre>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}
